1

I have a grid that filled screen and each it's cell contain some text as labels. What should I write in CSS to resize this text to fill container without overflow? Keep in mind it may be restricted by height or by width.

Now it is just

label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 150pt; /*must be adaptive*/
}

Jsfiddles: grid 3x3, grid 1x10

Or if there is no ideas...
At the moment I have two formulas as alternate variant that can calculate desired font-size relative to height (first) and width (second). I would use min() of them if it was supported. So if there is no elegant solution on CSS, the other question: will it be effectively to define CSS variable and set to it min of formulas with js in window.onresize?

Powercoder
  • 695
  • 1
  • 5
  • 25

2 Answers2

1

I'm pretty sure there's no "pure css" way to accomplish this.

I wrote a js script that checks the container for overflow/scroll-height. Either you start at something small, say 1px font size, and continually increase it until the container has overflow, then shrink it back down 1 notch.

Alternatively, have a really large font size, say 200px (or whatever your MAX is). And do the reverse until there's no longer overflow/scrolling on the container.

You could optimize this by jumping "half way" each time, instead of 1px at a time. So...

200px ? scrollHeight > height || scrollWidth > width : true
100px ? scrollHeight > height || scrollWidth > width : false
150px ? scrollHeight > height || scrollWidth > width : true
125px ? scrollHeight > height || scrollWidth > width : true
... etc etc.

A couple other points:

  • Check scrollHeight AND scrollWidth (a long word that doesn't wrap)
  • hide the container while it's calculating to prevent flicker
  • test, test test, lots of potential issues with this, but I've found it works quite well
  • There's probably a library, just use that if you're lazy ;)
Chad H
  • 584
  • 3
  • 11
  • I did not quite understood some details. Should this be called in `onresize`? If so, I already have solution as I described, but I doubt the very concept of calculation in `window.onresize` – Powercoder Apr 11 '18 at 19:10
  • window.onresize is good for demo, but rarely used in reality. It's more for developers to drag your site around and see if it's responsive or not., Definitely when the page is loaded you will need to calculate and onresize is easy to hook up to the same function. I would personally use whatever the MAX font-size can be instead of the MIN in your css file, but it doesn't really matter. – Chad H Apr 11 '18 at 19:14
  • Also, if the "shape" of your page changes (without resizing the browser itself) then you will need to re-calculate font sizes. For example, some ajax request adds some more divs to the page that cause your original "perfectly fitted" text to get squished a bit. Or maybe the text dynamically changes or something. Recalculate every time through various event hooks or whatever based on your page setup. – Chad H Apr 11 '18 at 19:20
0

Try this. It would scale the fonts to each container

            label {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 150pt;
            font-size: 9vw;
            }
Spammer McSpamface
  • 1
  • 2