Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support OT-SVG with CSS var(--color0, ...) and color palettes from CPAL table #422

Closed
anthrotype opened this issue Jul 28, 2022 · 5 comments · Fixed by #431
Closed

Support OT-SVG with CSS var(--color0, ...) and color palettes from CPAL table #422

anthrotype opened this issue Jul 28, 2022 · 5 comments · Fixed by #431
Assignees
@anthrotype

Comments

@anthrotype
Copy link
Member

In addition to the inlined SVG colors (constant names "yellow" or hex #ABCDEF) which we do support, and the special currentColor keyword, which we don't yet (cf. #405), OT-SVG table also allows to define color variables (via CSS var() function) that reference color palettes defined in the CPAL table, thus allowing to change the colors by selecting among multiple color palettes (e.g. light vs dark, etc.).

We need to support this both ways: 1) in maximum_color when converting OT-SVG => COLR, and 2) when converting a COLR font with multiple CPAL palettes to OT-SVG (#421).
@anthrotype anthrotype mentioned this issue Jul 28, 2022
Closed
@anthrotype
Copy link
Member Author

Actually, it turns out that OT-SVG font with CSS color variables like "var(--color0, ...)" and a CPAL table does not seem to be working in Safari either, which is the only one I was hoping that it'd work. We already know that FireFox does not support font-palette and @font-palette-values yet: https://bugzilla.mozilla.org/show_bug.cgi?id=1461588.

Here's two test Bungee Color fonts, one is a COLRv0 font, the other is an OT-SVG font, with fill attributes using the CSS custom property notation (var(--color0, ...)). Both fonts contain the same CPAL table with two color palettes; they are both subsetted to A, B, C, and space characters. There's a test html page that set up @font-palette-values and font-palette properties to either select the second non-default palette or override one specific color.
It works in Safari when using the COLRv0 font (I can see the colors changing from the default red to blue), whereas it does not work with the OT-SVG font (Bungee stays red) :(

BungeeColorSVG-multiple-palettes.zip

/cc @litherum

@litherum
Copy link

litherum commented Sep 2, 2022

Please try the Ventura / iOS 16 betas.

@anthrotype
Copy link
Member Author

Thanks @litherum! I just tried with Safari 16.1 from macOS Ventura 13.0 Beta 6 and it's working 👍

@anthrotype
Copy link
Member Author

This is Nabla OT-SVG font (converted from COLRv1 using our maximum_color tool) inside Safari 16.1 on macOS Ventura showing off its alternate CPAL palettes:

Nabla-SVG-Safari

@anthrotype anthrotype mentioned this issue Sep 5, 2022
Merged
@rsheeter
Copy link
Collaborator

rsheeter commented Sep 6, 2022 •
edited
Loading

This is Nabla OT-SVG font (converted from COLRv1 using our maximum_color tool) inside Safari 16.1 on macOS Ventura showing off its alternate CPAL palettes:

AWESOME! Thanks again @litherum :) I will consider myself in your debt by a beer [or your preferred beverage] or two :D

@anthrotype anthrotype mentioned this issue Sep 14, 2022
Closed
anthrotype added a commit to google/fonts that referenced this issue Sep 15, 2022
@anthrotype
re-maximum_color Nabla to support OT-SVG with multi-palette CPAL

Verified

This commit was signed with the committer’s verified signature.
anthrotype Cosimo Lupo
GPG key ID: DF65A8A5A119C9A8
Verified
Learn about vigilant mode
c33c67d 
This PR re-runs the maximum_color tool on Nabla v1.002 using the latest nanoemoji v0.15.0, which adds support for converting a COLR/CPAL font with multiple color palettes (such as Nabla) to an OT-SVG table that contains  color variables referencing those CPAL palettes.
This allows to select alternative font palettes or customize colors within those via CSS on the latest Safari on iOS 16 and macOS Ventura (beta).

https://github.com/googlefonts/nanoemoji/releases/tag/v0.15.0
googlefonts/nanoemoji#422

Note that the font with combined COLR + SVG tables is now 45KB larger, all from the additional var(--colors) in the SVG table (the other tables didn't change), i.e. from 1,598,000 bytes to 1,643,616 bytes (less than 3% increase).
anthrotype added a commit to google/fonts that referenced this issue Sep 15, 2022
@anthrotype
re-maximum_color Nabla to support OT-SVG with multi-palette CPAL (#5245)

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
3317c4e 
This PR re-runs the maximum_color tool on Nabla v1.002 using the latest nanoemoji v0.15.0, which adds support for converting a COLR/CPAL font with multiple color palettes (such as Nabla) to an OT-SVG table that contains  color variables referencing those CPAL palettes.
This allows to select alternative font palettes or customize colors within those via CSS on the latest Safari on iOS 16 and macOS Ventura (beta).

https://github.com/googlefonts/nanoemoji/releases/tag/v0.15.0
googlefonts/nanoemoji#422

Note that the font with combined COLR + SVG tables is now 45KB larger, all from the additional var(--colors) in the SVG table (the other tables didn't change), i.e. from 1,598,000 bytes to 1,643,616 bytes (less than 3% increase).
@anthrotype anthrotype mentioned this issue Nov 17, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@anthrotype anthrotype

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

support OT-SVG color variables for CPAL palette entries googlefonts/nanoemoji
3 participants
@litherum @rsheeter @anthrotype