Intent to Prototype: CSS font-palette property animation
Munira Tursunova
Contact emails
moo...@google.com, dr...@google.com
Explainer
https://docs.google.com/document/d/1XMTrKH003KBOes6hxzI-3E7LTwp5YwFC-rnzoFpFrfw/edit?usp=sharing
Specification
Will be written as a part of the implementation.
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. Creating the smooth transition between the palettes is rather difficult to achieve if the property is not interpolatable, web authors would need to manually compute the value for each frame in order to achieve that.
Blink component
Motivation
Color fonts have vastly improved typographic expressiveness on the web. They provide web authors with a variety of new features, like defining the palette of the font, that will allow them to style glyph appearance flexibly, on top of what’s pre-defined by the font. Currently the animation type of the font-palette property is discrete, meaning that there is no smooth transition between the different color values of the font. The only way to animate the font-palette property smoothly is by doing it manually, which is rather complicated: in order for animation to work, web authors need to retrieve information about color records from the font and compute font-palette values for each frame.
Defining animation behavior for the CSS font-palette property solves this by enabling a declarative CSS way of achieving a smooth transition. This feature will provide web authors with an easy way to have a smooth transition between font-palette values.
Initial public proposal
We plan to raise this as an issue for the CSS Fonts spec in the CSS WG once we gain more insights from prototyping.
Search tags
font-palette, animation, transition, font-palette-values, color fonts
TAG review
TAG review status
Pending
Risks
Interoperability and Compatibility
Gecko: No signal
WebKit: No signal
Probably positive, since they implemented color fonts, font-palette
Web developers: Positive
Ollie Williams expressed his interest in this CSS Tricks post, describing it as a dream if that feature was real.
Scott Kellum (of typetura.com) has also been suggesting it as a useful feature for the web (origin: a Twitter thread and email conversation, the original twitter post was deleted).
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 expected
Debuggability
Is this feature fully tested by web-platform-tests?
Not yet, but tests will be written as part of the implementation.
Flag name
Requires code in //chrome?
False
Tracking bug
https://bugs.chromium.org/p/chromium/issues/detail?id=1400620
Estimated milestones
No milestones specified
Link to entry on the Chrome Platform Status
Yoav Weiss
Web developers: Positive
Ollie Williams expressed his interest in this CSS Tricks post, describing it as a dream if that feature was real.
Scott Kellum (of typetura.com) has also been suggesting it as a useful feature for the web (origin: a Twitter thread and email conversation, the original twitter post was deleted).
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 expected
Debuggability
Is this feature fully tested by web-platform-tests?
Not yet, but tests will be written as part of the implementation.
Flag name
Requires code in //chrome?
False
Tracking bug
https://bugs.chromium.org/p/chromium/issues/detail?id=1400620
Estimated milestones
No milestones specified
Link to entry on the 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/CAAO7W_DFvgY9yqz_Tr%2B2sHMwsydbWMQ66yZWwF7ZoxDZ2yE1QA%40mail.gmail.com.
Philip Jägenstedt
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfWc9aUFMhL1o3npvC%3D1LMK2SGeZiNyrH%3DA4CxdTJUwwcA%40mail.gmail.com.