[css3-fonts] add ordinals example

Author: John Daggett

css-fonts/Fonts.html

@@ -4387,11 +4387,6 @@ <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
 
   <div class=featex><img alt="ordinals example" src=ordinals.png></div>
 
-  <p class=note>Although ordinal forms are often the same as superscript
-   forms, they can be different depending upon the typographic traditions
-   used in a given language. In Italian for example, ordinal forms sometimes
-   include an underline in the glyph design.
-
   <dl>
    <dt><dfn id=slashed-zero>slashed-zero</dfn>
 
@@ -4401,6 +4396,34 @@ <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
 
   <div class=featex><img alt="slashed zero example" src=zero.png></div>
 
+  <div class=example>
+   <p>In the case of ‘<a href="#ordinal"><code
+    class=property>ordinal</code></a>’, although ordinal forms are often
+    the same as superscript forms, they are marked up differently.</p>
+
+   <p>For superscripts, the variant property is only applied to the
+    sub-element containing the superscript:</p>
+
+   <pre>
+sup { font-variant-position: super; }
+x&lt;sup&gt;2&lt;/sup&gt;
+</pre>
+
+   <p>For ordinals, the variant property is applied to the entire ordinal
+    number:</p>
+
+   <pre>
+.ordinal { font-variant-numeric: ordinal; }
+&lt;span class="ordinal"&gt;17th&lt;/span&gt;
+</pre>
+
+   <p>In this case only the "th" will appear in ordinal form, the digits will
+    remain unchanged. Depending upon the typographic traditions used in a
+    given language, ordinal forms may differ from superscript forms. In
+    Italian, for example, ordinal forms sometimes include an underline in the
+    design of ordinals.</p>
+  </div>
+
   <div class=example id=steak-marinade>
    <p>A simple flank steak marinade recipe, rendered with automatic fractions
     and old-style numerals:</p>
@@ -5955,6 +5978,8 @@ <h3 class=no-num id=recent-changes> Changes from the <a
    <li>allow user agents to synthesize OpenType <span class=tag>kern</span>
     feature
 
+   <li>add example of ordinals and associated markup
+
    <li>minor editorial cleanups
   </ul>