[css-text-decor] Add more explanations to undefinedness of text decoration positions.

Author: fantasai

css-text-decor/Overview.html

@@ -10,7 +10,7 @@
    rel=dcterms.rights>
   <meta content="CSS Text Decoration Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-06-10 name=dcterms.date>
+  <meta content=2013-07-10 name=dcterms.date>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Koji Ishii" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
@@ -30,13 +30,13 @@
    <h1 class=p-name>CSS Text Decoration Module Level 3</h1>
 
    <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft <span
-    class=dt-updated><span class=value-title title=20130610>10 June
+    class=dt-updated><span class=value-title title=20130710>10 July
     2013</span></span></h2>
 
    <dl>
     <dt>This version:</dt>
     <!--  
-    <dd><a class="u-url" href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130610/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130610/</a></dd>
+    <dd><a class="u-url" href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130710/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130710/</a></dd>
   -->
 
     <dd><a class=u-url
@@ -870,7 +870,7 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>auto | alphabetic | [ under || [ left | right ] ]
+     <td>auto | [ under || [ left | right ] ]
 
     <tr>
      <th>Initial:
@@ -933,30 +933,22 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
 
    <dd>The user agent may use any algorithm to determine the underline's
     position; however it must be placed at or under the alphabetic baseline.
-    <p class=note>It is suggested that the underline position be ‘<code
-     class=css>alphabetic</code>’ unless it crosses either subscripted (or
-     otherwise lowered) text, or it affects characters from Asian scripts
-     such as Han or Tibetan, for which an alphabetic underline is too high:
-     in such cases, aligning to the em box edge as described for ‘<code
-     class=css>under</code>’ is more appropriate.
-
-    <p class=issue>See also
-     http://lists.w3.org/Archives/Public/www-style/2010Dec/0409.html
-
-   <dt><dfn id=underline-alphabetic
-    title="text-underline-position: alphabetic">‘<code
-    class=css>alphabetic</code>’</dfn>
-
-   <dd>The underline is positioned relative to the alphabetic baseline. In
-    this case the underline is likely to cross some descenders.
+    <p class=note>It is suggested that the default underline position be
+     close to the alphabetic baseline, unless that would either cross
+     subscripted (or otherwise lowered) text or draw over glyphs from Asian
+     scripts such as Han or Tibetan for which an alphabetic underline is too
+     high: in such cases, shifting the underline lower or aligning to the em
+     box edge as described for ‘<code class=css>under</code>’ may be more
+     appropriate.
+
     <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>‘<a href="#underline-alphabetic"><code
-      class=css>text-underline-position: alphabetic</code></a>’
+     <p class=caption>A typical “alphabetic” underline is positioned just
+      below the alphabetic baseline
     </div>
 
    <dt><dfn id=underline-under
@@ -965,8 +957,8 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
 
    <dd>The underline is positioned <i>under</i> the element's text content.
     In this case the underline usually does not cross the descenders. (This
-    is sometimes called "accounting" underline.) This value can be combined
-    with ‘<code class=css>left</code>’ or ‘<code
+    is sometimes called “accounting” underline.) This value can be
+    combined with ‘<code class=css>left</code>’ or ‘<code
     class=css>right</code>’ if a particular side is preferred in vertical
     writing modes.
     <div class=figure>
@@ -1040,9 +1032,67 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
   </div>
 
   <p>The exact position and thickness of line decorations is UA-defined in
-   this level. However, the UA must use a single thickness and position on
-   each line for the decorations deriving from a single <a
-   href="#decorating-box"><i>decorating box</i></a>. <!--
+   this level. However, for underlines and overlines the UA must use a single
+   thickness and position on each line for the decorations deriving from a
+   single <a href="#decorating-box"><i>decorating box</i></a>.
+
+  <div class=figure>
+   <p><img
+    alt="A single underline drawn under varying font sizes and vertical positions must be a single line."
+    src=underline-single.png> vs. <img
+    alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect."
+    src=underline-broken.png>
+
+   <p class=caption>Correct and incorrect rendering of
+    <code>&lt;u>A&lt;sup>B&lt;/sup>&lt;big>C&lt;/big>D&lt;/u></code>
+  </div>
+
+  <div class=note>
+   <p>Note, since line decorations can span elements with varying font sizes
+    and vertical alignments, the best position for a line decoration is not
+    necessarily the ideal position dictated by the <a
+    href="#decorating-box"><i>decorating box</i></a>. For example, an
+    overline positioned to a small font will effectively become a
+    line-through if the element contains text in a significantly larger
+    font-size. Even for underlines, if the text is not aligned to the
+    alphabetic baseline (for example, in vertical typesetting styles, text is
+    aligned to the central baseline by default) an underline will cut through
+    descendant text of a larger font-size.
+
+   <div class=figure>
+    <p><img alt="" src=leftline-cross.png>
+   </div>
+  </div>
+
+  <p>UAs <em>must</em> adjust line positions to match the shifted metrics of
+   <a href="#decorating-box"><i>decorating boxes</i></a> positioned with
+   ‘<code class=property>vertical-align</code>’ <a href="#CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> or subscripted/superscripted
+   via ‘<code class=property>font-variant-position</code>’ <a
+   href="#CSS3-FONTS" rel=biblioentry>[CSS3-FONTS]<!--{{!CSS3-FONTS}}--></a>,
+   but <em>must not</em> adjust the line position or thickness in response to
+   descendants of a <a href="#decorating-box"><i>decorating box</i></a> that
+   are so styled. This allows superscripts and subscripts to be properly
+   decorated (underlined, struck through, etc.) but prevents them from
+   distorting or breaking the positioning of such decorations on their
+   ancestors.
+
+  <div class=figure>
+   <p><img
+    alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript,                  whereas an underline for the entire text is drawn at the appropriate position for full-size text."
+    src=underline-superscript.png>
+
+   <p class=caption>Example of underline applied to superscripted text vs.
+    underline applied to text containing a superscript
+    <!-- illustration code, for future alterations
+      <!DOCTYPE html>
+      <style>html { font: 2em Sawasdee; } big { font-size: 2em; }</style>
+      <u><span>A<sup>B</sup><big>C</big>D</span></u>
+      <u>A</u><sup><u>B</u></sup><big><u>C</u></big><u>D</u>
+      <u style='font-weight: bold'>1<sup><u>st</u></sup></u>
+    -->
+  </div>
+  <!--
 <h3 id="line-position">
 Determining the Position and Thickness of Line Decorations</h3>
 
@@ -1136,9 +1186,9 @@ <h3 id="line-position">
 -->
 
   <p>Some font formats (such as OpenType) can offer information about the
-   appropriate position of an underline. The UA should use such information
-   (such as the underline thickness, or appropriate alphabetic alignment)
-   from the font wherever appropriate. The same applies to line throughs.
+   appropriate position of a line decoration. The UA should use such
+   information (such as the underline thickness, or appropriate alphabetic
+   alignment) from the font wherever appropriate.
 
   <p class=note>Typically, OpenType font metrics give the position of an
    ‘<code class=css>alphabetic</code>’ underline; in some cases
@@ -1955,6 +2005,16 @@ <h3 class=no-num id=normative-ref>Normative references</h3>
    </dd>
    <!---->
 
+   <dt id=CSS3-FONTS>[CSS3-FONTS]
+
+   <dd>John Daggett. <a
+    href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/"><cite>CSS Fonts
+    Module Level 3.</cite></a> 12 February 2013. W3C Working Draft. (Work in
+    progress.) URL: <a
+    href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a>
+   </dd>
+   <!---->
+
    <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
 
    <dd>Elika J. Etemad; Koji Ishii. <a
@@ -2014,16 +2074,6 @@ <h3 class=no-num id=informative-ref>Informative references</h3>
    </dd>
    <!---->
 
-   <dt id=CSS3-FONTS>[CSS3-FONTS]
-
-   <dd>John Daggett. <a
-    href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/"><cite>CSS Fonts
-    Module Level 3.</cite></a> 12 February 2013. W3C Working Draft. (Work in
-    progress.) URL: <a
-    href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a>
-   </dd>
-   <!---->
-
    <dt id=CSS3COLOR>[CSS3COLOR]
 
    <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a

css-text-decor/Overview.src.html

@@ -552,7 +552,7 @@ <h3 id="text-underline-position-property">
       <td><dfn>text-underline-position</dfn>
     <tr>
       <th><a href="#values">Value</a>:
-      <td>auto | alphabetic | [ under || [ left | right ] ]
+      <td>auto | [ under || [ left | right ] ]
 
     <tr>
       <th>Initial:
@@ -598,16 +598,14 @@ <h3 id="text-underline-position-property">
     <dd>The user agent may use any algorithm to determine the
       underline's position; however it must be placed at or under
       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
-      scripts such as Han or Tibetan, for which an alphabetic
-      underline is too high: in such cases, aligning to the em box
-      edge as described for ''under'' is more appropriate.
-      <p class="issue">See also http://lists.w3.org/Archives/Public/www-style/2010Dec/0409.html
-    <dt><dfn id="underline-alphabetic" title="text-underline-position: alphabetic">''alphabetic''</dfn></dt>
-    <dd>The underline is positioned relative to the alphabetic baseline. In
-      this case the underline is likely to cross some descenders.
+      <p class="note">It is suggested that the default underline position
+      be close to the alphabetic baseline,
+      unless that would either cross subscripted (or otherwise lowered) text
+      or draw over glyphs from Asian scripts such as Han or Tibetan
+      for which an alphabetic underline is too high:
+      in such cases, shifting the underline lower
+      or aligning to the em box edge as described for ''under''
+      may be more appropriate.
       <div class="figure">
         <p><img title="text-underline-position: alphabetic"
             alt="In a typical Latin font, the underline is positioned slightly
@@ -616,12 +614,12 @@ <h3 id="text-underline-position-property">
                  descenders such as the stem of a 'p'."
             src="underline-position-alphabetic.png"
             >
-        <p class="caption">''text-underline-position: alphabetic''</p>
+        <p class="caption">A typical “alphabetic” underline is positioned just below the alphabetic baseline
       </div>
     <dt><dfn id="underline-under" title="text-underline-position: under">''under''</dfn></dt>
     <dd>The underline is positioned <i>under</i> the element's text content.
       In this case the underline usually does not cross the descenders.
-      (This is sometimes called "accounting" underline.)
+      (This is sometimes called “accounting” underline.)
       This value can be combined with ''left'' or ''right''
       if a particular side is preferred in vertical writing modes.
       <div class="figure">
@@ -683,9 +681,54 @@ <h3 id="text-underline-position-property">
   </div>
 
   <p>The exact position and thickness of line decorations is UA-defined in this level.
-    However, the UA must use a single thickness and position on each line
+    However, for underlines and overlines
+    the UA must use a single thickness and position on each line
     for the decorations deriving from a single <i>decorating box</i>.
 
+  <div class="figure">
+    <p><img src="underline-single.png"
+            alt="A single underline drawn under varying font sizes and vertical positions must be a single line.">
+       vs.
+       <img src="underline-broken.png"
+            alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect.">
+    <p class="caption">Correct and incorrect rendering of <code>&lt;u>A&lt;sup>B&lt;/sup>&lt;big>C&lt;/big>D&lt;/u></code>
+  </div>
+
+  <div class="note">
+    <p>Note, since line decorations can span elements with varying font sizes and
+    vertical alignments, the best position for a line decoration is not
+    necessarily the ideal position dictated by the <i>decorating box</i>.
+    For example, an overline positioned to a small font
+    will effectively become a line-through if the element contains text in a significantly larger font-size.
+    Even for underlines, if the text is not aligned to the alphabetic baseline
+    (for example, in vertical typesetting styles, text is aligned to the central baseline by default)
+    an underline will cut through descendant text of a larger font-size.
+    <div class="figure">
+      <p><img src="leftline-cross.png" alt="">
+    </div>
+  </div>
+
+  <p>UAs <em>must</em> adjust line positions to match the shifted metrics of <i>decorating boxes</i> positioned with 'vertical-align' [[!CSS21]]
+    or subscripted/superscripted via 'font-variant-position' [[!CSS3-FONTS]],
+    but <em>must not</em> adjust the line position or thickness in response to descendants of a <i>decorating box</i> that are so styled.
+    This allows superscripts and subscripts to be properly decorated
+    (underlined, struck through, etc.)
+    but prevents them from distorting or breaking the positioning of such decorations on their ancestors.
+
+  <div class="figure">
+    <p><img src="underline-superscript.png"
+            alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript,
+                 whereas an underline for the entire text is drawn at the appropriate position for full-size text.">
+    <p class="caption">Example of underline applied to superscripted text vs. underline applied to text containing a superscript
+    <!-- illustration code, for future alterations
+      <!DOCTYPE html>
+      <style>html { font: 2em Sawasdee; } big { font-size: 2em; }</style>
+      <u><span>A<sup>B</sup><big>C</big>D</span></u>
+      <u>A</u><sup><u>B</u></sup><big><u>C</u></big><u>D</u>
+      <u style='font-weight: bold'>1<sup><u>st</u></sup></u>
+    -->
+  </div>
+
 <!--
 <h3 id="line-position">
 Determining the Position and Thickness of Line Decorations</h3>
@@ -779,10 +822,9 @@ <h3 id="line-position">
   </div>
 -->
   <p>Some font formats (such as OpenType) can offer information
-    about the appropriate position of an underline.
+    about the appropriate position of a line decoration.
     The UA should use such information (such as the underline thickness,
     or appropriate alphabetic alignment) from the font wherever appropriate.
-    The same applies to line throughs.
 
   <p class="note">Typically, OpenType font metrics give the position of an ''alphabetic'' underline;
     in some cases (especially in CJK fonts), it gives the position of a ''under left'' underline.