Intent to Ship: CSS `text-fit` property

37 views

Skip to first unread message

TAMURA, Kent

unread,

1:27 AM (3 hours ago) 1:27 AM

to blink-dev

Contact emails

tk...@chromium.org, ikilp...@chromium.org, ko...@chromium.org

Explainer

https://github.com/explainers-by-googlers/css-fit-text/blob/main/README.md

Specification

https://drafts.csswg.org/css-text-4/#text-fit-property

Summary

Scales the font size of text nodes to perfectly fit the width of its containing box. This property allows developers to ensure headlines or dynamic content fill the available horizontal space without manual font-size calculations or complex JavaScript workarounds. It provides a robust, CSS-native solution for responsive typography that maintains visual alignment across different screen sizes and varying text lengths.

Blink component

Blink>Layout>Inline

Web Feature ID

Missing feature
https://github.com/web-platform-dx/web-features/issues/3986

Motivation

In text layout, web authors want to align the lines with both ends of the container, but web authors want to achieve this by adjusting the font size instead of justification. Without this feature, the only option is to manually adjust the font size through trial and error or using JavaScript. Web authors want to fit the text into a container of a specific size without it overflowing. For example, if the container width is narrow and a long word inevitably overflows the container, web authors want to reduce the font size to make it fit within the container. Web authors want to avoid text overflowing the container due to unexpectedly long words used in text translations or when end-users provide arbitrary text.

Initial public proposal

No information provided

Search tags

css, css-text, text-fit

TAG review

https://github.com/w3ctag/design-reviews/issues/1208

TAG review status

Issues open.
No feedback for a month.

Goals for experimentation

None

Risks

Interoperability and Compatibility

There is no compatibility risk because this is a new CSS property that affects nothing by default.

Regarding accessibility, there is one open issue (https://github.com/w3c/csswg-drafts/issues/12886). While we may slightly adjust the behavior once a resolution is reached, the risk of breaking existing websites would be very low. Therefore, we believe it is safe to ship the feature in its current state.

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1377)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/637)

Web developers: Strongly positive (https://github.com/w3c/csswg-drafts/issues/2528) The CSSWG issue has 110+ votes.

Other signals:

WebView application risks

None.

Debuggability

DevTools' existing capability for CSS is enough.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/css/css-text/text-fit

Flag name on about://flags

No information provided

Finch feature name