Playing with text-fit
Chromium 150 shipped support for the text-fit property about two weeks ago. There's not a lot of information in the “New in Chrome 150” post, and I can't find anything about it on MDN yet, so let's figure out what we can do with this, by using the Editor's Draft.
First, the most basic example:
<style>
h1 { text-fit: grow; }
</style>
<h1>This might be very nice!</h1>text-fit: grow makes it grow, text-fit: shrink makes it shrink, both from the current font-size.
<style>
p { font-size: 2rem; }
</style>
<p>A normal text without any text fitting going on.</p>
<p style="text-fit: grow;">So this will fit the whole line</p>
<p style="text-fit: shrink;">And what will happen here? Will it shrink to a single line if it's too long? Probably not.</p>
<p style="text-fit: shrink; white-space: nowrap;">What will happen in this case? Will it shrink down, like I assume? To fit on this line? Probably.</p>Good idea to first test for @supports (text-fit: shrink) before applying white-space: nowrap to a piece of text.
By default, all lines are scaled with a consistent scaling factor. But we can overwrite this, using per-line, which makes each line find its own scaling factor (and perfect size), and per-line-all, which also includes the last line (and can give weird results):
<style>
p { font-size: 2.5rem; max-width: 13rem; outline: 1px solid; }
</style>
<p style="text-fit: grow;">This could be a large headline, with text scaling up</p>
<p style="text-fit: grow per-line;">This could be a large headline, with text scaling up</p>
<p style="text-fit: grow per-line-all;">This could be a large headline, with text scaling up</p>We can also add a percentage into the mix, which takes care of a minimum or maximum scaling factor (of the original font-size). When shrinking down text, this can still keep our texts accessible:
<style>
p { font-size: 2.5rem; max-width: 13rem; outline: 1px solid; }
</style>
<p>This could be a large headline, with text scaling up</p>
<p style="text-fit: grow per-line;">This could be a large headline, with text scaling up</p>
<p style="text-fit: grow per-line 120%;">This could be a large headline, with text scaling up</p>
<p>What happens with supercalifragilisticexpialidociously long words here?</p>
<p style="text-fit: shrink;">What happens with supercalifragilisticexpialidociously long words here?</p>
<p style="text-fit: shrink 60%;">What happens with supercalifragilisticexpialidociously long words here?</p>
<p style="text-fit: shrink per-line 60%;">What happens with supercalifragilisticexpialidociously long words here?</p>The spec says:
This property does not affect the font-size computed value, and thus does not affect font-size-relative <length> values of other properties. For example, "line-height: 1.5em" and "letter-spacing: 0.1em" are not affected by this scaling.
What that means:
<style>
h1 { max-width: 15rem; outline: 1px solid; }
</style>
<h1 style="line-height: 1.6lh;">This is some text scaling up, to test out various line heights</h1>
<h1 style="line-height: 1.6lh; text-fit: grow per-line;">This is some text scaling up, to test out various line heights</h1>
<h1 style="text-fit: grow per-line;">This is some text scaling up, to test out various line heights</h1>
<h1 id="h" style="text-fit: grow per-line-all;">And let's test if we can read out the scaling font-size <span id="s">somehow</span></h1>
<p>Whole heading font size: <script>document.write(getComputedStyle(h).fontSize)</script>, “somehow” font size: <script>document.write(getComputedStyle(s).fontSize)</script></p>Interesting stuff!
Some further reading: