Csswg-drafts: Color Fonts at risk

Created on 24 Jan 2020  Â·  3Comments  Â·  Source: w3c/csswg-drafts

Fonts 4 has a feature to select the palette (in a color font that has multiple palettes) and also a feature to override palette entries and create new palettes.

Discussions with browser vendors reveal that:

  • the feature is seen as valuable
  • the feature is low priority compared to other things in the browser

No-one suggested the feature be dropped.

Thus, the feature should be put at risk, and eventually if there are no implementations, moved to Fonts 5.

There also need to be tests for the feature (these can be hard to make, but they can be made)

Needs Testcase (WPT) css-fonts-4 css-fonts-5

Most helpful comment

We've just got this working for COLR/CPAL fonts. However it makes no difference to us if it's punted to level 5.

The only suggestion I would make, based on implementing it, is to consider adding an option for "font-palette: none" to turn off color fonts altogether. My reasoning:

  1. Many glyphs in the "emoji" range will only exist in a font with color capabilities, so if you want to display them you have to use a font that supports color.
  2. Both SVG and COLR fonts _must_ have a regular, uncolored glyph outline available as well as their colored versions (although the opposite applies to CBDT fonts, which _must not_ have a regular outline).
  3. There will be situations where you don't want any color - most obviously, this one:
@media not (color) {
    font-palette: none;
}

All 3 comments

Also notable that OpenType Sanitizer, used by Chromium and Gecko, does not support COLR or CPAL

See https://github.com/khaledhosny/ots/issues/202

We've just got this working for COLR/CPAL fonts. However it makes no difference to us if it's punted to level 5.

The only suggestion I would make, based on implementing it, is to consider adding an option for "font-palette: none" to turn off color fonts altogether. My reasoning:

  1. Many glyphs in the "emoji" range will only exist in a font with color capabilities, so if you want to display them you have to use a font that supports color.
  2. Both SVG and COLR fonts _must_ have a regular, uncolored glyph outline available as well as their colored versions (although the opposite applies to CBDT fonts, which _must not_ have a regular outline).
  3. There will be situations where you don't want any color - most obviously, this one:
@media not (color) {
    font-palette: none;
}

The only suggestion I would make, based on implementing it, is to consider adding an option for "font-palette: none" to turn off color fonts altogether.

Great suggestion: done. And thanks for the example, too.

Was this page helpful?
0 / 5 - 0 ratings