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.
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.
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.
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.
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.
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.
No milestones specified
(re-sending from @chromium.org account)
Contact emails
dr...@chromium.orgrshe...@google.comSpecification
https://www.w3.org/TR/css-fonts-4/#propdef-font-paletteSummary
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>FontsSearch tags
palette, font-palette, color, colr, cpal, animationTAG 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 applicableRisks
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
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?
TAG review status
Not applicableRisks
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=1461588As this position request is very recent, might be worthwhile to let it bake for a week or two.
--
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.
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.
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).