Intent to Ship: CSS font-palette property animation

325 views
Skip to first unread message

Munira Tursunova

unread,
Nov 8, 2023, 7:57:12 AM11/8/23
to blin...@chromium.org

Contact emails

moo...@google.com, dr...@google.com

Explainer

https://docs.google.com/document/d/1XMTrKH003KBOes6hxzI-3E7LTwp5YwFC-rnzoFpFrfw/edit?usp=sharing

Specification

https://drafts.csswg.org/css-fonts-4/#font-palette-prop

Summary

The CSS font-palette property allows selection of a specific palette used to render a font. The CSS Fonts 4 spec defines the animation behavior of this property as discrete, which is insufficient to achieve a smooth transition between two selected palettes. Instead, animating the font-palette property should happen by interpolating each of the colour record values from the defined palette, i.e. if the start or the end of the animation has a different colour value for some record in the palette, such colour value should be interpolated.



Blink component

Blink>Fonts

Search tags

font-palette, animation, transition, font-palette-values, color fonts

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility

Low, new feature, was resolved by W3C working group https://github.com/w3c/csswg-drafts/issues/8922#issuecomment-1720930646, but not yet implemented in other browsers.


Gecko: No signal Not implemented.

WebKit: No signal Not implemented.

Web developers: Positive (https://css-tricks.com/colrv1-and-css-font-palette-web-typography/#:~:text=Another%20limitation%3A%20animations%20and%20transitions%20from%20one%20font%2Dpalette%20to%20another%20don%E2%80%99t%20interpolate%20%E2%80%94%20meaning%20you%20can%20switch%20instantly%20from%20one%20palette%20to%20another%2C%20but%20can%E2%80%99t%20gradually%20animate%20between%20them.%20My%20dream%20of%20a%20luridly%20animated%20emoji%20font%20is%20sadly%20unrealized) Ollie Williams expressed his interest in the feature in his article on CSS Tricks. Scott Kellum (of typetura.com) has also been suggesting it as a useful feature for the web (origin: a Twitter thread and email conversation, Scott in the meantime deleted their Twitter account).

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None



Debuggability

Same as any other CSS property, font-palette property is inspectable in DevTools.



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?

Yes

https://wpt.fyi/results/css/css-fonts/palette-mix-computed.html https://wpt.fyi/results/css/css-fonts/animations/font-palette-interpolation.html



Flag name on chrome://flags

FontPaletteAnimation

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

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

Sample links


https://drafts.csswg.org/css-fonts-4/images/nabla-animated.webp

Estimated milestones

Shipping on desktop121
DevTrial on desktop119
Shipping on Android121
DevTrial on Android119
Shipping on WebView121


Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5177171439517696

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAO7W_DFvgY9yqz_Tr%2B2sHMwsydbWMQ66yZWwF7ZoxDZ2yE1QA%40mail.gmail.com

This intent message was generated by Chrome Platform Status.

Daniel Bratell

unread,
Nov 8, 2023, 10:53:03 AM11/8/23
to Munira Tursunova, blin...@chromium.org

Hi, could you please request signals from the other vendors? https://bit.ly/blink-signals will tell you how they work.

Also, you may want to file a TAG review, or give them a FYI or let us know why that is not necessary.

/Daniel

--
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/CAAO7W_Bao93XoyHRT6NKG6p4pP87pQ0bvTedXOiGc_2hX3E7Jw%40mail.gmail.com.

Munira Tursunova

unread,
Nov 9, 2023, 10:02:34 AM11/9/23
to Daniel Bratell, blin...@chromium.org

Yoav Weiss

unread,
Nov 22, 2023, 11:46:50 AM11/22/23
to blink-dev, moo...@google.com, blin...@chromium.org, Daniel Bratell
https://github.com/w3c/csswg-drafts/issues/8922#issuecomment-1720930646 indicates that some parts of this were resolved and other parts are still to be bikeshedded.

Can you expand on that? What's the issue around color space interpolation?

On Thursday, November 9, 2023 at 4:02:34 PM UTC+1 moo...@google.com wrote:

On Wed, Nov 8, 2023 at 4:52 PM Daniel Bratell <brat...@gmail.com> wrote:

Hi, could you please request signals from the other vendors? https://bit.ly/blink-signals will tell you how they work.

Also, you may want to file a TAG review, or give them a FYI or let us know why that is not necessary.

/Daniel

On 2023-11-08 13:56, 'Munira Tursunova' via blink-dev wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Dominik Röttsches

unread,
Nov 23, 2023, 8:33:40 AM11/23/23
to Yoav Weiss, blink-dev, moo...@google.com, Daniel Bratell
Hi Yoav,

On Wed, Nov 22, 2023 at 6:46 PM Yoav Weiss <yoav...@chromium.org> wrote:
https://github.com/w3c/csswg-drafts/issues/8922#issuecomment-1720930646 indicates that some parts of this were resolved and other parts are still to be bikeshedded.

Can you expand on that? What's the issue around color space interpolation?

In my response further down in the thread I untangled that. There are two situations in which we need an explicit color space representation:
1) In mixing two palettes, to describe it as a static state, when an animation or transition has completed or when we're describing an interim state of an animation or transition. For this, we need an explicit interpolation method in the grammar of palette-mix() - to be consistent with color-mix() and to prepare to capture a static interpolation value when animations will have color space control, see below.
The "remaining bike shedding to be done" that's captured in the notes solely originated from a question from emilio@ on whether that color interpolation tag is needed. Munira and I discussed that with him in the directly follow break at resolution at TPAC - but that was offline and not minuted. I am expecting emilio@ to comment on this - otherwise there was nothing open. 

2) What needs to be discussed as a wider issue in CSS is controlling the interpolation method during animation or transitions, but that's outside the scope of the issue we resolved on. Interpolation color space control during animations and transitions are discussed in #7741 and #7063.

I'll ping Emilio again to comment on the issue. Assuming that happens, I really see no blockers at all, and Chris Lilley seems to agree with us on that.

Dominik
 

On Thursday, November 9, 2023 at 4:02:34 PM UTC+1 moo...@google.com wrote:
On Wed, Nov 8, 2023 at 4:52 PM Daniel Bratell <brat...@gmail.com> wrote:

Hi, could you please request signals from the other vendors? https://bit.ly/blink-signals will tell you how they work.

Also, you may want to file a TAG review, or give them a FYI or let us know why that is not necessary.

/Daniel

On 2023-11-08 13:56, 'Munira Tursunova' via blink-dev wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

--
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/85a8ff9f-03e2-4434-bc29-f7d02130e8e3n%40chromium.org.

Yoav Weiss

unread,
Nov 23, 2023, 8:40:32 AM11/23/23
to Dominik Röttsches, blink-dev, moo...@google.com, Daniel Bratell
LGTM1 assuming there aren't any surprises on that front. Thanks!!

Mike Taylor

unread,
Nov 25, 2023, 1:09:45 PM11/25/23
to Yoav Weiss, Dominik Röttsches, blink-dev, moo...@google.com, Daniel Bratell

LGTM2

Rick Byers

unread,
Nov 28, 2023, 1:53:33 AM11/28/23
to Mike Taylor, Yoav Weiss, Dominik Röttsches, blink-dev, moo...@google.com, Daniel Bratell
LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ce826ae3-ed8a-44c9-a62f-64d7ad1bb36e%40chromium.org.

Munira Tursunova

unread,
Nov 28, 2023, 11:29:34 AM11/28/23
to blink-dev, rby...@chromium.org, yoav...@chromium.org, Dominik Röttsches, blink-dev, Munira Tursunova, Daniel Bratell, mike...@chromium.org
Thank you for LGTMs.

Reply all
Reply to author
Forward
0 new messages