[css3-fonts] updated styling for font load events section

Author: John Daggett

css3-fonts/Fonts.html

@@ -229,8 +229,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
    <li><a href="#typography-background"><span class=secno>2 </span>Typography
     Background</a>
 
-   <li><a href="#basic-font-props"><span class=secno>3 </span>Basic font
-    properties</a>
+   <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font
+    Properties</a>
     <ul class=toc>
      <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
       family: the font-family property</a>
@@ -262,7 +262,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
     </ul>
 
    <li><a href="#font-resources"><span class=secno>4 </span>Font
-    resources</a>
+    Resources</a>
     <ul class=toc>
      <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
       @font-face rule</a>
@@ -297,7 +297,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
     </ul>
 
    <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
-    matching algorithm</a>
+    Matching Algorithm</a>
     <ul class=toc>
      <li><a href="#font-style-matching"><span class=secno>5.1 </span>Matching
       font styles</a>
@@ -309,8 +309,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
       matching changes since CSS 2.1</a>
     </ul>
 
-   <li><a href="#font-rend-props"><span class=secno>6 </span>Font feature
-    properties</a>
+   <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature
+    Properties</a>
     <ul class=toc>
      <li><a href="#glyph-selection-positioning"><span class=secno>6.1
       </span>Glyph selection and positioning</a>
@@ -357,10 +357,30 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
     </ul>
 
    <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font
-    feature resolution </a>
+    Feature Resolution </a>
+    <ul class=toc>
+     <li><a href="#default-features"><span class=secno>7.1 </span>Default
+      features</a>
+
+     <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature
+      precedence</a>
+
+     <li><a href="#feature-precedence-examples"><span class=secno>7.3
+      </span>Feature precedence examples</a>
+    </ul>
+
+   <li><a href="#font-load-events"><span class=secno>8 </span>Font Load
+    Events</a>
+    <ul class=toc>
+     <li><a href="#document-fontloader"><span class=secno>8.1
+      </span>Extension to the <code>document</code> interface</a>
 
-   <li><a href="#font-load-events"><span class=secno>8 </span>Font load
-    events</a>
+     <li><a href="#fontloader-interface"><span class=secno>8.2 </span>The
+      <code>FontLoader</code> Interface</a>
+
+     <li><a href="#font-load-event-examples"><span class=secno>8.3
+      </span>Font load event examples</a>
+    </ul>
 
    <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
     platform font properties to CSS properties</a>
@@ -523,7 +543,7 @@ <h2 id=typography-background><span class=secno>2 </span>Typography
    see the <a href="#OPENTYPE-FONT-GUIDE"
    rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
 
-  <h2 id=basic-font-props><span class=secno>3 </span>Basic font properties</h2>
+  <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
 
   <p>The particular font face used to render a character is determined by the
    font family and other font properties that apply to a given element. This
@@ -1918,7 +1938,7 @@ <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
 </pre>
   </div>
 
-  <h2 id=font-resources><span class=secno>4 </span>Font resources</h2>
+  <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
 
   <h3 id=font-face-rule><span class=secno>4.1 </span>The @font-face rule</h3>
 
@@ -2742,8 +2762,8 @@ <h4 id=allowing-cross-origin-font-loading><span class=secno>4.8.2
    cross-site downloading of font data using the
    <code>Access-Control-Allow-Origin</code> HTTP header.
 
-  <h2 id=font-matching-algorithm><span class=secno>5 </span>Font matching
-   algorithm</h2>
+  <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
+   Algorithm</h2>
 
   <p>The algorithm below describes how fonts are associated with individual
    runs of text. For each character in the run a font family is chosen and a
@@ -2965,7 +2985,7 @@ <h3 id=font-matching-changes><span class=secno>5.3 </span>Font matching
     Traditional Chinese - and uses the appropriate font.
   </div>
 
-  <h2 id=font-rend-props><span class=secno>6 </span>Font feature properties</h2>
+  <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
 
   <p>Modern font technologies support a variety of advanced typographic and
    language-specific font features. Using these features, a single font can
@@ -4616,8 +4636,8 @@ <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
 
   <p><a id=rendering-considerations></a>
 
-  <h2 id=font-feature-resolution><span class=secno>7 </span>Font feature
-   resolution</h2>
+  <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
+   Resolution</h2>
 
   <p>As described in the previous section, font features can be enabled in a
    variety of ways, either via the use of ‘<a
@@ -4629,6 +4649,8 @@ <h2 id=font-feature-resolution><span class=secno>7 </span>Font feature
    settings is defined below. Features defined via CSS properties are applied
    on top of layout engine default features.
 
+  <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
+
   <p>For OpenType fonts, user agents must enable the default features defined
    in the OpenType documentation for a given script and writing mode.
    Required ligatures, common ligatures and contextual forms must be enabled
@@ -4657,6 +4679,8 @@ <h2 id=font-feature-resolution><span class=secno>7 </span>Font feature
    runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
    must be enabled.
 
+  <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
+
   <p>General and font specific font feature property settings are resolved in
    the order below, in ascending precedence order. This ordering is used to
    construct a combined list of font features that affect a given text run.
@@ -4705,6 +4729,9 @@ <h2 id=font-feature-resolution><span class=secno>7 </span>Font feature
    occur and no attempt is made to synthesize the feature except where
    explicitly noted for specific properties.
 
+  <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
+   precedence examples</h3>
+
   <div class=example>
    <p>With the styles below, numbers are rendered proportionally when used
     within a paragraph but are shown in tabular form within tables of prices:</p>
@@ -4808,27 +4835,28 @@ <h2 id=font-feature-resolution><span class=secno>7 </span>Font feature
     discretionary ligatures.</p>
   </div>
 
-  <h2 id=font-load-events><span class=secno>8 </span>Font load events</h2>
+  <h2 id=font-load-events><span class=secno>8 </span>Font Load Events</h2>
 
   <p>Since fonts defined via @font-face rules are loaded on demand, pages may
    need to know precisely when fonts have completed downloading before
    measuring text elements on the page or to show some form of interim user
    interface state.
 
-  <p>To allow font loading to be tracked explicitly within content the
-   following event target is added to the document of the page:
+  <h3 id=document-fontloader><span class=secno>8.1 </span>Extension to the
+   <code>document</code> interface</h3>
 
-  <dl>
-   <dt><b>IDL Definition</b>
+  <p>To allow font loading to be tracked explicitly within content the
+   following event target is added to the <code>document</code> of the page:
 
-   <dd>
-    <div class=idl-code>
-     <pre>
-partial interface Document {
+  <pre class=idl>partial interface Document {
   readonly attribute FontLoader fontloader;
 };
+</pre>
 
-[Constructor]
+  <h3 id=fontloader-interface><span class=secno>8.2 </span>The
+   <code>FontLoader</code> Interface</h3>
+
+  <pre class=idl>[Constructor]
 interface CSSFontFaceLoadEvent : Event {
   readonly attribute CSSFontFaceRule fontface;
   readonly attribute DOMString error;
@@ -4861,10 +4889,7 @@ <h2 id=font-load-events><span class=secno>8 </span>Font load events</h2>
   // "idle" or "loading"
   readonly attribute FontLoaderReadyState readyState;
 };</pre>
-    </div>
-   </dd>
-   <!-- IDL -->
-  </dl>
+  <!-- IDL -->
 
   <p>When layout determines that a font or a set of fonts defined via
    @font-face rules need to be loaded, the readyState switches from the
@@ -4904,6 +4929,9 @@ <h2 id=font-load-events><span class=secno>8 </span>Font load events</h2>
    authors need to explicitly call this method again to have the callback
    called again.
 
+  <h3 id=font-load-event-examples><span class=secno>8.3 </span>Font load
+   event examples</h3>
+
   <div class=example>
    <p>To show content only after all font loads complete:</p>
 
@@ -5138,6 +5166,8 @@ <h3 class=no-num id=recent-changes> Changes from the <a
    <li>Added ‘<code class=property>auto</code>’ value to ‘<a
     href="#propdef-font-size-adjust"><code
     class=property>font-size-adjust</code></a>’
+
+   <li>Added definition of font load events
   </ul>
 
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>