Match width textual content in 1 line of CSS

From Adam, prototyped in Chrome Canary 145:

h1 {
  text-grow: per-line scale;
}

Danny mentioned this some time again when taking a look at totally different approaches for becoming textual content to a container, spelling out the syntax (text-shrink included) that you’ll find in Roma Komarov’s explainer:

text-grow:  ? ?;
text-shrink:  ? ?;

• • per-line: For text-grow, traces of textual content shorter than the container will develop to suit it. For text-shrink, traces of textual content longer than the container will shrink to suit it.
  • constant: For text-grow, the shortest line will develop to suit the container whereas all different traces develop by the identical scaling issue. For text-shrink, the longest line will shrink to suit the container whereas all different traces shrink by the identical scaling issue.
•  (non-obligatory)
  • scale: Scale the glyphs as an alternative of adjusting the font-size.
  • scale-inline: Scale the glyphs as an alternative of adjusting the font-size, however solely horizontally.
  • font-size: Develop or shrink the font measurement accordingly.
  • letter-spacing: The letter spacing will develop/shrink as an alternative of the font-size.
•  (non-obligatory): The utmost font measurement for text-grow or minimal font measurement for text-shrink.

Discover the totally different match strategies — they both scale the glyphs or alter the textual content’s precise font-size. So, naturally, the explainer notes that accessibility issues are nonetheless being labored out. Like:

If an end-user tries to enlarge font measurement, UAs mustn’t match enlarged traces to the container width. Is minimum-font setting sufficient?

Talking of open questions, Una Kravets highlights a couple of on Bluesky:

• Ought to the final line of a paragraph be scaled?
• Is the present line-height habits as anticipated?
• Ought to it scale non-text elements comparable to inline photographs collectively?

You possibly can contribute to the dialogue within the GitHub challenge, after all.

Donnie D’Amato wonders if, maybe, this concept is best suited to print kinds quite than screens. That’s a wonderful use case I hadn’t considered.

We certain have come a great distance from the times of magic numbers and FitText.js!

Direct Hyperlink →