more tweaks to the font-size-adjust wording

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 11 June 2008</h2>
+   <h2 class="no-num no-toc" id=longstatus>Editor's Draft 12 June 2008</h2>
 
    <dl id=authors>
     <dt>This version:
@@ -1343,7 +1343,7 @@ <h3 id=relative><span class=secno>3.7 </span>Relative sizing: the &lsquo;<a
     <tr>
      <td>Percentages:
 
-     <td>hmmmm
+     <td>N/A
 
     <tr>
      <td>Media:
@@ -1353,7 +1353,7 @@ <h3 id=relative><span class=secno>3.7 </span>Relative sizing: the &lsquo;<a
     <tr>
      <td>Computed&nbsp;value:
 
-     <td>hmmmm
+     <td>as specified
   </table>
 
   <p>For any given font size, the apparent size and legibility often varies
@@ -1400,34 +1400,12 @@ <h3 id=relative><span class=secno>3.7 </span>Relative sizing: the &lsquo;<a
    lower half.
 
   <div class=figure><img src=fontsizeadjust.png>
-   <p class=caption>Small text with and without the use of font-size-adjust</p>
+   <p class=caption>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
-   substituted or not. Values have the following meanings:
+   that will effectively preserve the x-height of the first choice font,
+   whether it is substituted or not. Values have the following meanings:
 
   <dl>
    <dt><strong>none</strong>
@@ -1437,65 +1415,64 @@ <h3 id=relative><span class=secno>3.7 </span>Relative sizing: the &lsquo;<a
    <dt><span class=index-inst id=ltnumbergt
     title="&lt;number&gt;">&lt;number&gt;</span>
 
-   <dd>Specifies the aspect value. The number typically refers to the aspect
-    value of the first choice font. The scaling factor for all fonts is
-    computed according to the following formula:
-    <pre>  y(a/a') = c
+   <dd>Specifies the aspect value used in the calculation below to calculate
+    the adjusted font size:
+    <pre>c  =  ( a / a' ) s 
 </pre>
 
     <p>where:</p>
 
-    <pre>y = 'font-size' actual value
-a  = aspect value as specified by the font-size-adjust property value
-a' = aspect value of actual font
-c = 'font-size' to apply to font
+    <pre>s  =  font-size value
+a  =  aspect value as specified by the font-size-adjust property
+a' =  aspect value of actual font
+c  =  adjusted font-size to use
 </pre>
+
+    <p>This value applies to any font that is selected but in typical usage
+     it should be based on the aspect value of the first font in the
+     font-family list. If this is specified accurately, the (a/a') term in
+     the formula above is effectively 1 for the first font and no adjustment
+     occurs. If the value is specified inaccurately, text rendered using the
+     first font in the family list will display differently in older user
+     agents that don't support font-size-adjust.</p>
   </dl>
 
-  <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>Authors can calculate the aspect value for a given font by comparing
+   spans with the same content but different font-size-adjust properties. If
+   the same font-size is used, the spans will match when the font-size-adjust
+   value is accurate for the given font.
 
-  <p>Example of experimentally determining the aspect ratio.
+  <div class=example>
+   <p>Two spans with borders are used to determine the aspect value of a
+    font. The font-size is the same for both spans but the font-size-adjust
+    property is specified only for the right span. Starting with a value of
+    0.5, the aspect value can be adjusted until the borders around the two
+    letters line up.</p>
+
+   <pre>p {
+    font-family: Futura;
+    font-size: 500px;
+}
 
-  <p class=issue>How does inheritance work for this? This doesn't affect
-   computed font-size value.</p>
-  <!--
+span {
+    border: solid 1px red;
+}
 
-<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>
--->
+.adjust {
+    font-size-adjust: 0.5;
+}
+
+&lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
+</pre>
+
+   <div class=figure><img src=beforefontsizeadjust.png>
+    <p class=caption>Futura with an aspect value of 0.5</p>
+   </div>
+
+   <p>The box on the right is a bit bigger than the one on the left, so the
+    aspect value of this font is something less than 0.5. Adjust the value
+    until the boxes align.</p>
+  </div>
   <!-- prop: font -->
 
   <h3 id=shorthand><span class=secno>3.8 </span>Shorthand font property: the
@@ -2861,7 +2838,7 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>yes
 
-     <td>hmmmm
+     <td>N/A
 
      <td>visual