A new approach for fitting text, prototyped by Adam in Chrome Canary 145, has been introduced:
h1 {
text-grow: per-line scale;
}This concept was previously discussed by Danny in the context of various text-fitting methods. The proposed syntax, including text-shrink, is detailed in Roma Komarov’s explainer:
text-grow: <fit-target> <fit-method>? <length>?;
text-shrink: <fit-target> <fit-method>? <length>?;- <fit-target>
- per-line: The per-line target allows shorter lines to expand with text-grow and longer lines to contract with text-shrink, adjusting each line individually to fit the container.
- consistent: The consistent target ensures that with text-grow, the shortest line expands to fit, and all other lines scale by the same factor. Conversely, with text-shrink, the longest line contracts to fit, and other lines shrink proportionally.
- <fit-method> (optional)
- scale: Scales the glyphs without altering the font-size.
- scale-inline: Scales glyphs horizontally, independent of font-size.
- font-size: Adjusts the font size to grow or shrink as needed.
- letter-spacing: Modifies letter spacing instead of font-size.
- <length> (optional): Specifies a maximum font size for text-grow or a minimum font size for text-shrink.
These various fit methods involve either scaling glyphs or modifying the actual font size. Consequently, the explainer highlights that accessibility considerations are still under development, such as:
A key question is whether user agents should prevent enlarged lines from fitting the container width if an end-user attempts to increase font size, and if a minimum font setting adequately addresses this.
Regarding unresolved issues, Una Kravets has raised several points:
- Should the last line of a paragraph be scaled?
- Is the current line-height behavior as expected?
- Should it scale non-text parts such as inline images together?
Contributions to the discussion are welcome in the GitHub issue.
Donnie D’Amato has suggested that this concept might be more appropriate for print stylesheets than for screen displays, presenting an interesting potential application.
This marks a significant advancement compared to earlier methods involving manual adjustments and JavaScript libraries like FitText.js.
