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

On Tue, Feb 10, 2015 at 10:33 AM, Cameron McCormack <cam@mcc.id.au> wrote:
> 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; }

Yes, sounds good.

> 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;
>     }
>   }

Same here.  Sounds good.

> 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);
>   }

Prefer the font-palette property directly.  I don't think we need the
indirection of an at-rule.  Properties are easier to work with in
general.

> 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 */
>   }

So these are predefined palette names that indirect to one of the
built-in palettes?  Sounds good to me.

So, in summary, I like:

@font-features {
  @palettes {
    /* map of author-chosen names to font-chosen palette indexes */
  }
  @palette-entries {
    /* map of author-chosen palette entry names
       to font-chosen palette entry indexes */
  }
}

font-palette: light | dark | <palette-name> | [ <palette-index-name> <color> ]#

~TJ

Received on Tuesday, 10 February 2015 00:21:17 UTC