Resize the font text (inside multiple divs) inside the container so that it fits perfectly

Question

So, I have a div matrix in the container on my page, each div displays either "1" or "0".

If I set my container to 100% width and height to fit the bottom of my page, I want to be able to scale all 1 and 0 inside divs containers (the number 0 and 1 will be a static number, letting go 100 for this question ) so that always match the container completely independently what size the browser changes, so it matches the width and height of the container perfectly, without any backspace or elements that leave the page or launch the scroll bar.

The goal is to precisely change the font size in the container regardless of screen size ( both height and width ).

I saw several similar questions about stack overflows, for example: JavaScript Scale Text to Fit in Fixed Div , but they all seem to scale a specific line of text and not text from my combined sections. Is there a way to do this in JavaScript?

If you see what is being asked in this question , this is exactly what I want. The difference in this Q is that it uses some text within 1 div and not some to fit its 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 is appreciated here, thanks in advance

Answer 1

Right The third attempt (and I really will have her crack this time).

The number of digits is static. Let me call it 100 digits.

The numbers are higher than they are wide, so we need a grid with tall, narrow divs . 10x10 is not good. Instead, adjust the 20x5 grid.

Now all we need to do is work:

• how big the font-size will be based only on the width of the viewport; and
• how big the font-size digit will be based only on the height of the viewing area;

Whatever the smaller one, there may be a font-size applied to numbers.

 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> 

Answer 2

I decided to go for it again - not least because it is an exciting problem.

I think I hacked it.

 var binaryMatrix = document.getElementById('binaryMatrix'); var binaryMatrixDivs = binaryMatrix.getElementsByTagName('div'); var largestNumberOfRows = 12; for (var i = largestNumberOfRows; i > 0; i--) { if (binaryMatrixDivs.length % i === 0) { var numberOfRows = i; break; } } function changeDivWidth() { for (var i = 0; i < binaryMatrixDivs.length; i++) { var divWidth = (100 / (binaryMatrixDivs.length / numberOfRows)); var divHeight = (100 / numberOfRows); binaryMatrixDivs[i].style.width = divWidth + 'vw'; binaryMatrixDivs[i].style.height = divHeight + 'vh'; binaryMatrixDivs[i].style.lineHeight = divHeight + 'vh'; } } window.addEventListener('load',changeDivWidth,false); 

 body { margin: 0; padding: 0; } #binaryMatrix { width: 100vw; height: 100vh; } #binaryMatrix div { display: inline-block; float: left; width: 0; height: 0; line-height: 20vh; text-align: center; } #binaryMatrix div:nth-of-type(odd) { background-color: rgb(191,191,191); } #binaryMatrix div:nth-of-type(even) { background-color: rgb(127,127,127); } 

 <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> 

---

Notes:

1) You can determine the number of rows by changing the value of numberOfRows . If the numberOfRows parameter numberOfRows set to 5 , then there will always be 5 lines - no matter how short or tall or wide or narrow the window is.

2) Obviously, you need numberOfRows be a factor in the number of your numberOfRows . So 5 lines are good if you have 100 div or 90 div, but if you have 96 sections, you need numberOfRows be 4 or 6 or 12 or some other 96 ratio.

---

Improvement:

The two notes above were necessary because in the first version of the script you need to manually declare the number of lines. In the second version of the script (see above), you can still manually declare the number of lines if you want (but a little less effort), you can simply manually declare the largest number of lines that you want to see (for example, no more than 14 lines), and the script will count from 14 until it finds a coefficient, and the first factor it reaches is numberOfRows .

This will allow you to change the number of partitions (manually or dynamically) without having to reset numberOfRows each time.

Answer 3

You can scale each item and then put its left value according to the new scale.

https://jsfiddle.net/f6Lfe8hv/2/

 var total_width = 0; var total_left = 0; var $divs = $('#binaryMatrix>div'); var $binaryMatrix = $('#binaryMatrix'); var scale = 1; $divs.each(function() { total_width += $(this).width(); }); function full_width() { scale = $binaryMatrix.width() / total_width; $divs.css('transform', 'scale(' + scale + ')'); $divs.each(function() { $(this).css('left', total_left); total_left += $(this).width() * 1; }); total_left = 0; } full_width(); $(window).resize(function() { full_width(); }) 

 #binaryMatrix div { position: absolute; transform-origin: left; } #binaryMatrix { top:0; left:0; background: pink; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="binaryMatrix" style="width: 100%; height: 100%;"> <div>some_test_value</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>0</div> <div>0</div> <div>1</div> <div>0</div> <div>1</div> <div>another_test_value</div> </div>