[css3 fonts] font-specific features

During the discussion of font feature support at the last CSS meeting,
there was a lot of concern expressed about the use of numeric
selectors to choose specific glyph variants.  Using an example from
the spec:

  h2 { font-variant-alternates: styleset(3,5); }
  h2:first-letter { font-variant-alternates: swash(2); }
These values are very font specific, if fallback occurs
unintended glyph selection can occur.  These values also poorly
document their intended purpose.

At the meeting Chris suggested using another @-rule to define 
explicit value names for specific families, so today fantasai
and I hashed out a syntax:

  @font-feature-values <font-family> {
    <font-variant-value> : <value-list> [, <value-list>];
    <font-variant-value> : <value-list> [, <value-list>];

  <font-family> :== font family name, quoted or unquoted
  <font-variant-value> :== the name of one of the font-specific font-variant values (e.g. swash, styleset, annotation)
  <value-list> :== <value-name> <integer>+
  <value-name> :== a user-defined identifier used to describe the numeric value
  <integer> := an integer value greater than 0
Multiple integers would only be permitted for font-variant values that
permitted multiple values (e.g. styleset, character-variant).  Other
font-variant values would only permit a single value.

  @font-feature-values My Lovely Font {
    swash: swishy 1, flowing 2;
    stylistic: long-k 2;
    styleset: alt-g 1, alt-m 3, curly-quotes 5, code 4 7 9;

  body { font-family: My Lovely Font, GreatJapaneseFont, sans-serif; }
  h2 { font-variant-alternates: styleset(alt-m, curly-quotes); }
  h2:first-letter { font-variant-alternates: swash(flowing); }

  code { font-variant-alternates: styleset(code); }
  p { font-family: Another Lovely Font; }

The style rules for h2 here are the same as in the original example
using numeric values at the beginning of this message. If the headings
contained Japanese, none of the font-variant settings would apply
since the values aren't defined for GreatJapaneseFont.

This does add more syntax but it nicely solves the fallback problem
and leads to stylesheets that more clearly indicate the variants being
used in a style rule.

Received on Friday, 17 September 2010 00:41:38 UTC