[css3-fonts] revise details of font-variant-caps and include more samples

Author: John Daggett

css3-fonts/Fonts.html

@@ -113,7 +113,7 @@
     font-family: monospace;
     font-size: 120%;
   }
-  
+
   </style>
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   type="text/css">
@@ -125,15 +125,15 @@
 
    <h1>CSS Fonts Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=editors-draft-15-august-2012>Editor's Draft
-    15 August 2012</h2>
+   <h2 class="no-num no-toc" id=editors-draft-4-september-2012>Editor's Draft
+    4 September 2012</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/2012/ED-css3-fonts-20120815/">http://www.w3.org/TR/2012/ED-css3-fonts-20120815/</a> -->
+     <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-fonts-20120904/">http://www.w3.org/TR/2012/ED-css3-fonts-20120904/</a> -->
 
 
     <dt>Latest version:
@@ -149,15 +149,15 @@ <h2 class="no-num no-toc" id=editors-draft-15-august-2012>Editor's Draft
     <dt>Previous version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/">http://www.w3.org/TR/2011/WD-css3-fonts-20111004/</a>
+     href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/">http://www.w3.org/TR/2012/WD-css3-fonts-20120823/</a>
 
     <dt>Issues List:
 
     <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/18">CSS3 Fonts
      issues in Tracker</a>
 
     <dd><a
-     href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Fonts&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED">CSS3
+     href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Fonts&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">CSS3
      Fonts issues in Bugzilla</a>
 
     <dt>Discussion:
@@ -388,8 +388,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
 
    <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
     <ul class=toc>
-     <li class=no-num><a href="#recent-changes"> Changes from the October
-      2011 CSS3 Fonts Working Draft</a>
+     <li class=no-num><a href="#recent-changes"> Changes from the August 2012
+      CSS3 Fonts Working Draft</a>
     </ul>
 
    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
@@ -2619,7 +2619,7 @@ <h3 id=font-rend-desc><span class=secno>4.6 </span>Font features: the <a
       swash(&lt;feature-value-name&gt;) ||
       ornaments(&lt;feature-value-name&gt;) ||
       annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
-      | petite-caps | all-petite-caps | titling-caps | unicase ] ||
+      | petite-caps | all-petite-caps | unicase | titling-caps ] ||
       &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
       &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
       &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
@@ -3542,7 +3542,7 @@ <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
      <td>Value:
 
      <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
-      | titling-caps | unicase
+      | unicase | titling-caps
 
     <tr>
      <td>Initial:
@@ -3609,45 +3609,75 @@ <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
    <dd>Enables display of petite capitals for both upper and lowercase
     letters (OpenType features: <span class=tag>c2pc, pcap</span>).
 
+   <dt><dfn id=unicase>unicase</dfn>
+
+   <dd>Enables display of mixture of small capitals for uppercase letters
+    with normal lowercase letters (OpenType feature: <span
+    class=tag>unic</span>).
+
    <dt><dfn id=titling-caps>titling-caps</dfn>
 
    <dd>Enables display of titling capitals (OpenType feature: <span
     class=tag>titl</span>). Uppercase letter glyphs are often designed for
     use with lowercase letters. When used in all uppercase titling sequences
     they can appear too strong. Titling capitals are designed specifically
     for this situation.
+  </dl>
 
-   <dt><dfn id=unicase>unicase</dfn>
+  <p>This property allows the selection of alternate glyphs used for small or
+   petite capitals or for titling. These glyphs are specifically designed to
+   blend well with the surrounding normal glyphs, to maintain the weight and
+   readability which suffers when text is simply resized to fit this purpose.
 
-   <dd>Enables display of mixture of small capitals for uppercase letters
-    with normal lowercase letters (OpenType feature: <span
-    class=tag>unic</span>).
-  </dl>
+  <p>The availability of these glyphs is based on whether a given feature is
+   defined or not in the feature list of the font. User agents can optionally
+   decide this on a per-script basis but should explicitly not decide this on
+   a per-character basis.
 
-  <p>For backwards compatibility with CSS 2.1, if ‘<a
+  <p>Some fonts may only support a subset or none of the features described
+   for this property. For backwards compatibility with CSS 2.1, if ‘<a
    href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
    href="#all-small-caps"><code class=property>all-small-caps</code></a>’
    is specified but small-caps glyphs are not available for a given font,
    user agents should simulate a small-caps font, for example by taking a
-   normal font and replacing the lowercase letters by scaled uppercase
-   characters (and also uppercase letters in the case of ‘<a
+   normal font and replacing the glyphs for lowercase letters with scaled
+   versions of the glyphs for uppercase characters (replacing the glyphs for
+   both upper and lowercase letters in the case of ‘<a
    href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
-   The availability of these glyphs is based on whether a given feature is
-   defined or not in the feature list of the font. User agents can optionally
-   decide this on a per-script basis.
 
-  <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
-   replace glyphs in a small-caps font so that the text appears in all
-   uppercase letters. If either ‘<a href="#petite-caps"><code
+  <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
+   real small-caps" class=hires src=synthetic-vs-real-small-caps.png
+   width=512px>
+   <p class=caption>Synthetic vs. real small-caps
+  </div>
+
+  <p>To match the surrounding text, a font may provide alternate glyphs for
+   caseless characters when these features are enabled but when a user agent
+   simulates small capitals, it must not attempt to simulate alternates for
+   codepoints which are considered caseless.
+
+  <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
+   characters with small-caps, all-small-caps enabled" class=hires
+   src=small-capitals-variations.png width=418px>
+   <p class=caption>Caseless characters with small-caps, all-small-caps
+    enabled
+  </div>
+
+  <p>If either ‘<a href="#petite-caps"><code
    class=property>petite-caps</code></a>’ or ‘<a
    href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
    is specified for a font that doesn't support these features, the property
    behaves as if ‘<a href="#small-caps"><code
    class=property>small-caps</code></a>’ or ‘<a
    href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
-   respectively, had been specified. If ‘<a href="#titling-caps"><code
-   class=property>titling-caps</code></a>’ is specified with a font that
-   does not support these features, this property has no visible effect. For
+   respectively, had been specified. If ‘<a href="#unicase"><code
+   class=property>unicase</code></a>’ is specified for a font that doesn't
+   support that feature, the property behaves as if ‘<a
+   href="#small-caps"><code class=property>small-caps</code></a>’ was
+   applied only to lowercased uppercase letters. If ‘<a
+   href="#titling-caps"><code class=property>titling-caps</code></a>’ is
+   specified with a font that does not support this feature, this property
+   has no visible effect. When simulated small capital glyphs are used, for
    scripts that lack uppercase and lowercase letters, ‘<a
    href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
    href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
@@ -3657,6 +3687,22 @@ <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
    href="#unicase"><code class=property>unicase</code></a>’ have no visible
    effect.
 
+  <p>When casing transforms are used to simulate small capitals, the casing
+   transformations should match those used for the <span
+   class=property>‘<code class=property>text-transform</code>’</span>
+   property.
+
+  <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
+   replace glyphs in a small-caps font so that the text appears in all
+   uppercase letters.
+
+  <div class=figure style="padding: 0; margin: auto;"><img alt="using
+   all-small-caps in acronym-laden text" class=hires
+   src=acronym-laden-text.png width=596px>
+   <p class=caption>Using small capitals to improve readability in
+    acronym-laden text
+  </div>
+
   <div class=example>
    <p>Quotes rendered italicised, with small-caps on the first line:</p>
 
@@ -3666,10 +3712,6 @@ <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
 &lt;blockquote><a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/0036.html" style="text-decoration: none">I'll be honor-bound to slap them like a haddock.</a>&lt;/blockquote>
 </pre>
   </div>
-
-  <p>Insofar as this property causes text to be transformed to uppercase, the
-   same considerations as for <span class=property>‘<code
-   class=property>text-transform</code>’</span> apply.</p>
   <!-- prop: font-variant-numeric -->
 
   <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
@@ -4376,7 +4418,7 @@ <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
       swash(&lt;feature-value-name&gt;) ||
       ornaments(&lt;feature-value-name&gt;) ||
       annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
-      | petite-caps | all-petite-caps | titling-caps | unicase ] ||
+      | petite-caps | all-petite-caps | unicase | titling-caps ] ||
       &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
       &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
       &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
@@ -5019,33 +5061,14 @@ <h2 class=no-num id=font-feature-values-DOM>Appendix B: DOM Interfaces</h2>
   <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
 
   <h3 class=no-num id=recent-changes> Changes from the <a
-   href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/">October 2011 CSS3
+   href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/">August 2012 CSS3
    Fonts Working Draft</a></h3>
 
   <p>Major changes include:
 
   <ul>
-   <li>Based on TPAC resolution, same-origin restriction is normative
-
-   <li>Added parameter specifics for using CORS with font loads
-
-   <li>Revised fallback handling of subscript/superscript variants
-
-   <li>Switched to using CSS3 Values and Units hash notation for
-    comma-delimited lists
-
-   <li>Reworked font-family syntax to be clearer about the use of keywords in
-    unquoted font family names
-
-   <li>Tightened the syntax of font-feature-settings to only allow
-    four-character tags
-
-   <li>Added missing definitions of default values for some properties
-
-   <li>Reworked description of default features and added ‘<code
-    class=property>none</code>’ value for ‘<a
-    href="#propdef-font-variant-ligatures"><code
-    class=property>font-variant-ligatures</code></a>’
+   <li>Tightened description and fixed errors in description of
+    font-variant-caps
   </ul>
 
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
@@ -5811,7 +5834,7 @@ <h2 class=no-num id=property-index>Property index</h2>
       swash(&lt;feature-value-name&gt;) ||
       ornaments(&lt;feature-value-name&gt;) ||
       annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
-      | petite-caps | all-petite-caps | titling-caps | unicase ] ||
+      | petite-caps | all-petite-caps | unicase | titling-caps ] ||
       &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
       &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
       &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
@@ -5853,7 +5876,7 @@ <h2 class=no-num id=property-index>Property index</h2>
       href="#propdef-font-variant-caps">font-variant-caps</a>
 
      <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
-      | titling-caps | unicase
+      | unicase | titling-caps
 
      <td>normal
 
@@ -6009,7 +6032,7 @@ <h2 class=no-num id=property-index>Property index</h2>
       swash(&lt;feature-value-name&gt;) ||
       ornaments(&lt;feature-value-name&gt;) ||
       annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
-      | petite-caps | all-petite-caps | titling-caps | unicase ] ||
+      | petite-caps | all-petite-caps | unicase | titling-caps ] ||
       &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
       &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
       &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
@@ -6039,6 +6062,19 @@ <h2 class=no-num id=property-index>Property index</h2>
      <td>U+0-10FFFF
   </table>
   <!--end-descriptors-->
+  <script type="text/javascript">
+window.onload = function () {
+  if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
+  var i, hiresElements = document.getElementsByClassName("hires");
+  for (i = 0; i < hiresElements.length; i++) {
+    var h = hiresElements[i];
+    if (h.tagName != "IMG") continue;
+    var src = h.getAttribute("src");
+    var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
+    h.src = src2x;
+  }
+}
+</script>
 </html>
 <!-- Keep this comment at the end of the file
 Local variables: