changes to reflect March 2011 CSS F2F discussions

Author: John Daggett

css3-fonts/Fonts.html

@@ -111,15 +111,15 @@
 
    <h1>CSS Fonts Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=editors-draft-9-march-2011>Editor's Draft 9
+   <h2 class="no-num no-toc" id=editors-draft-10-march-2011>Editor's Draft 10
     March 2011</h2>
 
    <dl id=authors>
     <dt>This version:
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a>
-     <!-- <dd><a href="http://www.w3.org/TR/2011/ED-css3-fonts-20110309">http://www.w3.org/TR/2011/ED-css3-fonts-20110309</a> -->
+     <!-- <dd><a href="http://www.w3.org/TR/2011/ED-css3-fonts-20110310">http://www.w3.org/TR/2011/ED-css3-fonts-20110310</a> -->
 
 
     <dt>Latest version:
@@ -292,6 +292,9 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
 
      <li><a href="#char-handling-issues"><span class=secno>5.2
       </span>Character handling issues</a>
+
+     <li><a href="#font-matching-changes"><span class=secno>5.3 </span>Font
+      matching changes since CSS 2.1</a>
     </ul>
 
    <li><a href="#font-rend-props"><span class=secno>6 </span>Font feature
@@ -334,8 +337,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
       shorthand for font rendering: the font-variant property</a>
 
      <li><a href="#font-feature-settings-prop"><span class=secno>6.12
-      </span>Low-level font settings control: the font-feature-settings
-      property</a>
+      </span>Low-level font feature settings control: the
+      font-feature-settings property</a>
 
      <li><a href="#font-language-override-prop"><span class=secno>6.13
       </span>Font language override: the font-language-override property</a>
@@ -2577,7 +2580,7 @@ <h3 id=font-rend-desc><span class=secno>4.6 </span>Font features: the <a
     <tr>
      <td>Value:
 
-     <td>normal | [&lt;featuretag&gt;]+
+     <td>normal | &lt;featuretagvalue&gt; [, &lt;featuretagvalue&gt;]*
 
     <tr>
      <td><em>Initial:</em>
@@ -2779,7 +2782,29 @@ <h3 id=char-handling-issues><span class=secno>5.2 </span>Character handling
    implementation behaves as if the algorithm had been followed exactly.
    Matching occurs in a well-defined order to insure that the results are as
    consistent as possible across user agents, given an identical set of
-   available fonts and rendering technology.</p>
+   available fonts and rendering technology.
+
+  <h3 id=font-matching-changes><span class=secno>5.3 </span>Font matching
+   changes since CSS 2.1</h3>
+
+  <p>The algorithm above is different from CSS 2.1 in a number of key places.
+   These changes were made to better reflect actual font matching behavior
+   across user agent implementations.
+
+  <ul></ul>
+
+  <p>Differences compared to the font matching algorithm in CSS 2.1:
+
+  <ul>
+   <li>The algorithm includes font-stretch matching.
+
+   <li>All possible font-style matching scenarios are delineated.
+
+   <li>Small-caps fonts are not matched as part of the font matching process,
+    they are now handled via font features.
+
+   <li>Unicode variation selector matching is required.
+  </ul>
   <!-- 
 
 <h3>Examples of font matching</h3>
@@ -3008,20 +3033,23 @@ <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
      <td>as specified
   </table>
 
-  <p>Controls whether kerning is applied to inter-glyph spacing when
-   rendering text. The value ‘<code class=property>normal</code>’ implies
-   that kerning is applied when rendering text while the value ‘<code
+  <p>Kerning is the contextual adjustment of inter-glyph spacing. This
+   property controls metric kerning, kerning that utilizes adjustment data
+   contained in the font. The value ‘<code class=property>normal</code>’
+   implies that kerning is applied while the value ‘<code
    class=property>none</code>’ implies that kerning is not applied when
-   rendering text. If the value is ‘<code class=property>auto</code>’ a
+   rendering text. If the value is ‘<code class=property>auto</code>’, a
    user agent is free to choose whether kerning is enabled or not by default.
-   
 
   <p>For fonts that do not include kerning data this property will have no
    visible effect. When rendering with OpenType fonts, the <a
    href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
-   specification suggests that kerning be enabled by default. Authors may
-   prefer to disable kerning in situations where performance is more
-   important that precise appearance. If the ‘<code
+   specification suggests that kerning be enabled by default. For OpenType
+   fonts, user agents must support fonts containing kerning data in either
+   the ‘<code class=property>kern</code>’ or 'GPOS' tables, using the
+   guidelines detailed in the OpenType specification. Authors may prefer to
+   disable kerning in situations where performance is more important that
+   precise appearance. If the ‘<code
    class=property>letter-spacing</code>’ property is defined, kerning
    adjustments are considered part of the default spacing, letter spacing
    adjustments are made after kerning has been applied.</p>
@@ -3103,6 +3131,20 @@ <h3 id=vertical-position-prop><span class=secno>6.4 </span>Subscript,
    and vertical-align to its initial value. Other than this, the property
    does not affect the height of the line box.
 
+  <p class=issue>It would be nice to define this in a way such that it would
+   work with nested subscripts or superscripts which would allow it to be
+   used in user agent stylesheets. But one of the goals for this is to allow
+   simple subscripts and superscripts to be displayed without affecting the
+   line box. To achieve both appears to be a very hairy problem.
+
+  <p class=issue>Fonts often include default values for subscript/superscript
+   metrics. As a result, a mixture of designed glyphs and simulated glyphs
+   may not display correctly, effectively the baseline would bounce between
+   the two types of glyphs.
+
+  <p class=issue>Steve Z is concerned about the fact that this property
+   effectively breaks inheritance by resetting font-size and vertical-align.
+
   <div class=example>
    <p>A typical user agent default style for the <code>sub</code> element:</p>
 
@@ -3559,7 +3601,6 @@ <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
       styleset(&lt;feature-value-name&gt; [, &lt;feature-value-name&gt;]*) ||
       character-variant(&lt;feature-value-name&gt;
       [,&lt;feature-value-name&gt;]*) || swash(&lt;feature-value-name&gt;) ||
-      contextual-swash(&lt;feature-value-name&gt;) ||
       ornament(&lt;feature-value-name&gt;) ||
       annotation(&lt;feature-value-name&gt;) || ruby ]
 
@@ -3662,19 +3703,13 @@ <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
     id=swashltfeature-value-namegt>swash(&lt;feature-value-name&gt;)</dfn>
 
    <dd>Enables display of swash glyphs (<em>font specific</em>, OpenType
-    feature: <code>swsh &lt;feature-index&gt;</code>).
+    feature: <code>swsh &lt;feature-index&gt;, cswh
+    &lt;feature-index&gt;</code>).
   </dl>
 
   <div class=featex><img alt="swash example" src=swsh.png></div>
 
   <dl>
-   <dt><dfn
-    id=contextual-swashltfeature-value-namegt>contextual-swash(&lt;feature-value-name&gt;)</dfn>
-    
-
-   <dd>Enables display of contextual swash glyphs (<em>font specific</em>,
-    OpenType feature: <code>cswh &lt;feature-index&gt;</code>).
-
    <dt><dfn
     id=ornamentsltfeature-value-namegt>ornaments(&lt;feature-value-name&gt;)</dfn>
 
@@ -3913,7 +3948,7 @@ <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
     containing character variants that mimic the character forms found on a
     Byzantine seal from the 8th century A.D. Two lines below is the same text
     displayed in a font without variants. Note the two variants for U and N
-    used on the reverse of the seal.</p>
+    used on the seal.</p>
 
    <pre>@font-feature-values Athena Ruby {
   @character-variant
@@ -4087,12 +4122,11 @@ <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
       &lt;contextual-alt-values&gt; || stylistic[(&lt;integer&gt;)]? ||
       historical-forms || styleset(&lt;integer&gt; [,&lt;integer&gt;]*) ||
       character-variant(&lt;integer&gt; [,&lt;integer&gt;]*) ||
-      swash[(&lt;integer&gt;)]? || contextual-swash[(&lt;integer&gt;)]? ||
-      ornament[(&lt;integer&gt;)]? || annotation[(&lt;integer&gt;)]? || ruby
-      || &lt;caps-value&gt; || &lt;numeric-figure-values&gt; ||
-      &lt;numeric-spacing-values&gt; || &lt;numeric-fraction-values&gt; ||
-      slashed-zero || &lt;east-asian-variant-values&gt; ||
-      &lt;east-asian-width-values&gt; ]
+      swash[(&lt;integer&gt;)]? || ornament[(&lt;integer&gt;)]? ||
+      annotation[(&lt;integer&gt;)]? || ruby || &lt;caps-value&gt; ||
+      &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
+      &lt;numeric-fraction-values&gt; || slashed-zero ||
+      &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ]
 
     <tr>
      <td>Initial:
@@ -4137,7 +4171,7 @@ <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
    class=property>font-feature-settings</code></a>’.
 
   <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
-   font settings control: the <a
+   font feature settings control: the <a
    href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
 
   <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
@@ -4150,7 +4184,7 @@ <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
     <tr>
      <td>Value:
 
-     <td>normal | [&lt;featuretag&gt;]+
+     <td>normal | &lt;featuretagvalue&gt; [, &lt;featuretagvalue&gt;]*
 
     <tr>
      <td>Initial:
@@ -4192,48 +4226,45 @@ <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
   <p>
 
   <pre>/* enable small caps and use second swash alternate */
-font-feature-settings: smcp swsh(2);</pre>
+font-feature-settings: "smcp", "swsh" 2;</pre>
 
-  <p>Feature tags are used with the following syntax:
+  <p>Feature tag values have the following syntax:
 
   <pre
-   class=prod><dfn id=ltfeaturetaggt><var>&lt;featuretag&gt;</var></dfn> = [ot-]ident[( &lt;integer&gt; | on | off )]?</pre>
-
-  <p>The identifier indicates a case-sensitive OpenType feature tag. For it
-   to match an OpenType feature contained in a font, it must follow the
-   syntax rules for tags. OpenType feature tags that are not valid CSS
-   identifiers or conflict with CSS keywords must be prefixed with ‘<code
-   class=property>ot-</code>’. In this case the ‘<code
-   class=property>ot-</code>’ prefex is removed and the remaining portion
-   of the identifier is used to lookup the feature tag in the font. Feature
-   tags need only match a feature tag defined in the font, they are not
-   limited to explicitly registered OpenType features. Fonts defining custom
-   feature tags should follow the <a
+   class=prod><dfn id=ltfeaturetagvaluegt><var>&lt;featuretagvalue&gt;</var></dfn> = &lt;string&gt; [ &lt;integer&gt; | on | off ]?</pre>
+
+  <p>The &lt;string&gt; is a case-sensitive OpenType feature tag. For it to
+   match an OpenType feature contained in a font, it must follow the syntax
+   rules for tags. As specified in the OpenType specification, feature tags
+   contain four characters. Tag strings longer than four characters must be
+   ignored, user agents must not use a feature tag created by truncating the
+   string to four characters. Feature tags need only match a feature tag
+   defined in the font, they are not limited to explicitly registered
+   OpenType features. Fonts defining custom feature tags should follow the <a
    href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
    rules</a> defined in the OpenType specification <a
    href="#OPENTYPE-FEATURES"
    rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
    Feature tags not present in the font are ignored; a user agent must not
    attempt to synthesize fallback behavior based on these feature tags.
 
-  <p>If present, a value in parentheses indicates an index used for glyph
-   selection. An &lt;integer&gt; value must be 0 or greater. A value of 0
-   indicates that the feature is disabled. For boolean features, a value of 1
-   enables the feature. For non-boolean features, a value of 1 or greater
-   enables the feature and indicates the feature selection index. A value of
-   ‘<code class=property>on</code>’ is synonymous with 1 and ‘<code
-   class=property>off</code>’ is synonymous with 0. If the value in
-   parentheses is omitted, a value of 1 is assumed.
+  <p>If present, a value indicates an index used for glyph selection. An
+   &lt;integer&gt; value must be 0 or greater. A value of 0 indicates that
+   the feature is disabled. For boolean features, a value of 1 enables the
+   feature. For non-boolean features, a value of 1 or greater enables the
+   feature and indicates the feature selection index. A value of ‘<code
+   class=property>on</code>’ is synonymous with 1 and ‘<code
+   class=property>off</code>’ is synonymous with 0. If the value is
+   omitted, a value of 1 is assumed.
 
   <pre>
-font-feature-settings: dlig(1);   /* dlig=1 enable discretionary ligatures */
-font-feature-settings: smcp(on);  /* smcp=1 enable small caps */
-font-feature-settings: ot-c2sc;   /* c2sc=1 enable caps to small caps */
-font-feature-settings: liga(off); /* liga=0 no common ligatures */
-font-feature-settings: tnum hist; /* tnum=1, hist=1 enabled tabular numbers and historical forms */
-font-feature-settings: 3piX(1);   /* invalid syntax, feature tag not identifier */
-font-feature-settings: ot-3piX;   /* 3piX=1 (this feature not defined) */
-font-feature-settings: PKRN;      /* PKRN=1 enable custom feature */
+font-feature-settings: "dlig" 1;       /* dlig=1 enable discretionary ligatures */
+font-feature-settings: "smcp" on;      /* smcp=1 enable small caps */
+font-feature-settings: "c2sc";         /* c2sc=1 enable caps to small caps */
+font-feature-settings: "liga" off;     /* liga=0 no common ligatures */
+font-feature-settings: "tnum", "hist"; /* tnum=1, hist=1 enabled tabular numbers and historical forms */
+font-feature-settings: "palin" off;    /* good idea but invalid tagname, ignored */
+font-feature-settings: "PKRN";         /* PKRN=1 enable custom feature */
 </pre>
 
   <p>Authors should generally use ‘<a href="#propdef-font-variant"><code
@@ -4246,12 +4277,15 @@ <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
    for other modern font formats that support font features may be added in
    the future.
 
+  <p class=issue>While the use of quotes distinguishes feature tags as
+   defined in an external resource, they still seem a bit clumsy.
+
   <div class=example>
    <p>The Japanese text below will be rendered with half-width kana
     characters:</p>
 
    <pre lang=ja>
-body { font-feature-settings: hwid; /* Half-width OpenType feature */ }
+body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
 
 &lt;p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない&lt;/p>
 </pre>
@@ -4445,7 +4479,7 @@ <h2 id=rendering-considerations><span class=secno>7 </span>Resolving font
   font-family: BodyText;
   src: local("HiraMaruPro-W4");
   font-variant: proportional-width;
-  font-feature-settings: ital; /* Latin italics within CJK text feature */
+  font-feature-settings: "ital"; /* Latin italics within CJK text feature */
 }
 
 body { font-family: BodyText, serif; }
@@ -4474,7 +4508,7 @@ <h2 id=rendering-considerations><span class=secno>7 </span>Resolving font
    <p>Adding an additional style rule with the @font-face above:</p>
 
    <pre>body         { font-family: main, Helvetica; }
-span         { font-feature-settings: dlig; }
+span         { font-feature-settings: "dlig"; }
 span.special { font-variant-ligatures: no-additional-ligatures; }
 </pre>
 
@@ -4681,7 +4715,8 @@ <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
    Lunde and Eric Muller provided valuable feedback on CJK OpenType features
    and Unicode variation selectors. The idea for supporting font features by
    using font-variant subproperties originated with Håkon Wium Lie, Adam
-   Twardoch and Tal Leming.
+   Twardoch and Tal Leming. Thanks also to House Industries for allowing the
+   use of Ed Interlock in the discretionary ligatures example.
 
   <p>A special thanks to Robert Bringhurst for the sublime mind expansion
    that is <em>The Elements of Typographic Style</em>.
@@ -4933,8 +4968,8 @@ <h2 class=no-num id=index>Index</h2>
     href="#ltfeature-value-namegt"
     title="&lt;feature-value-name&gt;"><strong>6.9</strong></a>
 
-   <li><var>&lt;featuretag&gt;</var>, <a href="#ltfeaturetaggt"
-    title="&lt;featuretag&gt;"><strong>6.12</strong></a>
+   <li><var>&lt;featuretagvalue&gt;</var>, <a href="#ltfeaturetagvaluegt"
+    title="&lt;featuretagvalue&gt;"><strong>6.12</strong></a>
 
    <li>&lt;font-description&gt;
     <ul>
@@ -5034,11 +5069,6 @@ <h2 class=no-num id=index>Index</h2>
    <li>contextual, <a href="#contextual"
     title=contextual><strong>6.8</strong></a>
 
-   <li>contextual-swash(&lt;feature-value-name&gt;), <a
-    href="#contextual-swashltfeature-value-namegt"
-    title="contextual-swash(&lt;feature-value-name&gt;)"><strong>6.8</strong></a>
-    
-
    <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
     of"><strong>#</strong></a>
 
@@ -5276,7 +5306,7 @@ <h2 class=no-num id=property-index>Property index</h2>
      <td><a class=property
       href="#propdef-font-feature-settings">font-feature-settings</a>
 
-     <td>normal | [&lt;featuretag&gt;]+
+     <td>normal | &lt;featuretagvalue&gt; [, &lt;featuretagvalue&gt;]*
 
      <td>normal
 
@@ -5406,12 +5436,11 @@ <h2 class=no-num id=property-index>Property index</h2>
       &lt;contextual-alt-values&gt; || stylistic[(&lt;integer&gt;)]? ||
       historical-forms || styleset(&lt;integer&gt; [,&lt;integer&gt;]*) ||
       character-variant(&lt;integer&gt; [,&lt;integer&gt;]*) ||
-      swash[(&lt;integer&gt;)]? || contextual-swash[(&lt;integer&gt;)]? ||
-      ornament[(&lt;integer&gt;)]? || annotation[(&lt;integer&gt;)]? || ruby
-      || &lt;caps-value&gt; || &lt;numeric-figure-values&gt; ||
-      &lt;numeric-spacing-values&gt; || &lt;numeric-fraction-values&gt; ||
-      slashed-zero || &lt;east-asian-variant-values&gt; ||
-      &lt;east-asian-width-values&gt; ]
+      swash[(&lt;integer&gt;)]? || ornament[(&lt;integer&gt;)]? ||
+      annotation[(&lt;integer&gt;)]? || ruby || &lt;caps-value&gt; ||
+      &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
+      &lt;numeric-fraction-values&gt; || slashed-zero ||
+      &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ]
 
      <td>normal
 
@@ -5432,7 +5461,6 @@ <h2 class=no-num id=property-index>Property index</h2>
       styleset(&lt;feature-value-name&gt; [, &lt;feature-value-name&gt;]*) ||
       character-variant(&lt;feature-value-name&gt;
       [,&lt;feature-value-name&gt;]*) || swash(&lt;feature-value-name&gt;) ||
-      contextual-swash(&lt;feature-value-name&gt;) ||
       ornament(&lt;feature-value-name&gt;) ||
       annotation(&lt;feature-value-name&gt;) || ruby ]