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: Fortext-grow, strains of textual content shorter than the container will develop to suit it. Fortext-shrink, strains of textual content longer than the container will shrink to suit it.constant: Fortext-grow, the shortest line will develop to suit the container whereas all different strains develop by the identical scaling issue. Fortext-shrink, the longest line will shrink to suit the container whereas all different strains shrink by the identical scaling issue.
scale: Scale the glyphs as an alternative of adjusting thefont-size.scale-inline: Scale the glyphs as an alternative of adjusting thefont-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 thefont-size.
text-growor minimal font dimension fortext-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!
