danjonescidtrix danjonescidtrix - 20 days ago 5
jQuery Question

Resize font text (inside multiple divs) within container to fit perfectly

So I have a matrix of divs within a container in my page, each div displays either a '1' or a '0'.

If I set my container to a width of 100% and height to fit the bottom of my page, I want to be able to
scale all of the 1's and 0's inside the container's divs (the number of 0's and 1's will be a static number, lets go with 100 for the sake of this question) to always fit the container perfectly no matter what size the browser is resized to, so it fits the width and
height of the container perfectly without any trailing white-space or elements that go off the page or trigger a scroll bar.


The goal is to make sure the fonts resize to fit within the container exactly, regardless of screen size (both height and width).


I have seen multiple similar questions on stack overflow, such as: JavaScript Scale Text to Fit in Fixed Div, but they all seem to scale a certain line of text rather than the text from my combined divs.
Is there a way I can do this within JavaScript?


If you see what is being asked for in This Question, this is
exactly what I want. The difference in that Q is that he uses some
text within 1 div rather than multiple to fit his container.


Here is my HTML:

<div id="binaryMatrix" style="width: 100%; height: 100%;">
<div>0</div>
<div>1</div>
<div>0</div>
<div>1</div>
<div>0</div>
<div>1</div>
<div>0</div>
<div>1</div>
...up to 100
</div>


Here is my CSS:

#binaryMatrix div {
float: left;
}


See Fiddle: Fiddle

This project is also on GitHub: GitHub - danjonescidtrix/binary-matrix




Any help or advice here is appreciated, thank you in advance

Answer

Right. Third attempt (and I really do have it cracked this time).

The number of digits is static. Let's call it 100 digits.

Digits are taller than they are wide, so we need a grid of tall, narrow divs. 10x10 is no good. Let's set up a 20x5 grid instead.

Now all we need to do is work out:

  1. how large the digit font-size would be based only on the width of the viewport; and
  2. how large the digit font-size would be based only on the height of the viewport;

Whichever is the smaller can be the font-size applied to the digits.

var binaryMatrix = document.getElementById('binaryMatrix');
var binaryMatrixDivs = binaryMatrix.getElementsByTagName('div');

function applyNewFontSize() {

    var newVerticalFontSize = (window.innerHeight / 5.5);
    var newHorizontalFontSize = (window.innerWidth / 20.5);
    var newFontSize = (newVerticalFontSize > newHorizontalFontSize ? newHorizontalFontSize : newVerticalFontSize);

    for (var i = 0; i < binaryMatrixDivs.length; i++) {
    binaryMatrixDivs[i].style.fontSize = newFontSize + 'px';
    binaryMatrixDivs[i].style.lineHeight = newFontSize + 'px';
    }

}

window.addEventListener('resize',applyNewFontSize,false);
window.addEventListener('load',applyNewFontSize,false);
body {
margin: 0;
padding: 0;
}

#binaryMatrix {
width: 100vw;
height: 100vh;
}

#binaryMatrix div {
display: inline-block;
float: left;
width: 5vw;
height: 20vh;
text-align: center;
color: rgb(163,163,163);
}
<div id="binaryMatrix">
<div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div>
</div>

Comments