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 totally different approaches for becoming textual content to a container, spelling out the syntax (text-shrink included) that yow will discover in Roma Komarov’s explainer:

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

• • per-line: For text-grow, strains of textual content shorter than the container will develop to suit it. For text-shrink, strains 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 strains develop by the identical scaling issue. For text-shrink, the longest line will shrink to suit the container whereas all different strains shrink by the identical scaling issue.
•  (non-compulsory)
  • 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 dimension accordingly.
  • letter-spacing: The letter spacing will develop/shrink as an alternative of the font-size.
•  (non-compulsory): The utmost font dimension for text-grow or minimal font dimension for text-shrink.

Discover the totally different match strategies — they both scale the glyphs or regulate 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 dimension, UAs shouldn’t match enlarged strains to the container width. Is minimum-font setting sufficient?

Talking of open questions, Una Kravets highlights a number 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 components resembling inline photos collectively?

You may contribute to the dialogue within the GitHub challenge, in fact.

Donnie D’Amato wonders if, maybe, this concept is healthier fitted to print types somewhat than screens. That’s a superb use case I hadn’t considered.

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

Direct Hyperlink →