Re: [csswg-drafts] [css-fonts-4] Feature for making text always fit the width of its parent (#2528)

Hey, everyone. I just published an article about my new technique for achieving a fit-to-width text:

https://kizu.dev/fit-to-width/

Unlike my previous article, it does not use scroll-driven animations, and is purely based on container query length units and some calculations involving registered custom properties, so it now works in all recent versions of modern browsers.

The gist of how it works: by duplicating the text, we can measure the smallest version of the text (by measuring the space that remains if we subtract it from its container), and then use the ratio between it and its container to adjust the size to 100%.

While there are some potential limitations for this technique if the font will specify alternative display for the glyphs based on the size, the pros of this method should be enough to see if we could adapt it as a native CSS property.

The exact name and syntax are to be specified, but the gist of my proposal is following:

1. The new property will accept something like a `fill` keyword that makes the text grow infinitely if it is smaller than the container.
2. Optionally, it could accept the “max-font-size” value that could be used as the upper limit.
3. There is no need to specify the lower limit — the initial font size of the element could be used for it (but this is debatable).
4. If the `fill` keyword is present, the maximum intrinsic size of that element expands to fill all the available space.
5. If an upper limit is specified, the maximum intrinsic size is equal to the maximum intrinsic size of the text if it was rendered with that size.
6. The minimum intrinsic size of that text is equal to the minimum intrinsic size of the original font size.

There appears to be no circularity involved in the technique (as it works already everywhere), and given the general scope of it will be similar to `text-wrap: balance` (headers), it should not pose any performance challenges.

I'll be happy with any feedback, and I encourage browser vendors to prototype this natively: this feature is a very common need, and could be a quick win if we will be able to add it to the Web platform in a way similar to `text-wrap: balance|pretty`.

Without a native CSS property, the technique, while is possible, is very cumbersome and requires text duplication which, if implemented incorrectly, could lead to accessibility problems, so having a proper way of achieving this would be great.

-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2528#issuecomment-2239624304 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 19 July 2024 16:47:34 UTC