"text-grow: <fit-target> <fit-method>? <length>?; text-shrink: <fit-target> <fit-method>? <length>?; per-line: For text-grow, lines of text shorter than the container will grow to fit it. For text-shrink, lines of text longer than the container will shrink to fit it. consistent: For text-grow, the shortest line will grow to fit the container while all other lines grow by the same scaling factor. For text-shrink, the longest line will shrink to fit the container while all other lines shrink by the same scaling factor."
"Notice the different fit methods - they either scale the glyphs or adjust the text's actual font-size. So, naturally, the explainer notes that accessibility concerns are still being worked out. Like: If an end-user tries to enlarge font size, UAs should not fit enlarged lines to the container width. Is minimum-font setting enough? Speaking of open questions, Una Kravets highlights a few on Bluesky: Should the last line of a paragraph be scaled? Is the current line-height behavior as expected?"
Two new CSS properties, text-grow and text-shrink, enable fitting text to a container using the syntax: text-grow: <fit-target> <fit-method>? <length>?; text-shrink: <fit-target> <fit-method>? <length>?. Fit targets include per-line, which grows or shrinks individual shorter or longer lines to fit, and consistent, which scales all lines by the same factor based on the shortest or longest line. Fit methods include scale, scale-inline, font-size, and letter-spacing. An optional length sets a maximum font size for growing or a minimum for shrinking. Accessibility interactions, user font-enlargement handling, last-line scaling, line-height behavior, and scaling inline non-text content remain open questions, and feedback is being tracked in a GitHub issue.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]