Intent to Prototype: CSS fit-width text

[TAMURA, Kent]

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

None

Summary

This new CSS capability empowers web developers to precisely fit lines of text to the exact width of their containing element. Unlike traditional justification methods that adjust spacing, this feature dynamically scales the font-size itself, ensuring text lines seamlessly align with both the left and right edges of the container. Web developers often need to ensure text content, especially headings or short phrases, fully utilizes the available container width without causing overflow or appearing too narrow. This feature addresses this by intelligently adjusting the font-size of the text. It's particularly useful in responsive designs or when dealing with dynamic content, such as text from translations that might be unexpectedly long, or user-generated input where word length is unpredictable. If a word or line of text would normally overflow its container, these CSS properties will reduce the font-size to make it fit. Conversely, if the text is narrower than the container, the font-size can be increased to fill the space, providing a visually balanced and "justified" appearance through size scaling rather than space distribution.

Blink component

Blink>Layout>Inline

Motivation

None

Initial public proposal

None

TAG review

None;  Will request later.

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal; Will file a standard-position issue.

WebKit: No signal;  Will file a standard-position issue.

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

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

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

It should be possible.

Flag name on about://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5104141688635392?gate=5084590997504000

This intent message was generated by Chrome Platform Status.

--

TAMURA Kent
Software Engineer, Google

[Alan Stearns]

I’m excited to see this prototype, but please take a look at the accessibility concerns raised in the issue you link to. I’d like to see the explainer work through these concerns and propose ways to address them.

[Roman Komarov]

To backlink it here, I wrote my feedback about the explainer in a blog post: “Fit-to-Width Discussions & Feedback” — it also covers the potential accessibility issues that were brought up in the CSSWG issue, and proposes a potential way to mitigate them.

[TAMURA, Kent]

Thank you for the comment.

We acknowledge that this initial explainer might not describe the behavior perfectly. For any issues, please let's discuss them at https://github.com/w3c/csswg-drafts/issues/2528 .

[TAMURA, Kent]

On Fri, May 2, 2025 at 2:31 AM Roman Komarov <kiz...@gmail.com> wrote:

To backlink it here, I wrote my feedback about the explainer in a blog post: “Fit-to-Width Discussions & Feedback” — it also covers the potential accessibility issues that were brought up in the CSSWG issue, and proposes a potential way to mitigate them.

Let's discuss any issues at https://github.com/w3c/csswg-drafts/issues/2528 .  It's hard to react to the blog post.