[css-fonts] controlling palette use in multi-colour fonts

Background:

The latest revision of the OpenType specification supports multi-
coloured glyphs.  There are three formats that can be used:

* CBDT table - coloured bitmaps
* COLR table - coloured vector glyphs made up of multiple glyf/CFF
  glyphs rendered in sequence in the same position with different RGBA
  colours
* SVG table - SVG-defined glyphs

Both the COLR and SVG tables are defined to be used in conjunction with
palettes, which are also defined in the font, using the CPAL table.  A
font can have multiple palettes defined, and they are identified by
index (the palette at index 0 being the “default” palette).  All
palettes must have the same number of entries, and each entry is a 32
bit RGBA value.  Palette entries are also identified by an index.

A palette is required for the COLR glyphs to work, as each layer’s
colour is defined by reference to a palette entry index.  SVG glyphs can
optionally use palettes by referring to UA defined CSS variables named
--color0, --color1, etc. that are set to rgba() values based on the
palette values.

Palettes can optionally be flagged as “appropriate for use on dark
backgrounds” and/or “appropriate for use on light backgrounds”.

I would like to expose the palette features of these fonts to Web
content.  I think there are three things we could expose:

1. The ability to select which font-defined palette to use.
2. The ability to specify a custom palette to use.  This would be useful
   for fonts that look like “chromatic type” as produced by woodblock
   type (e.g.
   http://media-cache-ak0.pinimg.com/736x/a2/bc/07/a2bc07e98b1d07de92754ecfd3f3a399.jpg).
3. The ability to select a font-defined palette by reference to
   the “appropriate for dark backgrounds” and “appropriate for light
   backgrounds” flags.

We might not want to do all three of these initially; #1 is probably the
place to start.


Proposal #1

Since palettes are identified by index, and indexes do not have a common
meaning across different fonts, we should name the palette indexes like
we do for font-specific features.

  @font-face {
    font-family: FancyFont;
    src: …;
  }

  @font-feature-values FancyFont {
    @palettes {
      subdued: 0;
      gaudy: 1;
      red-and-yellow: 2;
    }
  }

  h1 { font: 48px FancyFont; font-palette: gaudy; }


Optional Proposal #2

Palette entry indexes too are font-specific, so if we want to allow for
custom palette values, they too should be named through @font-feature-
values.

  @font-feature-values FancyFont {
    @palette-entries {
      fill: 0;
      highlight: 1;
      ornament-outer: 2;
      ornament-inner: 3;
    }
  }

To specify the actual colours, there are a couple of ways we could do
it.  One is to define a re-usable palette:

  @font-palette MyCustomPalette {
    fill: black;
    highlight: gold;
    ornament-outer: green;
    ornament-inner: rgba(255, 255, 255, 0.5);
  }

  h1 { font: 48px FancyFont; font-palette: MyCustomPalette; }

Another is to just do it directly in the font-palette property:

  h1 {
    font: 48px FancyFont;
    font-palette: fill black,
                  highlight gold,
                  ornament-outer green,
                  ornament-inner rgba(255, 255, 255, 0.5);
  }


Optional Proposal #3

If we want to allow selecting a pre-defined palette in the font based
on whether it is flagged as being “appropriate for use on dark
backgrounds” and “appropriate for use on light backgrounds”, we could
simply add values to font-palette for this:

  h1 {
    font: 48px FancyFont;
    font-palette: dark-background;  /* select the first palette in the
              font flagged as appropriate for use on dark backgrounds */
  }

-- 
Cameron McCormack ≝ http://mcc.id.au/

Received on Monday, 9 February 2015 23:33:51 UTC