Tweak text-underline-position syntax to be more friendly to non-Far-East users. Add examples. Shift around images and add better alt text.

Author: fantasai

css3-text/Overview.html

@@ -32,15 +32,15 @@
 
    <h1>CSS Text Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 January
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 January
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date: 2012/01/12
-     09:09:41 $ (CVS $Revision$)</a> <!--
-      <dd><a href="http://www.w3.org/TR/2012/WD-css3-text-20120112/">http://www.w3.org/TR/2012/WD-css3-text-20120112/</a></dd>
+     23:36:47 $ (CVS $Revision$)</a> <!--
+      <dd><a href="http://www.w3.org/TR/2012/WD-css3-text-20120113/">http://www.w3.org/TR/2012/WD-css3-text-20120113/</a></dd>
     -->
 
 
@@ -3666,7 +3666,7 @@ <h4 id=text-underline-position><span class=secno>10.1.6. </span> Text
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>auto | alphabetic | below && left | below && right
+     <td>auto | alphabetic | [ below || [ left | right ] ]
 
     <tr>
      <th>Initial:
@@ -3707,7 +3707,7 @@ <h4 id=text-underline-position><span class=secno>10.1.6. </span> Text
    <dt><dfn id=auto2>&lsquo;<code class=css>auto</code>&rsquo;</dfn>
 
    <dd>The user agent may use any algorithm to determine the underline's
-    position.
+    position; however it must be placed at or below the alphabetic baseline.
     <p class=note>It is suggested that the underline position be &lsquo;<code
      class=css>alphabetic</code>&rsquo; unless it crosses either subscripted
      (or otherwise lowered) text, or it affects characters from Asian scripts
@@ -3720,65 +3720,112 @@ <h4 id=text-underline-position><span class=secno>10.1.6. </span> Text
 
    <dd>The underline is positioned relative to the alphabetic baseline. In
     this case the underline is likely to cross some descenders.
+    <div class=figure>
+     <p><img
+      alt="In a typical Latin font, the underline is positioned slightly                      below the alphabetic baseline, leaving a gap between the line                      and the bottom of most Latin letters, but crossing through                      descenders such as the stem of a 'p'."
+      src=underline-position-alphabetic.png
+      title="text-underline-position: alphabetic">
+
+     <p class=caption>&lsquo;<code class=css>text-underline-position:
+      alphabetic</code>&rsquo;</p>
+    </div>
 
-   <dt><dfn id=below-left>&lsquo;<code class=css>below
-    left</code>&rsquo;</dfn>
-
-   <dd>The underline is positioned relative to the under edge of the
-    element's content box. In this case the underline usually does not cross
-    the descenders. (This is sometimes called "accounting" underline.) If the
-    underline affects descendants with a lower content edge, the user agent
-    should shift the underline down further to the lowest underlined content
-    box edge. The user agent may ignore elements with &lsquo;<code
-    class=css>vertical-align</code>&rsquo; values given as lengths,
-    percentages, &lsquo;<code class=css>top</code>&rsquo;, or &lsquo;<code
+   <dt><dfn id=below>&lsquo;<code class=css>below</code>&rsquo;</dfn>
+
+   <dd>In horizontal typographic modes, the underline is positioned relative
+    to the under edge of the element's content box. In this case the
+    underline usually does not cross the descenders. (This is sometimes
+    called "accounting" underline.) If the underline affects descendants with
+    a lower content edge, the user agent should shift the underline down
+    further to the lowest underlined content box edge. The user agent may
+    ignore elements with &lsquo;<code class=css>vertical-align</code>&rsquo;
+    values given as lengths, percentages, &lsquo;<code
+    class=css>top</code>&rsquo;, or &lsquo;<code
     class=css>bottom</code>&rsquo; when making this adjustment. (Note that
     images that are not affected by the underline per &lsquo;<a
     href="#text-decoration-skip0"><code
     class=property>text-decoration-skip</code></a>&rsquo; will not affect the
     position of the underline.)
+    <div class=figure>
+     <p><img
+      alt="In a typical Latin font, the underline is far enough                      below the text that it does not cross the bottom of a 'g'."
+      src=underline-position-below.png
+      title="text-underline-position: below">
+
+     <p class=caption>&lsquo;<code class=css>text-underline-position:
+      below</code>&rsquo;</p>
+    </div>
+
+    <div class=example>
+     <p>Because &lsquo;<a href="#text-underline-position0"><code
+      class=property>text-underline-position</code></a>&rsquo; inherits, and
+      is not reset by the &lsquo;<a href="#text-decoration0"><code
+      class=property>text-decoration</code></a>&rsquo; shorthand, the
+      following example switches the document to use &lsquo;<code
+      class=css>below</code>&rsquo; underlining, which can be more
+      appropriate for writing systems with long, complicated descenders. It
+      is also often useful for mathematical or chemical texts that use many
+      subscripts.
+
+     <pre>:root { text-underline-position: below; }</pre>
+    </div>
+
+   <dt><dfn id=left0>&lsquo;<code class=css>left</code>&rsquo;</dfn>
 
-   <dt><dfn id=below-right>&lsquo;<code class=css>below
-    right</code>&rsquo;</dfn>
+   <dd>In vertical typographic modes, the underline is aligned as for
+    &lsquo;<code class=css>below</code>&rsquo;, on the left edge of the text.
 
-   <dd>In horizontal typographic mode, this value is equivalent to
-    &lsquo;<code class=css>below left</code>&rsquo;. In vertical typographic
-    mode, the underline is aligned as for &lsquo;<code class=css>below
-    left</code>&rsquo;, except it is aligned to the right edge of the text.
-    If this causes the underline to be drawn on the "over" side of the text,
-    then an overline also switches sides and is drawn on the "under" side.
+   <dt><dfn id=right0>&lsquo;<code class=css>right</code>&rsquo;</dfn>
+
+   <dd>In vertical typographic modes, the underline is aligned as for
+    &lsquo;<code class=css>below</code>&rsquo;, except it is aligned to the
+    right edge of the text. If this causes the underline to be drawn on the
+    "over" side of the text, then an overline also switches sides and is
+    drawn on the "under" side.
   </dl>
 
+  <p>If &lsquo;<code class=css>below</code>&rsquo; is specified alone,
+   &lsquo;<code class=css>left</code>&rsquo; is also implied. If &lsquo;<code
+   class=css>left</code>&rsquo; or &lsquo;<code class=css>right</code>&rsquo;
+   is specified alone, &lsquo;<code class=css>below</code>&rsquo; is also
+   implied.
+
   <div class=figure class=data id=fig-text-underline-position>
    <table>
     <tbody>
      <tr>
-      <td> <img alt="text-underline-position: alphabetic"
-       src=underline-position-alphabetic.png>
-
-      <td rowspan=3> <img alt="text-underline-position: left"
-       src=underline-position-left.png>
-
-      <td rowspan=3> <img alt="text-underline-position: right"
-       src=underline-position-right.png>
-
-     <tr>
-      <td>&lsquo;<code class=css>alphabetic</code>&rsquo;
+      <td> <img
+       alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'                         places the underline on the left side of the text."
+       src=underline-position-left.png title="text-underline-position: left">
+       
 
-     <tr>
-      <td> <img alt="text-underline-position: below"
-       src=underline-position-below.png>
+      <td> <img
+       alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'                         places the underline on the right side of the text."
+       src=underline-position-right.png
+       title="text-underline-position: right">
 
      <tr>
-      <td>&lsquo;<code class=css>below</code>&rsquo;
-
       <td>&lsquo;<code class=css>left</code>&rsquo;
 
       <td>&lsquo;<code class=css>right</code>&rsquo;
    </table>
 
-   <p class=caption>&lsquo;<a href="#text-underline-position0"><code
-    class=property>text-underline-position</code></a>&rsquo; values</p>
+   <p class=caption>In vertical typographic modes, the &lsquo;<a
+    href="#text-underline-position0"><code
+    class=property>text-underline-position</code></a>&rsquo; values
+    &lsquo;<code class=css>left</code>&rsquo; and &lsquo;<code
+    class=css>right</code>&rsquo; allow placing the underline on either side
+    of the text. (In horizontal typographic modes, both values are treated as
+    &lsquo;<code class=css>below</code>&rsquo;.)</p>
+  </div>
+
+  <div class=example>
+   <p>The following example styles modern Chinese, Japanese, and Korean texts
+    with the appropriate underline positions in both horizontal and vertical
+    text:
+
+   <pre>:lang(ja), :lang(ko) { text-underline-position: below right; }
+<!--   -->:lang(zh) { text-underline-position: below left; }</pre>
   </div>
 
   <div class=note>
@@ -4025,7 +4072,7 @@ <h4 id=text-emphasis-color><span class=secno>10.2.2. </span> Emphasis Mark
      <td>as specified
   </table>
 
-  <p>This property describes the foreground color of the emphasis marks.
+  <p>This property specifies the foreground color of the emphasis marks.
 
   <h4 id=text-emphasis><span class=secno>10.2.3. </span> Emphasis Mark
    Shorthand: the &lsquo;<a href="#text-emphasis0"><code
@@ -4146,17 +4193,17 @@ <h4 id=text-emphasis-position><span class=secno>10.2.4. </span> Emphasis
 
    <dd>Draw marks over the text in horizontal typographic mode.
 
-   <dt><dfn id=below title="text-emphasis:below">&lsquo;<code
+   <dt><dfn id=below0 title="text-emphasis:below">&lsquo;<code
     class=css>below</code>&rsquo;</dfn>
 
    <dd>Draw marks under the text in horizontal typographic mode.
 
-   <dt><dfn id=right0 title="text-emphasis:right">&lsquo;<code
+   <dt><dfn id=right1 title="text-emphasis:right">&lsquo;<code
     class=css>right</code>&rsquo;</dfn>
 
    <dd>Draw marks to the right of the text in vertical typographic mode.
 
-   <dt><dfn id=left0 title="text-emphasis:left">&lsquo;<code
+   <dt><dfn id=left1 title="text-emphasis:left">&lsquo;<code
     class=css>left</code>&rsquo;</dfn>
 
    <dd>Draw marks to the left of the text in vertical typographic mode.
@@ -4252,7 +4299,7 @@ <h3 id=text-shadow><span class=secno>10.3. </span> Text Shadows: the
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>none | [ &lt;length>{2,3} && &gt;color>? ]#
+     <td>none | [ &lt;length>{2,3} && &lt;color>? ]#
 
     <tr>
      <th>Initial:
@@ -4716,6 +4763,11 @@ <h2 class=no-num id=default-stylesheet>Appendix D: Default UA Stylesheet</h2>
 <!-- -->/* default emphasis mark position is 'below right' for Chinese */
 <!-- -->  text-emphasis-position: below right;
 <!-- -->}
+<!-- -->
+<!-- -->:root:lang(zh), [lang|=zh] {
+<!-- -->/* default underline position is 'below left' for Japanese and Korean */
+<!-- -->  text-underline-position: below right;
+<!-- -->}
 </code></pre>
   </div>
 
@@ -5628,7 +5680,7 @@ <h2 class=no-num id=appendix-h-full-property-index>Appendix H: Full
     <tr>
      <th><a class=property href="#text-shadow0">text-shadow</a>
 
-     <td>none | [ &lt;length>{2,3} && &gt;color>? ]#
+     <td>none | [ &lt;length>{2,3} && &lt;color>? ]#
 
      <td>none
 
@@ -5676,7 +5728,7 @@ <h2 class=no-num id=appendix-h-full-property-index>Appendix H: Full
      <th><a class=property
       href="#text-underline-position0">text-underline-position</a>
 
-     <td>auto | alphabetic | below && left | below && right
+     <td>auto | alphabetic | [ below || [ left | right ] ]
 
      <td>auto