@font-feature-values rule syntax

During the CSS WG discussion at TPAC [1], the topic of the syntax of
the @font-feature-values rule [2] was discussed (see original proposal
here [3]). This rule has been proposed as a way to deal with the
problem of font-specific numbers used in conjuction with some values
of font-variant (e.g. styleset, swash).

A example showing various aspects of the existing proposed syntax:

  @font-feature-values Jupiter Sans {
    swash: swishy 1, flowing 2;
    stylistic: long-k 2;
    styleset: alt-g 1, alt-m 3;
    styleset: curly-quotes 5, code-forms 4 7 9;  /* additional values */

  body { font-family: Jupiter Sans, 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-forms); }
  p { font-family: Another Lovely Font; }

Here the @font-feature-values rule defines values for font-specific
alternates of a single font.  When fallback occurs those values are
ignored unless the same value name has also been defined for the
fallback fonts.

One point that was made during the F2F discussion was that the
additive way these value definitions worked was different from the way
normal CSS style rules function:

  p {
    color: red;
    color: blue; /* overrides the property set above */

Two alternative syntax proposals were made to work around this.

Proposal 1: use curly braces to define scopes for specific value definitions:

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

Proposal 2: use @-marks next to font-specific value names rather than a colon:

  @font-feature-values Jupiter Sans {
    @swash swishy 1;
    @swash flowing 2;
    @stylistic long-k 2;
    @styleset alt-g 1;
    @styleset alt-m 3;
    @styleset curly-quotes 5;
    @styleset code-forms 4 7 9;
The first proposal is somewhat verbose but it does remove some of the
confusion of the initial proposed syntax.  The @-syntax makes the
notation more compact but it feels a little bit like assembler macros.



John Daggett

[1] http://www.w3.org/2010/11/02-CSS-minutes.html#item03

[2] http://dev.w3.org/cvsweb/~checkout~/csswg/css3-fonts/Fonts.html?rev=1.37&content-type=text/html;%20charset=utf-8#font-feature-values

[3] http://lists.w3.org/Archives/Public/www-style/2010Sep/0473.html

Received on Monday, 15 November 2010 00:50:13 UTC