Intent to Prototype: CSS font-size-adjust: two-value syntax

[ChangSeok Oh]

Contact emails
changs...@bytedance.com, shiva...@gmail.com 

Explainer
None 

Specification
https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop 

Summary
The font-size-adjust CSS property adjusts the font size based on the height of lowercase letters rather than that of uppercase letters for consistency in readability. However, there have been voices that the adjusting metric is obscure and impractical. This new two-value syntax reflects such voices by allowing developers to specify a font metric for adjusting the size. This feature is standardized in CSS Font Module Level 5.

Blink component
Blink>CSS 

Motivation
Since the font-size-adjust CSS property has been introduced in CSS 2.1, there have been continuous developer needs for font-size-adjust. Although the property has gained 3% around in popularity worldwide, according to caniuse.com, Blink still lacks support for this feature. I intend to push this feature forward.  

Initial public proposal

TAG review
Not applicable

TAG review status
Not applicable 

Risks

   Interoperability and Compatibility

   Gecko: Publicly support 

   WebKit: Positive and in development
       https://bugs.webkit.org/show_bug.cgi?id=254191
       https://github.com/WebKit/WebKit/pull/11744 (I am the author)

   Web developers: No signals 

   Other signals:

   WebView application risks
   No known risks

Debuggability
Is this feature fully tested by web-platform-tests?
Yes
* external/wpt/css/css-fonts/animations/font-size-adjust-interpolation.html
* external/wpt/css/css-fonts/font-size-adjust-009.html
* external/wpt/css/css-fonts/font-size-adjust-010.html
* external/wpt/css/css-fonts/font-size-adjust-011.html
* external/wpt/css/css-fonts/parsing/font-size-adjust-computed.html
* external/wpt/css/css-fonts/parsing/font-size-adjust-valid.html

Flag name
A flag will be added.
A full code draft is here at https://chromium-review.googlesource.com/c/chromium/src/+/4335690

Requires code in //chrome?
False 

Tracking bug
https://bugs.chromium.org/p/chromium/issues/detail?id=1219875 

Estimated milestones
To Be Decided

Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5170570175447040 

This intent message was generated by Chrome Platform Status.

Best,
--
ChangSeok

[Yoav Weiss]

On Tue, Mar 28, 2023 at 12:33 AM ChangSeok Oh <shiva...@gmail.com> wrote:

Contact emails
changs...@bytedance.com, shiva...@gmail.com 

Explainer
None 

Specification
https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop 

Summary
The font-size-adjust CSS property adjusts the font size based on the height of lowercase letters rather than that of uppercase letters for consistency in readability. However, there have been voices that the adjusting metric is obscure and impractical. This new two-value syntax reflects such voices by allowing developers to specify a font metric for adjusting the size. This feature is standardized in CSS Font Module Level 5.

Blink component
Blink>CSS 

Motivation
Since the font-size-adjust CSS property has been introduced in CSS 2.1, there have been continuous developer needs for font-size-adjust. Although the property has gained 3% around in popularity worldwide, according to caniuse.com, Blink still lacks support for this feature. I intend to push this feature forward.  

Initial public proposal

TAG review
Not applicable

TAG review status
Not applicable 

Risks

   Interoperability and Compatibility

   Gecko: Publicly support 

Any links?

 

   WebKit: Positive and in development
       https://bugs.webkit.org/show_bug.cgi?id=254191
       https://github.com/WebKit/WebKit/pull/11744 (I am the author)

We typically require an official signal based on a WebKit position, but I think the r+ on the PR can be considered a signal for it landing soon, without a flag.

   Web developers: No signals 

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/73e7fe83-08af-4530-823e-62db7c3e2c32n%40chromium.org.

[David Baron]

On Mon, Mar 27, 2023 at 6:33 PM ChangSeok Oh <shiva...@gmail.com> wrote:

   Interoperability and Compatibility

   Gecko: Publicly support 

   WebKit: Positive and in development
       https://bugs.webkit.org/show_bug.cgi?id=254191
       https://github.com/WebKit/WebKit/pull/11744 (I am the author)

   Web developers: No signals 

   Other signals:

   WebView application risks
   No known risks

It might be useful to separately describe (for some or all of these sources) support for the 1-value syntax (CSS 2.1, css-fonts-3, css-fonts-4) and support for the 2-value syntax (css-fonts-5).  For example, according to MDN, Gecko has been shipping the 1-value syntax since Firefox 3 (June 2008) and the 2-value syntax since Firefox 92 (September 2021).

I'll also add that I'm a big fan of this feature and am happy to see it implemented.

-David

[ChangSeok Oh]

> On Mar 28, 2023, at 6:22 AM, Yoav Weiss <yoav...@chromium.org> wrote:
>
>
>
> On Tue, Mar 28, 2023 at 12:33 AM ChangSeok Oh <shiva...@gmail.com> wrote:
> Contact emails
> changs...@bytedance.com, shiva...@gmail.com
>
> Explainer
> None
>
> Specification
> https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop
>
> Summary
> The font-size-adjust CSS property adjusts the font size based on the height of lowercase letters rather than that of uppercase letters for consistency in readability. However, there have been voices that the adjusting metric is obscure and impractical. This new two-value syntax reflects such voices by allowing developers to specify a font metric for adjusting the size. This feature is standardized in CSS Font Module Level 5.
>
> Blink component
> Blink>CSS
>
> Motivation
> Since the font-size-adjust CSS property has been introduced in CSS 2.1, there have been continuous developer needs for font-size-adjust. Although the property has gained 3% around in popularity worldwide, according to caniuse.com, Blink still lacks support for this feature. I intend to push this feature forward.
>
> Initial public proposal
>
> TAG review
> Not applicable
>
> TAG review status
> Not applicable
>
> Risks
>
> Interoperability and Compatibility
>
> Gecko: Publicly support
>
> Any links?

Sure.
https://bugzilla.mozilla.org/show_bug.cgi?id=1711479
https://bugzilla.mozilla.org/show_bug.cgi?id=1708240
https://caniuse.com/mdn-css_properties_font-size-adjust_two-values

[ChangSeok Oh]

> On Mar 28, 2023, at 6:29 AM, David Baron <dba...@chromium.org> wrote:
>
> On Mon, Mar 27, 2023 at 6:33 PM ChangSeok Oh <shiva...@gmail.com> wrote:
> Interoperability and Compatibility
>
> Gecko: Publicly support
>
> WebKit: Positive and in development
> https://bugs.webkit.org/show_bug.cgi?id=254191
> https://github.com/WebKit/WebKit/pull/11744 (I am the author)
>
> Web developers: No signals
>
> Other signals:
>
> WebView application risks
> No known risks
>
> It might be useful to separately describe (for some or all of these sources) support for the 1-value syntax (CSS 2.1, css-fonts-3, css-fonts-4) and support for the 2-value syntax (css-fonts-5). For example, according to MDN, Gecko has been shipping the 1-value syntax since Firefox 3 (June 2008) and the 2-value syntax since Firefox 92 (September 2021).

We already have a separate feature flag and ChromeStatus page [1]. Unfortunately, it has been pending for years. I plan to ship it with this two-value syntax once this new feature is done. But I don’t have a strong opinion on the shipping plan. We can consider shipping separately.

[1] https://chromestatus.com/feature/5720910061371392

>
> I'll also add that I'm a big fan of this feature and am happy to see it implemented.

Thanks!

>
> -David

[Dominik Röttsches]

Hi ChangSeok,

Thanks for working on this. During the development and shipping of the @font-face size-adjust descriptor we found that at least in our code the font-size-adjust implementation was not compatible with this change. As size-adjust was a higher priority then, the font-size-adjust RuntimeEnabledFeature was downgraded from experimental to test, discussion during review in this change.

We have a related TODO in the code that when the size-adjust descriptor is present in a @font-face, the font-size-adjust property is ignored. Could you describe how you plan to address this? Could you also investigate how FireFox handles cases where the size-adjust descriptor and font-size-adjust interact. Are there any problems arising from the use of both at the same time?

Dominik

On Tue, Mar 28, 2023 at 9:35 PM ChangSeok Oh <shiva...@gmail.com> wrote:

> On Mar 28, 2023, at 6:29 AM, David Baron <dba...@chromium.org> wrote:
>

> On Mon, Mar 27, 2023 at 6:33 PM ChangSeok Oh <shiva...@gmail.com> wrote:
>    Interoperability and Compatibility
>
>    Gecko: Publicly support
>
>    WebKit: Positive and in development
>        https://bugs.webkit.org/show_bug.cgi?id=254191
>        https://github.com/WebKit/WebKit/pull/11744 (I am the author)
>
>    Web developers: No signals
>
>    Other signals:
>
>    WebView application risks
>    No known risks
>
> It might be useful to separately describe (for some or all of these sources) support for the 1-value syntax (CSS 2.1, css-fonts-3, css-fonts-4) and support for the 2-value syntax (css-fonts-5).  For example, according to MDN, Gecko has been shipping the 1-value syntax since Firefox 3 (June 2008) and the 2-value syntax since Firefox 92 (September 2021).

We already have a separate feature flag and ChromeStatus page [1]. Unfortunately, it has been pending for years. I plan to ship it with this two-value syntax once this new feature is done. But I don’t have a strong opinion on the shipping plan. We can consider shipping separately.

[1] https://chromestatus.com/feature/5720910061371392

>

> I'll also add that I'm a big fan of this feature and am happy to see it implemented.

Thanks!

>
> -David

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/0E07FF35-2FC4-43BA-A55E-F269997FDD0D%40gmail.com.

[ChangSeok Oh]

Hi Dominik,

Thanks for informing me about the history and conflict between @font-face: size-adjust and font-size-adjust.

Per your comment, I investigated the latest spec document and how Gecko handles the conflict.
In a nutshell, the draft spec prioritizes the font-size-adjust over the size-adjust (i.e., overriding) [1], and Gecko follows the rule.

The following is the related part of the document.

> The font-size-adjust property is applied after the size-adjust descriptor.
> NOTE: The consequence of applying font-size-adjust after size-adjust is that size-adjust appears to have no effect.

In addition, I wrote a simple test on jsfiddle.net [2]. Please feel free to test it with your Firefox.

I plan to implement the same behavior of Firefox, following the spec document.

Best,

[1] https://w3c.github.io/csswg-drafts/css-fonts-5/#valdef-ascent-overridedescriptor-percentage
[2] https://jsfiddle.net/wfsdagc7/

--
ChangSeok

[Dominik Röttsches]

Hi ChangSeok,

Thanks for confirming the expected behavior and testing in FF.

I plan to implement the same behavior of Firefox, following the spec document.

Can you share a few more details how you plan to achieve that? Have you been able to verify that you can achieve this behavior in a local development branch? If so, what changes are needed to the interaction between the two features in Blink?

Thanks,

Dominik

[ChangSeok Oh]

Hi Dominik,

I recognized the conflict between the two adjusting CSS properties in Blink from this mail thread. :P
I don’t have a concrete plan to address it yet. If I, however, drew a rough solution, it would look like the following:
1. Handle the two CSS properties separately with two distinct placeholders in FontDescription.
2. When parsing, we assign values corresponding to their placeholders.
3. When resolving styles (e.g., font builder, style builder), FontDescription::SizeAdjust() returns a font-size-adjust value first if it is available; otherwise returns the font-face: size-adjust.

This rough sketch can change later. Please let me know if you have a different approach in mind.

Thanks,
--
ChangSeok