I’m currently on a project where I have two lines of text. The design calls for them to be flush on left and right, even if the font-sizes end up being different. It would be nice to have the ability to let the browser calculate this. The thought I had was “text-align: expand”
What this would do is, after the lines are set the font size would be changed up or down to get the line to fit the width of the containing block. Used without white-space: nowrap would lead to some comically hard text to read, but in conjunction with it you could set up titles with varying font sizes with ease. An example of what I’m babbling about is on this page:
In the second section, “Truck Bucks” “Retail Locations”, those two lines are flush left and right. I’m achieving this by hand now, setting the font-sizes explicitly for each line. Each time the copy changes, I have to recalculate the appropriate font sizes. It’s a bit of a pain, and I’d love a property to take care of it for me.
So would this be interesting to have, or is it way too specific a use case and therefore a royally bad idea? I mean, it comes up infrequently with page titles - but usually doesn’t show up elsewhere.
I just don’t see how many people would be able to take advantage of it. It could be useful for those people who need it, but I highly doubt this would get used enough to actually warrent them looking at it.
Even if they would put it on their list of stuff to do, I would MUCH rather them look at other stuff and put this off for a rainy day. This is low on my list of priorities even if they would consider this.
Can you think of any webpages that would use this? That have sections that would benefit from this? I’m having a hard time figuring out who would actually use this on their page, no offense .
Not to say it’s not an interesting idea though. Just my take; others might feel differently.
No. Flexboxes adjust positions, they don’t affect font-sizes. Justify inserts spaces between words (and soon letters) to achieve this effect, which is different from making the font larger or smaller to fit into the width.
And yes, this is a styling corner case, but so in rounded corners and roughly half of what CSS does.
That’s a common effect in print, but a tall order in web.
For starter there is NO PROPERTY that relates the text size to it’s container size automatically.
However, you can control container size with ems. That begin said, if you actually can give a the container a definite width, you can do a little math and copy fit each line by wrapping each line in SPANs.
For starter there is NO PROPERTY that relates the text size to it’s container size automatically.
You’d think there could be. We have units to set font size relative to the viewport. And container sizes can be set relative to the text via em’s and ex’s. The reverse would be useful, but has the problem of accidental circular reference - how do you resolve a container who’s width is in em’s but a font-size set proportional to the container? One has to be set to something constant or at least outside the circle.
This sounds quite familiar, solving a similar problem but here, caused by loading webfonts (where the font-size wanted to be adjusted based on which font loaded, so text remained inside containers instead of leaking out).
Something like FitText (more a solution to responsive designs) or BigText.
Since letting the browser calculate these things would be much nicer, I do think it would be cool to have this natvely in the browser. Not only the OS but the browser affects how exactly a font is rendered and how many full pixels any part actually take up.
.