Intent to Prototype and Ship: font-palette and custom @font-palette-values palettes

[Dominik Röttsches]

Contact emails

dr...@chromium.org

rshe...@google.com

Specification

https://www.w3.org/TR/css-fonts-4/#propdef-font-palette

Summary

The font-palette CSS property allows selecting a palette from a color font. In combination with the @font-palette-values at-rule, custom palettes can be defined. Use cases: designs where an icon or emoji font is used in combination with dark or light mode, or multi-colored icon fonts that are colorised using font-palette to harmonise with the content's color scheme. font-palette increases efficiency of color font uses, as no server roundtrip is needed for changing the colors of the font.

Blink component

Blink>Fonts

Search tags

palette, font-palette, color, colr, cpal, animation

TAG review

Safari ships this in beta, smaller CSS feature closely belonging to effective vector color font usage (COLR, COLRv1), the latter being available for quite a while.

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Very low, available in Safari technology preview and tested with over 50 WPT tests, all pasing. Developed in code and spec updates in close collaboration with Myles Maxfield who implemented font-palette support for Safari TP.

Gecko: Under consideration (https://github.com/mozilla/standards-positions/issues/617) Position requested in above link, tracking bug exists: https://bugzilla.mozilla.org/show_bug.cgi?id=1461588

WebKit: Positive (https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes) Feature complete, available in Safari 15.4 Beta and technology preview

Web developers: Positive, Internal feedback and request from Google Fonts and Material design for extending flexibility and colorisation options of Material Icons font. Type designers already polyfilling such functionality with server round-trips, compare: https://underware.nl/fonts/plakato/features/color/

Other signals:

Ergonomics

If font-palette and @font-palette-values are used heavily for animation, this might be heavy on page rendering performance, as it currently invalidates fonts and triggers a relayout. Should this turn out to be an important use-case, a more optimized invalidation is possible, in which we could aim to not touch layout, but only redraw glyphs with changed palettes. That's possible because a palette change does not trigger a font metrics change, as opposed to a change to font variation parameters for example.

Activation

Server side round trips to retrieve fonts with changed palette from the server are possible. Other than that: The feature degrades gracefully, as glyphs will still be visible, just with the default palette, not with the author palette.

Security

Engine-internal CSS feature, new code consists of CSS parsing code and added functionality in Skia to select colors not directly from font but from user-supplied font. Same bounds checks as before, I do not see an increased security risk.

Debuggability

font-palette debuggable as usual as a regular CSS property in DevTools. @font-palette-values editable through editing the CSS content in DevTools but no extra tooling exists for selecting colors or pre-filling a palette with values from the font for example. This could be a possible extension if it turns out to be a popular requested use case.

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

Yes, extensively tested, test list

Flag name

Available under experimental web platform features in Canary from 101.0.4931.0.

Requires code in //chrome?

False

Tracking bug

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

Sample links

Plakato Color Grade (currently polyfilled): https://underware.nl/fonts/plakato/features/color/

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5674031696052224

This intent message was generated by Chrome Platform Status.

[Dominik Röttsches]

(re-sending from @chromium.org account)

[Yoav Weiss]

Thanks for working on this! Seems like a very cool feature!! :)

On Tuesday, March 8, 2022 at 1:44:55 PM UTC+1 Dominik Röttsches wrote:

(re-sending from @chromium.org account)

Contact emails

dr...@chromium.org

rshe...@google.com

Specification

https://www.w3.org/TR/css-fonts-4/#propdef-font-palette

Summary

The font-palette CSS property allows selecting a palette from a color font. In combination with the @font-palette-values at-rule, custom palettes can be defined. Use cases: designs where an icon or emoji font is used in combination with dark or light mode, or multi-colored icon fonts that are colorised using font-palette to harmonise with the content's color scheme. font-palette increases efficiency of color font uses, as no server roundtrip is needed for changing the colors of the font.

Blink component

Blink>Fonts

Search tags

palette, font-palette, color, colr, cpal, animation

TAG review

Safari ships this in beta, smaller CSS feature closely belonging to effective vector color font usage (COLR, COLRv1), the latter being available for quite a while.

Can you file an FYI TAG review, so that they'd be aware of this shipping in multiple engines?

 

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Very low, available in Safari technology preview and tested with over 50 WPT tests, all pasing. Developed in code and spec updates in close collaboration with Myles Maxfield who implemented font-palette support for Safari TP.

Gecko: Under consideration (https://github.com/mozilla/standards-positions/issues/617) Position requested in above link, tracking bug exists: https://bugzilla.mozilla.org/show_bug.cgi?id=1461588

As this position request is very recent, might be worthwhile to let it bake for a week or two.

[Dominik Röttsches]

Hi Yoav,

On Thursday, March 10, 2022 at 9:18:17 AM UTC+2 yoav...@chromium.org wrote:

Thanks for working on this! Seems like a very cool feature!! :)

On Tuesday, March 8, 2022 at 1:44:55 PM UTC+1 Dominik Röttsches wrote:

 

TAG review

Safari ships this in beta, smaller CSS feature closely belonging to effective vector color font usage (COLR, COLRv1), the latter being available for quite a while.

Can you file an FYI TAG review, so that they'd be aware of this shipping in multiple engines?

FYI TAG review Filed as https://github.com/w3ctag/design-reviews/issues/719 and quick explainer drafted in here (PR).

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Very low, available in Safari technology preview and tested with over 50 WPT tests, all pasing. Developed in code and spec updates in close collaboration with Myles Maxfield who implemented font-palette support for Safari TP.

Gecko: Under consideration (https://github.com/mozilla/standards-positions/issues/617) Position requested in above link, tracking bug exists: https://bugzilla.mozilla.org/show_bug.cgi?id=1461588

As this position request is very recent, might be worthwhile to let it bake for a week or two.

FWIW, I pinged Jonathan Kew on the Mozilla side regarding this request as well.  

Dominik

[Dominik Röttsches]

Hi again Yoav and others,

I have a small update, Jonathan preliminarily commented positively: 

"Speaking for myself, I think this is a useful and uncontroversial addition, allowing authors greater flexibility and control when working with multi-colored fonts (such as emoji and other symbol sets, as well as decorative alphabets). [...] So I think we should classify this as "worth prototyping". @tantek @annevk Any additional thoughts?"

So, I'd be happy if this could be reviewed in this week's API owners meeting round.

Thanks,

Dominik

 

[Yoav Weiss]

LGTM1 - given the early positive signal and the fact it's already shipping in Safari. Please follow up on any feedback from others if it comes up on that thread.

[Mike Taylor]

LGTM2

--
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/CAL5BFfX8T%2BB%2BvkDDz2wcyXpDbTMctZPYz5MPHnKjuxSU2aY9uA%40mail.gmail.com.

[Mike West]

LGTM3.

-mike

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/5488f955-a161-2a62-d4cb-7937085bd93f%40chromium.org.

[Dominik Röttsches]

Thanks all for the quick resolution on this issue!

[一丝]

Hi DevTools Team:

When icons have many colors and inconsistent styles, it is difficult to quickly locate the layer that needs to be changed by `override-colors`. could DevTools implement the ability to locate layers by mouse selection? Similar to selecting HTML/SVG elements.

At iconfont.cn (a vector material management platform), we have implemented a simple layer color modification function for SVG, and it would be great if DevTools could do something similar. See demo.mp4

[Dominik Röttsches]

Hi Yoav and others,

On Mon, Mar 14, 2022 at 5:18 PM Dominik Röttsches <dr...@google.com> wrote:

On Thursday, March 10, 2022 at 9:18:17 AM UTC+2 yoav...@chromium.org wrote:

On Tuesday, March 8, 2022 at 1:44:55 PM UTC+1 Dominik Röttsches wrote:

 

TAG review

Safari ships this in beta, smaller CSS feature closely belonging to effective vector color font usage (COLR, COLRv1), the latter being available for quite a while.

Can you file an FYI TAG review, so that they'd be aware of this shipping in multiple engines?

FYI TAG review Filed as https://github.com/w3ctag/design-reviews/issues/719 and quick explainer drafted in here (PR).

As a follow-up, the TAG had no concerns on this API, compare https://github.com/w3ctag/design-reviews/issues/719#issuecomment-1108822807

Dominik