W3C home > Mailing lists > Public > public-css-commits@w3.org > January 2012

csswg/css3-text Overview.html,1.209,1.210 Overview.src.html,1.308,1.309

From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 13 Jan 2012 02:00:10 +0000
To: public-css-commits@w3.org
Message-Id: <E1RlWR9-0007T9-08@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-text
In directory hutz:/tmp/cvs-serv28688

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Tweak text-underline-position syntax to be more friendly to non-Far-East users. Add examples. Shift around images and add better alt text.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-text/Overview.html,v
retrieving revision 1.209
retrieving revision 1.210
diff -u -d -r1.209 -r1.210
--- Overview.html	12 Jan 2012 23:36:47 -0000	1.209
+++ Overview.html	13 Jan 2012 02:00:08 -0000	1.210
@@ -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 @@
     <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 @@
    <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 @@
 
    <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">
 
-   <dt><dfn id=below-left>&lsquo;<code class=css>below
-    left</code>&rsquo;</dfn>
+     <p class=caption>&lsquo;<code class=css>text-underline-position:
+      alphabetic</code>&rsquo;</p>
+    </div>
 
-   <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">
 
-   <dt><dfn id=below-right>&lsquo;<code class=css>below
-    right</code>&rsquo;</dfn>
+     <p class=caption>&lsquo;<code class=css>text-underline-position:
+      below</code>&rsquo;</p>
+    </div>
 
-   <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.
+    <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>
+
+   <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.
+
+   <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 @@
      <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 @@
 
    <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 @@
     <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 @@
 <!-- -->/* 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 @@
     <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 @@
      <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
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-text/Overview.src.html,v
retrieving revision 1.308
retrieving revision 1.309
diff -u -d -r1.308 -r1.309
--- Overview.src.html	12 Jan 2012 23:36:47 -0000	1.308
+++ Overview.src.html	13 Jan 2012 02:00:08 -0000	1.309
@@ -2727,7 +2727,7 @@
           </tr>
           <tr>
             <th><a href="#values">Value</a>:
-            <td>auto | alphabetic | below && left | below && right
+            <td>auto | alphabetic | [ below || [ left | right ] ]
             </td>
           </tr>
           <tr>
@@ -2764,7 +2764,8 @@
       <dl>
         <dt><dfn>''auto''</dfn></dt>
         <dd>The user agent may use any algorithm to determine the
-          underline's position.
+          underline's position; however it must be placed at or below
+          the alphabetic baseline.
           <p class="note">It is suggested that the underline position
           be ''alphabetic'' unless it crosses either subscripted (or
           otherwise lowered) text, or it affects characters from Asian
@@ -2773,11 +2774,22 @@
           edge as described for ''below left'' is more appropriate.
         <dt><dfn>''alphabetic''</dfn></dt>
         <dd>The underline is positioned relative to the alphabetic baseline. In
-          this case the underline is likely to cross some descenders.</dd>
-        <dt><dfn>''below left''</dfn></dt>
-        <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.)
+          this case the underline is likely to cross some descenders.
+          <div class="figure">
+            <p><img title="text-underline-position: alphabetic"
+                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"
+                />
+            <p class="caption">''text-underline-position: alphabetic''</p>
+          </div>
+        <dt><dfn>''below''</dfn></dt>
+        <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.
@@ -2786,56 +2798,74 @@
           when making this adjustment.
           (Note that images that are not affected by the underline per
           'text-decoration-skip' will not affect the position of the
-          underline.)</dd>
-        <dt><dfn>''below right''</dfn></dt>
-        <dd>In horizontal typographic mode, this value is equivalent to
-          ''below left''. In vertical typographic mode, the underline is
-          aligned as for ''below left'', 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.</dd>
+          underline.)
+          <div class="figure">
+            <p><img title="text-underline-position: below"
+                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"
+                />
+            <p class="caption">''text-underline-position: below''</p>
+          </div>
+          <div class="example">
+            <p>Because 'text-underline-position' inherits, and is not reset
+              by the 'text-decoration' shorthand, the following example
+              switches the document to use ''below'' 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>''left''</dfn></dt>
+        <dd>In vertical typographic modes, the underline is aligned as for
+          ''below'', on the left edge of the text.</dd>
+        <dt><dfn>''right''</dfn></dt>
+        <dd>In vertical typographic modes, the underline is aligned as for
+          ''below'', 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.</dd>
       </dl>
 
+      <p>If ''below'' is specified alone, ''left'' is also implied.
+        If ''left'' or ''right'' is specified alone, ''below'' is also
+        implied.
+
       <div class="figure" class="data" id="fig-text-underline-position">
         <table>
           <tr>
             <td>
-              <img
-                alt="text-underline-position: alphabetic"
-                src="underline-position-alphabetic.png"
-                />
-            </td>
-            <td rowspan="3">
-              <img
-                alt="text-underline-position: left"
+              <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'
+                        places the underline on the left side of the text."
+                title="text-underline-position: left"
                 src="underline-position-left.png"
                 />
             </td>
-            <td rowspan="3">
-              <img
-                alt="text-underline-position: right"
-                src="underline-position-right.png"
-                />
-            </td>
-          </tr>
-          <tr>
-            <td>''alphabetic''</td>
-          </tr>
-          <tr>
             <td>
-              <img
-                alt="text-underline-position: below"
-                src="underline-position-below.png"
+              <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'
+                        places the underline on the right side of the text."
+                title="text-underline-position: right"
+                src="underline-position-right.png"
                 />
             </td>
           </tr>
           <tr>
-            <td>''below''</td>
             <td>''left''</td>
             <td>''right''</td>
           </tr>
         </table>
-        <p class="caption">'text-underline-position' values</p>
+        <p class="caption">In vertical typographic modes, the 'text-underline-position'
+          values ''left'' and ''right'' allow placing the underline on either
+          side of the text. (In horizontal typographic modes, both values are
+          treated as ''below''.)</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">
@@ -3028,7 +3058,7 @@
       </tbody>
     </table>
 
-    <p>This property describes the foreground color of the emphasis marks.</p>
+    <p>This property specifies the foreground color of the emphasis marks.</p>
 
     <h4 id="text-emphasis">
       Emphasis Mark Shorthand: the 'text-emphasis' property</h4>
@@ -3210,7 +3240,7 @@
         </tr>
         <tr>
           <th><a href="#values">Value</a>:
-          <td>none | [ &lt;length>{2,3} && &gt;color>? ]#
+          <td>none | [ &lt;length>{2,3} && &lt;color>? ]#
         </tr>
         <tr>
           <th>Initial:</th>
@@ -3505,6 +3535,11 @@
 <!-- -->/* 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>
     <p class="issue">If you find any issues, recommendations to add, or corrections,
Received on Friday, 13 January 2012 02:02:20 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:49 UTC