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

127 views
Skip to first unread message

Dominik Röttsches

unread,
Mar 8, 2022, 7:43:31 AM3/8/22
to blink-dev, Roderick Sheeter, Cosimo Lupo

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

palettefont-palettecolorcolrcpalanimation

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

unread,
Mar 8, 2022, 7:44:55 AM3/8/22
to blink-dev, Roderick Sheeter, Cosimo Lupo

(re-sending from @chromium.org account)

Yoav Weiss

unread,
Mar 10, 2022, 2:18:17 AM3/10/22
to blink-dev, Dominik Röttsches, Roderick Sheeter, Cosimo Lupo
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

palettefont-palettecolorcolrcpalanimation

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

unread,
Mar 14, 2022, 11:18:27 AM3/14/22
to blink-dev, yoav...@chromium.org, Dominik Röttsches, Roderick Sheeter, Cosimo Lupo
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

unread,
Mar 15, 2022, 10:27:04 AM3/15/22
to blink-dev, yoav...@chromium.org, Roderick Sheeter, Cosimo Lupo
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

unread,
Mar 15, 2022, 11:20:53 AM3/15/22
to Dominik Röttsches, blink-dev, Roderick Sheeter, Cosimo Lupo
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

unread,
Mar 15, 2022, 12:12:07 PM3/15/22
to Yoav Weiss, Dominik Röttsches, blink-dev, Roderick Sheeter, Cosimo Lupo
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

unread,
Mar 15, 2022, 2:06:53 PM3/15/22
to Mike Taylor, Yoav Weiss, Dominik Röttsches, blink-dev, Roderick Sheeter, Cosimo Lupo

Dominik Röttsches

unread,
Mar 16, 2022, 5:01:58 AM3/16/22
to blink-dev, mk...@chromium.org, yoav...@chromium.org, Dominik Röttsches, blink-dev, Roderick Sheeter, Cosimo Lupo, mike...@chromium.org
Thanks all for the quick resolution on this issue!

一丝

unread,
Mar 16, 2022, 9:16:10 AM3/16/22
to blink-dev, Dominik Röttsches, mk...@chromium.org, yoav...@chromium.org, Dominik Röttsches, blink-dev, Roderick Sheeter, Cosimo Lupo, mike...@chromium.org, mat...@chromium.org, chang...@chromium.org
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.
demo.png
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
demo.mp4

Dominik Röttsches

unread,
Apr 26, 2022, 3:31:16 AM4/26/22
to blink-dev, yoav...@chromium.org, Roderick Sheeter, Cosimo Lupo
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
Reply all
Reply to author
Forward
0 new messages