Intent to Ship: @font-face descriptors to override font metrics

170 views

Skip to first unread message

Xiaocheng Hu

unread,

Sep 16, 2020, 3:46:09 PM9/16/20

to blink-dev

(CSSWG just resolved to add it. There will be an actual spec soon)

Design docs

https://bit.ly/39qATQ4

Summary

Introduce new @font-face descriptors ascent-override, descent-override and line-gap-override to override metrics of the font. This allows web authors to (i) achieve interoperable text layout across browsers and platforms, and (ii) reduce layout shifting caused by web fonts.

Blink component

Blink>CSS

Search tags

css, font, fonts, css-fonts, font-face, font metrics, override

TAG review

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

TAG review status

Pending

Risks

Interoperability and Compatibility

This is a new feature that CSSWG just resolved to add. We do not expect interoperability/compatibility risks if other browsers also implement it.

Gecko: No signal

WebKit: No signal

Web developers: No signals

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

Yes

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

No. There are Blink web tests, which will be upstreamed.

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1098355

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5651198621253632

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/d/msg/blink-dev/h21QrfPrkl4/ff_dZxYcCQAJ

This intent message was generated by Chrome Platform Status.

Yoav Weiss

unread,

Sep 17, 2020, 2:40:31 PM9/17/20

to Xiaocheng Hu, blink-dev

On Wed, Sep 16, 2020 at 9:46 PM Xiaocheng Hu <xiaoc...@chromium.org> wrote:

Contact emails
xiaoc...@chromium.org

Explainer

https://www.youtube.com/watch?v=h_0T3SiISZg
https://jsfiddle.net/mro3c9tz/

It would be easier to review if you'd write out an explainer that outlines what use cases this feature tackles, how it does that, and what using the feature looks like.

Specification
https://github.com/w3c/csswg-drafts/issues/4792
(CSSWG just resolved to add it. There will be an actual spec soon)

Design docs

https://bit.ly/39qATQ4

Summary
Introduce new @font-face descriptors ascent-override, descent-override and line-gap-override to override metrics of the font. This allows web authors to (i) achieve interoperable text layout across browsers and platforms, and (ii) reduce layout shifting caused by web fonts.

Blink component
Blink>CSS

Search tags
css, font, fonts, css-fonts, font-face, font metrics, override

TAG review
https://github.com/w3ctag/design-reviews/issues/557

TAG review status
Pending

Risks

Interoperability and Compatibility
This is a new feature that CSSWG just resolved to add. We do not expect interoperability/compatibility risks if other browsers also implement it.

Gecko: No signal

WebKit: No signal

Could you ask for signals?

Web developers: No signals

Do we have partners lined up that ask to use this?

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

Is this feature fully tested by web-platform-tests?
No. There are Blink web tests, which will be upstreamed.

Any reason why those can't be WPTs? What do you mean by upstreaming them?

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

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

Links to previous Intent discussions
Intent to prototype: https://groups.google.com/a/chromium.org/d/msg/blink-dev/h21QrfPrkl4/ff_dZxYcCQAJ

This intent message was generated by Chrome Platform Status.

--
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/CAFqEGhYP27po20DYVPzw%3DMy8UjKxCW92PKYQLHkbBSd__aKaQw%40mail.gmail.com.

Xiaocheng Hu

unread,

Sep 17, 2020, 8:49:36 PM9/17/20

to Yoav Weiss, Xiaocheng Hu, blink-dev

On Thu, Sep 17, 2020 at 11:40 AM Yoav Weiss <yo...@yoav.ws> wrote:

On Wed, Sep 16, 2020 at 9:46 PM Xiaocheng Hu <xiaoc...@chromium.org> wrote:
Contact emails
xiaoc...@chromium.org

Explainer

https://www.youtube.com/watch?v=h_0T3SiISZg
https://jsfiddle.net/mro3c9tz/

It would be easier to review if you'd write out an explainer that outlines what use cases this feature tackles, how it does that, and what using the feature looks like.

Here it is: https://gist.github.com/xiaochengh/da1fa52648d6184fd8022d7134c168c1

Specification
https://github.com/w3c/csswg-drafts/issues/4792
(CSSWG just resolved to add it. There will be an actual spec soon)

Design docs

https://bit.ly/39qATQ4

Summary
Introduce new @font-face descriptors ascent-override, descent-override and line-gap-override to override metrics of the font. This allows web authors to (i) achieve interoperable text layout across browsers and platforms, and (ii) reduce layout shifting caused by web fonts.

Blink component
Blink>CSS

Search tags
css, font, fonts, css-fonts, font-face, font metrics, override

TAG review
https://github.com/w3ctag/design-reviews/issues/557

TAG review status
Pending

Risks

Interoperability and Compatibility
This is a new feature that CSSWG just resolved to add. We do not expect interoperability/compatibility risks if other browsers also implement it.

Gecko: No signal

WebKit: No signal

Could you ask for signals?

Will do when the spec change PR lands.

This new feature has been discussed at CSSWG meeting. Other browser vendors joined and all agreed to add it. Should this be counted as positive?

Web developers: No signals

Do we have partners lined up that ask to use this?

This feature allows improving text layout interoperability and reducing layout shifting, which developers have asked for. See CSSWG issues 450, 2228, and 4792.

Reducing layout shifting also aligns with the Core Web Vitals.

Does it count as a positive signal?

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

Is this feature fully tested by web-platform-tests?
No. There are Blink web tests, which will be upstreamed.

Any reason why those can't be WPTs? What do you mean by upstreaming them?

It's just because those tests were added before getting standardized at CSSWG.

Now that they are standardized, I'll upload them to WPT.

Chris Harrelson

unread,

Sep 18, 2020, 12:48:23 AM9/18/20

to Xiaocheng Hu, Yoav Weiss, blink-dev

This does not count as positive for Mozilla or WebKit. The API owners decided previously that only the official signals process counts for these two fields.

Web developers: No signals

Do we have partners lined up that ask to use this?

This feature allows improving text layout interoperability and reducing layout shifting, which developers have asked for. See CSSWG issues 450, 2228, and 4792.

Reducing layout shifting also aligns with the Core Web Vitals.

Does it count as a positive signal?

In addition, sites currently sometimes use libraries like FontFaceObserver plus CSS styles applied before/after web fonts load to polyfill aspects of this intent. I expect that these uses will be obsolete once these new font metric override descriptors ship.

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

Is this feature fully tested by web-platform-tests?
No. There are Blink web tests, which will be upstreamed.

Any reason why those can't be WPTs? What do you mean by upstreaming them?

It's just because those tests were added before getting standardized at CSSWG.

Now that they are standardized, I'll upload them to WPT.

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

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

Links to previous Intent discussions
Intent to prototype: https://groups.google.com/a/chromium.org/d/msg/blink-dev/h21QrfPrkl4/ff_dZxYcCQAJ

This intent message was generated by Chrome Platform Status.

--
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/CAFqEGhYP27po20DYVPzw%3DMy8UjKxCW92PKYQLHkbBSd__aKaQw%40mail.gmail.com.

--
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/CAFqEGhZRCY1v2%3D1-29EgW3gditVavw%3Dwx7nuQnWVzbk%3D7y62Rg%40mail.gmail.com.

Xiaocheng Hu

unread,

Sep 24, 2020, 1:01:05 AM9/24/20

to Chris Harrelson, Xiaocheng Hu, Yoav Weiss, blink-dev

Hi,

I've updated the chromestatus page. Here's what's changed:

- Explainer added: https://gist.github.com/xiaochengh/da1fa52648d6184fd8022d7134c168c1

- The spec has landed: https://drafts.csswg.org/css-fonts-4/#font-metrics-override-desc

- TAG review has approved it: https://github.com/w3ctag/design-reviews/issues/557

- WebKit has given a positive signal: https://lists.webkit.org/pipermail/webkit-dev/2020-September/031396.html

(Gecko is still reviewing)

- WPT tests added: https://source.chromium.org/search?q=(ascent%7Cdescent%7Cline.gap)%20file:override%20file:external%2Fwpt%2Fcss%2Fcss-fonts

Yoav Weiss

unread,

Sep 24, 2020, 2:33:07 AM9/24/20

to Xiaocheng Hu, Chris Harrelson, blink-dev

LGTM1

On Thu, Sep 24, 2020 at 7:00 AM Xiaocheng Hu <xiaoc...@chromium.org> wrote:

Hi,

I've updated the chromestatus page. Here's what's changed:
- Explainer added: https://gist.github.com/xiaochengh/da1fa52648d6184fd8022d7134c168c1

Thanks! The explainer was very helpful to understanding what this feature is and what (important) use-cases it covers.

Manuel Rego Casasnovas

unread,

Sep 24, 2020, 5:04:25 AM9/24/20

to Yoav Weiss, Xiaocheng Hu, Chris Harrelson, blink-dev

LGTM2

On 24/09/2020 08:32, Yoav Weiss wrote:
> *LGTM1*

>
> On Thu, Sep 24, 2020 at 7:00 AM Xiaocheng Hu <xiaoc...@chromium.org
> <mailto:xiaoc...@chromium.org>> wrote:
>
> Hi,
>
> I've updated the chromestatus page

> <https://chromestatus.com/feature/5651198621253632>. Here's what's

> changed:
> - Explainer
> added: https://gist.github.com/xiaochengh/da1fa52648d6184fd8022d7134c168c1
>
>
> Thanks! The explainer was very helpful to understanding what this
> feature is and what (important) use-cases it covers.
>
>
>
> - The spec has
> landed: https://drafts.csswg.org/css-fonts-4/#font-metrics-override-desc
> - TAG review has approved
> it: https://github.com/w3ctag/design-reviews/issues/557
> - WebKit has given a positive
> signal: https://lists.webkit.org/pipermail/webkit-dev/2020-September/031396.html
> (Gecko is still reviewing)
> - WPT tests
> added: https://source.chromium.org/search?q=(ascent%7Cdescent%7Cline.gap)%20file:override%20file:external%2Fwpt%2Fcss%2Fcss-fonts
>
> On Thu, Sep 17, 2020 at 9:48 PM Chris Harrelson
> <chri...@chromium.org <mailto:chri...@chromium.org>> wrote:
>
>
>
> On Thu, Sep 17, 2020 at 5:49 PM Xiaocheng Hu
> <xiaoc...@chromium.org <mailto:xiaoc...@chromium.org>> wrote:
>
>
>
> On Thu, Sep 17, 2020 at 11:40 AM Yoav Weiss <yo...@yoav.ws
> <mailto:yo...@yoav.ws>> wrote:
>
>
>
> On Wed, Sep 16, 2020 at 9:46 PM Xiaocheng Hu
> <xiaoc...@chromium.org

> <mailto:xiaoc...@chromium.org>> wrote:
>
>
> Contact emails
>

> xiaoc...@chromium.org <mailto:xiaoc...@chromium.org>

>
>
> Explainer
>
>
> https://www.youtube.com/watch?v=h_0T3SiISZg
> https://jsfiddle.net/mro3c9tz/
>
>
> It would be easier to review if you'd write out an
> explainer that outlines what use cases this feature
> tackles, how it does that, and what using the feature
> looks like.
>
>
> Here it
> is: https://gist.github.com/xiaochengh/da1fa52648d6184fd8022d7134c168c1
>
>
>
>
> Specification
>
> https://github.com/w3c/csswg-drafts/issues/4792
> (CSSWG just resolved to add it. There will be an
> actual spec soon)
>
>
> Design docs
>
>
> https://bit.ly/39qATQ4
>
>
> Summary
>
> Introduce new @font-face descriptors
> ascent-override, descent-override and
> line-gap-override to override metrics of the font.
> This allows web authors to (i) achieve interoperable
> text layout across browsers and platforms, and (ii)
> reduce layout shifting caused by web fonts.
>
>
> Blink component
>
> Blink>CSS

> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS>
>
>
> Search tags
>
> css
> <https://chromestatus.com/features#tags:css>, font
> <https://chromestatus.com/features#tags:font>, fonts
> <https://chromestatus.com/features#tags:fonts>, css-fonts
> <https://chromestatus.com/features#tags:css-fonts>, font-face
> <https://chromestatus.com/features#tags:font-face>, font
> metrics
> <https://chromestatus.com/features#tags:font%20metrics>, override
> <https://chromestatus.com/features#tags:override>

>
>
> TAG review
>
> https://github.com/w3ctag/design-reviews/issues/557
>
>
> TAG review status
>
> Pending
>
>
> Risks
>
>
>
> Interoperability and Compatibility
>
> This is a new feature that CSSWG just resolved to
> add. We do not expect interoperability/compatibility
> risks if other browsers also implement it.
>

> /Gecko/: No signal
>
> /WebKit/: No signal

>
>
> Could you ask for signals

> <https://docs.google.com/document/d/1xkHRXnFS8GDqZi7E0SSbR3a7CZsGScdxPUWBsNgo-oo/edit#heading=h.tgzhprxcmw4u>?

>
>
> Will do when the spec change PR

> <https://github.com/w3c/csswg-drafts/pull/5521> lands.

>
> This new feature has been discussed at CSSWG meeting. Other
> browser vendors joined and all agreed to add it. Should this
> be counted as positive?
>
>
> This does not count as positive for Mozilla or WebKit. The API
> owners decided previously that only the official signals process
> counts for these two fields.
>
>
>
>
>
>

> /Web developers/: No signals

>
>
> Do we have partners lined up that ask to use this?
>
>
> This feature allows improving text layout interoperability
> and reducing layout shifting, which developers have asked
> for. See CSSWG issues 450

> <https://github.com/w3c/csswg-drafts/issues/450>, 2228
> <https://github.com/w3c/csswg-drafts/issues/2228>, and 4792
> <https://github.com/w3c/csswg-drafts/issues/4792>.

>
> Reducing layout shifting also aligns with the Core Web Vitals.
>
> Does it count as a positive signal?
>
>
> In addition, sites currently sometimes use libraries like

> FontFaceObserver <https://github.com/bramstein/fontfaceobserver>

> plus CSS styles applied before/after web fonts load to polyfill
> aspects of this intent. I expect that these uses will be
> obsolete once these new font metric override descriptors ship.
>
>
>
>
>
>
>
> Will this feature be supported on all six
> Blink platforms (Windows, Mac, Linux, Chrome
> OS, Android, and Android WebView)?
>
> Yes
>
>
> Is this feature fully tested
> by web-platform-tests

> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?

>
> No. There are Blink web tests

> <https://chromium.googlesource.com/chromium/src/+/refs/heads/master/third_party/blink/web_tests/wpt_internal/css/css-fonts>,

> which will be upstreamed.
>
>
> Any reason why those can't be WPTs? What do you mean by
> upstreaming them?
>
>
> It's just because those tests were added before getting
> standardized at CSSWG.
>
> Now that they are standardized, I'll upload them to WPT.
>
>
>
>
>
> Tracking bug
>
> https://bugs.chromium.org/p/chromium/issues/detail?id=1098355
>
>
> Link to entry on the Chrome Platform Status
>
> https://chromestatus.com/feature/5651198621253632
>
>
> Links to previous Intent discussions
>
> Intent to
> prototype: https://groups.google.com/a/chromium.org/d/msg/blink-dev/h21QrfPrkl4/ff_dZxYcCQAJ
>
>
> This intent message was generated by Chrome Platform

> Status <https://www.chromestatus.com/>.

>
> --
> 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

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFqEGhYP27po20DYVPzw%3DMy8UjKxCW92PKYQLHkbBSd__aKaQw%40mail.gmail.com

> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFqEGhYP27po20DYVPzw%3DMy8UjKxCW92PKYQLHkbBSd__aKaQw%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> 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

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFqEGhZRCY1v2%3D1-29EgW3gditVavw%3Dwx7nuQnWVzbk%3D7y62Rg%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFqEGhZRCY1v2%3D1-29EgW3gditVavw%3Dwx7nuQnWVzbk%3D7y62Rg%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> 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

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACj%3DBEgmH3YxV87JzBi9zNrBRLLdU%2BNQpoGtVnuY1E9%2BZKNnJQ%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACj%3DBEgmH3YxV87JzBi9zNrBRLLdU%2BNQpoGtVnuY1E9%2BZKNnJQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

pEpkey.asc

Daniel Bratell

unread,

Sep 24, 2020, 6:20:03 AM9/24/20

to Manuel Rego Casasnovas, Yoav Weiss, Xiaocheng Hu, Chris Harrelson, blink-dev

LGTM3

I do note that there are some people that want to change the name of
these properties (delete "-override") but they better be quick about it
in that case.

/Daniel

Reply all

Reply to author

Forward

0 new messages