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

Hello everyone,
I have already sent a related proposal to the mailing list, and I was directed to this issue.
This is a very interesting discussion.

While accessibility concerns have been raised, as you all mentioned, I also feel that this is a much-needed CSS property.

Let me share here what I posted on the mailing list.
https://lists.w3.org/Archives/Public/www-style/2025Mar/0000.html

## Message
 
<details>
<summary>[css-fonts-4] Extension of font-stretch property</summary>

> I'd like to expand the values of `font-stretch` property.
> 
> |||
> |---|---|
> |Name:|            `font-stretch`
> |New Values:|      `fit-content \| fit-content(<length-percentage>) \| fit-container`|
> |Computed Value|  specified keyword|
> 
> ### `fit-content`
>   The text is rendered using a normal font face, but the font will be
> condensed to fit within the container's width.
>   If the font family provides additional condensed or expanded faces, the
> closest available face will be used. Otherwise, the text will be forcibly
> transformed, similar to CSS Transforms.
> 
> ### `fit-content(<length-percentage>)`
>   The font will be condensed to fit within the container’s width, but the
> level of condensation will not exceed the specified `<length-percentage>`.
> 
>   Negative `<length-percentage>` values are invalid.
> 
> ### `fit-container`
>   The font will always scale in the inline direction to fully match the
> container’s width.
> 
>   If the font family provides additional condensed or expanded faces, the
> closest available face will be used. Otherwise, the text will be forcibly
> transformed, similar to CSS Transforms.
> 
> 
> Initially, I considered extending `text-overflow` and `text-align`, but
> after reviewing various use cases, I concluded that this behavior should be
> an extension of `font-stretch` instead.
> 
> Given the possibility that `font-stretch` may eventually be renamed to
> `font-width`, I am concerned that the behavior of the `fit-content`
> argument may differ from its usage in `width` and `grid`. However, I would
> like to share this proposal as one possible idea.
> 

</details>

## Additional Comments Following the Thread

I feel that this behavior would only work when the line-breaking is guaranteed to not occur. I agree with this opinion.

> Only possible when text-wrap-mode is nowrap

I think the idea of `fit-width(min, max)` is excellent.

However, as a premise, I am focusing on the inline size of the text node container element, rather than the font or individual characters.

My idea involves using `font-stretch`, and as seen in the image on the left-center, the characters do not just resize but also transform.

<details>
<summary>Example Image</summary>

- 和食
- 炭火焼・旬の海鮮・居酒屋
- カレー専門店

![Example Image](https://pbs.twimg.com/media/Gjll0PZaIAItajr?format=jpg&name=large)
</details>

What reminded me of `fit-width` is the `fit-content` mentioned in the email. When using `fit-content(50%)`, it will render normally unless compression is required, in which case the text node will be compressed up to 50% of its original width (auto * 0.5).

Any overflow would likely pass through the parent box model. If you can focus on text size, perhaps the excess could be wrapped onto the next line.

If variable text size is needed, it would be the responsibility of `font-size`, and a special unit might be required. However, my idea was to transform the font itself while keeping the font size the same.

Apologies if this is off-topic for the thread.
Best regards,
UGA


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


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

Received on Wednesday, 5 March 2025 08:05:53 UTC