new font-size-adjust explanation

Author: John Daggett

css3-fonts/Fonts.html

@@ -79,7 +79,7 @@
 
    <h1 id=css-fonts>CSS Fonts Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus>Editor's Draft 10 June 2008</h2>
+   <h2 class="no-num no-toc" id=longstatus>Editor's Draft 11 June 2008</h2>
 
    <dl id=authors>
     <dt>This version:
@@ -1356,32 +1356,74 @@ <h3 id=relative><span class=secno>3.7 </span>Relative sizing: the &lsquo;<a
      <td>hmmmm
   </table>
 
-  <p class=issue>Isn't there a better way to specify "preserve x-heights"
-   instead of forcing authors to calculate relative differences between font
-   aspect ratios?!?
+  <p>For any given font size, the apparent size and legibility often varies
+   due to stylistic differences. For scripts such as Latin or Cyrillic that
+   distinguish between upper and lowercase letters, at small sizes one factor
+   that strongly determines legibility is the relative height of lowercase
+   letters compared to their uppercase counterparts. This is commonly
+   referred to as the <a class=index-def href="#aspect0" id=aspect
+   title="aspect value"><dfn id=aspect0>aspect value</dfn></a>. Precisely
+   defined, it is equal to the x-height of a font divided by the font size.
+
+  <p>In cases where font fallback occurs, fallback fonts may not share the
+   same aspect ratio as the desired font family and will thus appear less
+   readable. The font-size-adjust property is used to attempt to preserve the
+   readability of text when font fallback occurs. It does this by adjusting
+   the font-size so that the x-height of the fallback font matches the
+   x-height of the intended font.
 
-  <p>In <a name=x23><span class=index-inst id=bicameral0
-   title=bicameral>bicameral</span></a> scripts, the subjective apparent size
-   and legibility of a font are less dependent on their <a class=noxref
-   href="#font-size"><span class=property>&lsquo;<span
-   class=property>font-size</span>&rsquo;</span></a> value than on the value
-   of their <span class=property>&lsquo;<span
-   class=property>x-height</span>&rsquo;</span>, or, more usefully, on the
-   ratio of these two values, called the <a name=x24><span class=index-def
-   id=aspect title="aspect value"><dfn id=aspect0>aspect
-   value</dfn></span></a> (x-height divided by font-size). The higher the
-   aspect value, the more likely it is that a font at smaller sizes will be
-   legible. Inversely, faces with a lower aspect value will become illegible
-   more rapidly below a given threshold size than faces with a higher aspect
-   value. Straightforward font substitution that relies on font size alone
-   may lead to illegible characters.
-
-  <p>For example, the popular font Verdana has an aspect value of 0.58; when
-   Verdana's font size 100 units, its x-height is 58 units. For comparison,
-   Times New Roman has an aspect value of 0.46. Verdana will therefore tend
-   to remain legible at smaller sizes than Times New Roman. Conversely,
-   Verdana will often look &lsquo;<code class=css>too big</code>&rsquo; if
-   substituted for Times New Roman at a chosen size.
+  <div class=example>
+   <p>The style defined below defines Verdana as the desired font family, but
+    if Verdana is not available Futura or Times will be used.</p>
+
+   <pre>p { 
+    font-family: Verdana, Futura, Times; 
+}
+
+&lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
+</pre>
+
+   <p>Verdana has a relatively high aspect ratio, lowercase letters are
+    relatively tall compared to uppercase letters, so at small sizes text
+    appears legible. Times has a lower aspect ratio and so if fallback
+    occurs, the text will be less legible at small sizes than Verdana.</p>
+  </div>
+
+  <p>How text rendered in each of these fonts compares is shown below, the
+   columns show text rendered in Verdana, Futura and Times. The same
+   font-size value is used across cells within each row and red lines are
+   included to show the differences in x-height. In the upper half each row
+   is rendered in the same font-size value. The same is true for the lower
+   half but in this half the font-size-adjust property is also set so that
+   the actual font size is adjusted to perserve the x-height across each row.
+   Note how small text remains relatively legible across each row in the
+   lower half.
+
+  <div class=figure><img src=fontsizeadjust.png>
+   <p class=caption>Small text with and without the use of font-size-adjust</p>
+  </div>
+  <!--
+<p>In <a name="x23"><span class="index-inst" title="bicameral">bicameral</span></a>
+scripts, the subjective apparent size and legibility of a font are
+less dependent on their <a href="#font-size" class="noxref"><span
+class="property">'font-size'</span></a> value than on the value
+of their <span class="property">'x-height'</span>, or, more
+usefully, on the ratio of these two values, called the <a name="x24"><span
+class="index-def" title="aspect value"><dfn>aspect value</dfn></span></a>
+(x-height divided by font-size). The higher the aspect value, the more
+likely it is that a font at smaller sizes will be legible. Inversely,
+faces with a lower aspect value will become illegible more rapidly
+below a given threshold size than faces with a higher aspect
+value. Straightforward font substitution that relies on font size
+alone may lead to illegible characters.
+
+<p>For example, the popular font Verdana has an aspect value of 0.58;
+when Verdana's font size 100 units, its x-height is 58 units. For
+comparison, Times New Roman has an aspect value of 0.46. Verdana will
+therefore tend to remain legible at smaller sizes than Times New
+Roman. Conversely, Verdana will often look 'too big' if substituted
+for Times New Roman at a chosen size.
+-->
 
   <p>This property allows authors to specify an aspect value for an element
    that will preserve the x-height of the first choice font, whether it is
@@ -1410,48 +1452,50 @@ <h3 id=relative><span class=secno>3.7 </span>Relative sizing: the &lsquo;<a
 </pre>
   </dl>
 
-  <div class=example>
-   <p style=display:none>Example(s):</p>
-
-   <p>For example, if 14px Verdana (with an aspect value of 0.58) was
-    unavailable and an available font had an aspect value of 0.46, the
-    font-size of the substitute would be 14 * (0.58/0.46) = 17.65px. If
-    Verdana is available, no adjustment occurs, as long as its actual aspect
-    value is the same as the hypothetical aspect value provided by the
-    font-size-adjust property.</p>
-  </div>
+  <p>The calculation of the aspect ratio is easily calculated with font data
+   available to user agents but authors can calculate this by experimenting
+   with large-sized text. Given two spans of text with the same font-size
+   value and the font-size-adjust property specified on just one, the two
+   spans will match when the font-size-adjust property is accurate.
 
-  <p>Font size adjustments take place when computing the actual value of <a
-   class=noxref href="#font-size"><span class=property>&lsquo;<span
-   class=property>font-size</span>&rsquo;</span></a>. Since inheritance is
-   based on the computed value, child elements will inherit unadjusted
-   values. Font size adjustments are applied to all fonts used by child
-   elements, substituted or not.
-
-  <p>The first image below shows several typefaces rasterized at a common
-   font size (11pt. at 72 ppi), together with their aspect values. Note that
-   faces with higher aspect values appear larger than those with lower. Faces
-   with very low aspect values are illegible at the size shown.
-
-  <div class=figure><img alt="Comparison of 12 point fonts" height=720
-   src=font-adjust-a.gif width=450>
-   <p class=caption>11pt text with various fonts</p>
-  </div>
+  <p>Example of experimentally determining the aspect ratio.
 
-  <p>The next image shows the results of <a class=noxref
-   href="#font-size-adjust"><span class=property>&lsquo;<span
-   class=property>font-size-adjust</span>&rsquo;</span></a> where Verdana has
-   been taken as the"first choice", together with the scaling factor applied.
-   As adjusted, the apparent sizes are nearly linear across faces, though the
-   actual (em) sizes vary by more than 100%. Note that <a class=noxref
-   href="#font-size-adjust"><span class=property>&lsquo;<span
-   class=property>font-size-adjust</span>&rsquo;</span></a> tends to
-   stabilize the horizontal metrics of lines, as well.
+  <p class=issue>How does inheritance work for this? This doesn't affect
+   computed font-size value.</p>
+  <!--
 
-  <div class=figure><img alt="Comparison of font-adjusted fonts" height=720
-   src=font-adjust-b.gif width=450>
-   <p class=caption>11pt text with various fonts, adjusted font size</p>
-  </div>
+<div class="example"><P style="display:none">Example(s):</P>
+<p>For example, if 14px Verdana (with an aspect value of 0.58) was
+unavailable and an available font had an aspect value of 0.46, the
+font-size of the substitute would be 14 * (0.58/0.46) = 17.65px. If Verdana is 
+available, no adjustment occurs, as long as its actual aspect value is the same 
+as the hypothetical aspect value provided by the font-size-adjust property.</div>
+
+
+<p>Font size adjustments take place when computing the actual value of <a href="#font-size" class="noxref"><span
+class="property">'font-size'</span></a>. Since inheritance is
+based on the computed value,
+child elements will inherit unadjusted values. Font size adjustments are applied 
+to all fonts used by child elements, substituted or not.<p>The first image below shows several typefaces rasterized at a
+common font size (11pt. at 72 ppi), together with their aspect
+values. Note that faces with higher aspect values appear larger than
+those with lower. Faces with very low aspect values are illegible at
+the size shown.</p>
+
+<div class="figure"><img src="font-adjust-a.gif" alt="Comparison of 12 point fonts" width="450" height="720">
+<p class="caption">11pt text with various fonts</p></div>
+
+<p>The next image shows the results of <a href="#font-size-adjust" class="noxref"><span
+class="property">'font-size-adjust'</span></a> where Verdana has
+been taken as the"first choice", together with the scaling factor applied.
+As adjusted, the apparent sizes are nearly linear across faces, though the
+actual (em) sizes vary by more than 100%. Note that <a href="#font-size-adjust" class="noxref"><span
+class="property">'font-size-adjust'</span></a> 
+tends to stabilize the horizontal metrics of lines, as well.
+
+<div class="figure"><img src="font-adjust-b.gif" alt="Comparison of font-adjusted fonts" width="450" height="720">
+<p class="caption">11pt text with various fonts, adjusted font size</p></div>
+-->
   <!-- prop: font -->
 
   <h3 id=shorthand><span class=secno>3.8 </span>Shorthand font property: the
@@ -2623,7 +2667,7 @@ <h2 class=no-num id=index>Index</h2>
 
    <li>at-rules, <a href="#at-rule" title=at-rules>#</a>
 
-   <li>bicameral, <a href="#bicameral0" title=bicameral>#</a>
+   <li>bicameral
     <ul>
      <li>definition of, <a href="#bicameral" title="bicameral definition
       of"><strong>#</strong></a>