[css-text-decor] Attempt to clarify underline position calculations.

--HG--
extra : rebase_source : 235927c0c811bf9ec78a9f90e93499177439b2e9

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-04-18 name=dcterms.date>
+  <meta content=2013-05-07 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=20130418>18 April
+    class=dt-updated><span class=value-title title=20130507> 7 May
     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-20130418/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130418/</a></dd>
+    <dd><a class="u-url" href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130507/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130507/</a></dd>
   -->
 
     <dd><a class=u-url
@@ -478,27 +478,25 @@ <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text
    Values have the following meanings:
 
   <dl>
-   <dt><dfn id=lsquononersquo title="text-decoration-line:none">‘<code
+   <dt><dfn id=none title="text-decoration-line:none">‘<code
     class=css>none</code>’</dfn>
 
    <dd>Neither produces nor inhibits text decoration.
 
-   <dt><dfn id=lsquounderlinersquo>‘<code
-    class=css>underline</code>’</dfn>
+   <dt><dfn id=underline>‘<code class=css>underline</code>’</dfn>
 
    <dd>Each line of text is underlined.
 
-   <dt><dfn id=lsquooverlinersquo>‘<code class=css>overline</code>’</dfn>
+   <dt><dfn id=overline>‘<code class=css>overline</code>’</dfn>
 
    <dd>Each line of text has a line over it (i.e. on the opposite side from
     an underline).
 
-   <dt><dfn id=lsquoline-throughrsquo>‘<code
-    class=css>line-through</code>’</dfn>
+   <dt><dfn id=line-through>‘<code class=css>line-through</code>’</dfn>
 
    <dd>Each line of text has a line through the middle.
 
-   <dt><dfn id=lsquoblinkrsquo>‘<code class=css>blink</code>’</dfn>
+   <dt><dfn id=blink>‘<code class=css>blink</code>’</dfn>
 
    <dd> The text blinks (alternates between visible and invisible).
     Conforming user agents may simply not blink the text. Note that not
@@ -780,20 +778,19 @@ <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
    drawn by its ancestors. Values have the following meanings:
 
   <dl>
-   <dt><dfn id=lsquononersquo0 title="text-decoration-skip:none">‘<code
+   <dt><dfn id=none0 title="text-decoration-skip:none">‘<code
     class=css>none</code>’</dfn>
 
    <dd>Skip nothing: text-decoration is drawn for all text content and across
     atomic inline-level boxes.
 
-   <dt><dfn id=lsquoobjectsrsquo
-    title="text-decoration-skip:objects">‘<code
+   <dt><dfn id=objects title="text-decoration-skip:objects">‘<code
     class=css>objects</code>’</dfn>
 
    <dd>Skip this element (its entire margin box) if it is an atomic inline
     (such as an image or inline-block).
 
-   <dt><dfn id=lsquospacesrsquo title="text-decoration-skip:spaces">‘<code
+   <dt><dfn id=spaces title="text-decoration-skip:spaces">‘<code
     class=css>spaces</code>’</dfn>
 
    <dd>Skip all spacing, i.e. all <a href="#character"><i>characters</i></a>
@@ -802,7 +799,7 @@ <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
     characters</i>, plus any adjacent letter-spacing or word-spacing <a
     href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>.
 
-   <dt><dfn id=lsquoinkrsquo title="text-decoration-skip:ink">‘<code
+   <dt><dfn id=ink title="text-decoration-skip:ink">‘<code
     class=css>ink</code>’</dfn>
 
    <dd>Skip over where glyphs are drawn: interrupt the decoration line to let
@@ -817,7 +814,7 @@ <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
      <p class=caption>‘<code class=css>text-decoration-skip: ink</code>’
     </div>
 
-   <dt><dfn id=lsquoedgesrsquo title="text-decoration-skip:edges">‘<code
+   <dt><dfn id=edges title="text-decoration-skip:edges">‘<code
     class=css>edges</code>’</dfn>
 
    <dd>The UA should place the start and end of the line inwards slightly
@@ -835,7 +832,7 @@ <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
       <code>&lt;u>石井&lt;/u>&lt;u>艾俐俐&lt;/u></code>
     </div>
 
-   <dt><dfn id=lsquobox-decorationrsquo
+   <dt><dfn id=box-decoration
     title="text-decoration-skip:box-decoration">‘<code
     class=css>box-decoration</code>’</dfn>
 
@@ -1041,11 +1038,17 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
   <h3 id=line-position><span class=secno>2.7. </span> Determining the
    Position and Thickness of Line Decorations</h3>
 
-  <p>In determining the position of text decoration lines, user agents must
-   consider, per line box, the "ideal" positions of all fragments of in-flow
-   inline descendants of the <a href="#decorating-box"><i>decorating
-   box</i></a> on that line as follows (treating <a
-   href="#underline-left"><i>over</i>-positioned underlines</a> as
+  <p>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 decorating element. In
+   determining the position of text decoration lines, user agents must
+   consider, per line box, the “ideal” positions of such line decorations
+   per fragment of the <a href="#decorating-box"><i>decorating
+   box</i></a>—or its in-flow inline descendant—that draws the text
+   decoration.
+
+  <p> The line decoration positions are then calculated as follows (treating
+   <a href="#underline-left"><i>over</i>-positioned underlines</a> as
    <i>over</i> lines and <a href="#underline-left"><i>under</i>-positioned
    overlines</a> as <i>under</i> lines):
 
@@ -1061,14 +1064,16 @@ <h3 id=line-position><span class=secno>2.7. </span> Determining the
 
    <dt><a href="#underline-alphabetic"><i>alphabetic</i></a> underlines
 
-   <dd> Calculate an average of the ideal underlining offsets (from their
-    respective alphabetic baselines) of the considered fragments, assigning
-    any inline with non-initial ‘<code
-    class=property>vertical-align</code>’ the ideal offset of its parent.
-    Align the line decoration to the lowest alphabetic baseline considered,
-    with that calculated offset. (Alphabetic baselines can differ between
-    ‘<code class=css>baseline</code>’-aligned boxes if the dominant
-    baseline is non-alphabetic.)
+   <dd>
+    <p>The alphabetic underline position is calculated by taking the ideal
+     offset (from the alphabetic baseline) of each considered fragment,
+     averaging those, and then using the lowest alphabetic baseline to
+     actually position the line. (Alphabetic baselines can differ between
+     ‘<code class=css>baseline</code>’-aligned boxes if the dominant
+     baseline is non-alphabetic.) To prevent superscripts and subscripts from
+     throwing this position off-kilter, an inline with a non-initial computed
+     ‘<code class=property>vertical-align</code>’ is treated as having
+     the ideal underline position of their parent.
 
    <dt>non-alphabetic <a
     href="http://dev.w3.org/csswg/css3-writing-modes/#under"><i>under</i></a>
@@ -1081,17 +1086,17 @@ <h3 id=line-position><span class=secno>2.7. </span> Determining the
 
    <dt>line-throughs
 
-   <dd> For each set of considered fragments with the same ‘<code
+   <dd> Line-throughs essentially use the same sort of averaging as for
+    alphabetic underlines, but recompute the position when drawing across a
+    descendant with a different computed ‘<code
+    class=property>font-size</code>’. (This ensures that the text remains
+    effectively “crossed out” despite any font size changes.) For each
+    set of considered fragments with the same ‘<code
     class=property>font-size</code>’, compute an ideal position averaged
-    from their direct contents and font metrics, assigning any fragment with
+    from their direct contents and font metrics (assigning any fragment with
     non-initial ‘<code class=property>vertical-align</code>’ the ideal
-    position of its parent. Position the portion of the line across each
-    decorated fragment at that fragment's ideal position. (Essentially, this
-    performs the same sort of averaging as for alphabetic underlines, but
-    recomputes the position when drawing across a descendant with a different
-    computed ‘<code class=property>font-size</code>’. This ensures that
-    the text remains effectively "crossed out" despite any font size
-    changes.)
+    position of its parent). Position the portion of the line across each
+    decorated fragment at that position.
   </dl>
 
   <p> CSS does not define the thickness of line decorations. In determining
@@ -1120,18 +1125,18 @@ <h3 id=line-position><span class=secno>2.7. </span> Determining the
     shift, has no effect on the position of the line.
   </div>
 
-  <div class=note>
-   <p>In some cases (such as in OpenType) the font format can offer
-    information about the appropriate position of an underline. Typically
-    this information gives the position of an ‘<code
-    class=css>alphabetic</code>’ underline; in some cases (especially in
-    CJK fonts), it gives the position of a ‘<code class=css>under
-    left</code>’ underline. (In this case, the font's underline metrics
-    typically touch the bottom edge of the em box). The UA is encouraged to
-    use information (such as the underline thickness, or appropriate
-    alphabetic alignment) from the font wherever appropriate. The same
-    applies to line throughs.
-  </div>
+  <p>Some font formats (such as OpenType) can offer information about the
+   appropriate position of an underline. The UA is encouraged to use
+   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
+   ‘<code class=css>alphabetic</code>’ underline; in some cases
+   (especially in CJK fonts), it gives the position of a ‘<code
+   class=css>under left</code>’ underline. (In this case, the font's
+   underline metrics typically touch the bottom edge of the em box). The UA
+   may but is not required to correct for incorrect font metrics.
 
   <h2 id=emphasis-marks><span class=secno>3. </span> Emphasis Marks</h2>
 
@@ -1206,58 +1211,57 @@ <h3 id=text-emphasis-style-property><span class=secno>3.1. </span> Emphasis
    the following meanings:
 
   <dl>
-   <dt><dfn id=lsquononersquo1 title="text-emphasis:none">‘<code
+   <dt><dfn id=none1 title="text-emphasis:none">‘<code
     class=css>none</code>’</dfn>
 
    <dd>No emphasis marks.
 
-   <dt><dfn id=lsquofilledrsquo title="text-emphasis:filled">‘<code
+   <dt><dfn id=filled title="text-emphasis:filled">‘<code
     class=css>filled</code>’</dfn>
 
    <dd>The shape is filled with solid color.
 
-   <dt><dfn id=lsquoopenrsquo title="text-emphasis:open">‘<code
+   <dt><dfn id=open title="text-emphasis:open">‘<code
     class=css>open</code>’</dfn>
 
    <dd>The shape is hollow.
 
-   <dt><dfn id=lsquodotrsquo title="text-emphasis:dot">‘<code
+   <dt><dfn id=dot title="text-emphasis:dot">‘<code
     class=css>dot</code>’</dfn>
 
    <dd>Display small circles as marks. The filled dot is U+2022 ‘<code
     class=css>•</code>’, and the open dot is U+25E6 ‘<code
     class=css>◦</code>’.
 
-   <dt><dfn id=lsquocirclersquo title="text-emphasis:circle">‘<code
+   <dt><dfn id=circle title="text-emphasis:circle">‘<code
     class=css>circle</code>’</dfn>
 
    <dd>Display large circles as marks. The filled circle is U+25CF ‘<code
     class=css>●</code>’, and the open circle is U+25CB ‘<code
     class=css>○</code>’.
 
-   <dt><dfn id=lsquodouble-circlersquo
-    title="text-emphasis:double-circle">‘<code
+   <dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code
     class=css>double-circle</code>’</dfn>
 
    <dd>Display double circles as marks. The filled double-circle is U+25C9
     ‘<code class=css>◉</code>’, and the open double-circle is U+25CE
     ‘<code class=css>◎</code>’.
 
-   <dt><dfn id=lsquotrianglersquo title="text-emphasis:triangle">‘<code
+   <dt><dfn id=triangle title="text-emphasis:triangle">‘<code
     class=css>triangle</code>’</dfn>
 
    <dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code
     class=css>▲</code>’, and the open triangle is U+25B3 ‘<code
     class=css>△</code>’.
 
-   <dt><dfn id=lsquosesamersquo title="text-emphasis:sesame">‘<code
+   <dt><dfn id=sesame title="text-emphasis:sesame">‘<code
     class=css>sesame</code>’</dfn>
 
    <dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code
     class=css>﹅</code>’, and the open sesame is U+FE46 ‘<code
     class=css>﹆</code>’.
 
-   <dt><dfn id=lsquoltstringgtrsquo title="text-emphasis:sesame">‘<code
+   <dt><dfn id=ltstringgt title="text-emphasis:sesame">‘<code
     class=css><var>&lt;string&gt;</var></code>’</dfn>
 
    <dd>Display the given string as marks. Authors should not specify more
@@ -1357,7 +1361,7 @@ <h3 id=text-emphasis-color-property><span class=secno>3.2. </span> Emphasis
 
   <p>This property specifies the foreground color of the emphasis marks.
 
-  <p class=note> The <dfn id=lsquocurrentcolorrsquo>‘<code
+  <p class=note> The <dfn id=currentcolor>‘<code
    class=css>currentcolor</code>’</dfn> keyword computes to itself and is
    resolved to the value of ‘<code class=property>color</code>’ after
    inheritance is performed. This means ‘<a
@@ -1490,22 +1494,22 @@ <h3 id=text-emphasis-position-property><span class=secno>3.4. </span>
    have following meanings:
 
   <dl>
-   <dt><dfn id=lsquooverrsquo title="text-emphasis:over">‘<code
+   <dt><dfn id=over title="text-emphasis:over">‘<code
     class=css>over</code>’</dfn>
 
    <dd>Draw marks over the text in horizontal writing mode.
 
-   <dt><dfn id=lsquounderrsquo title="text-emphasis:under">‘<code
+   <dt><dfn id=under title="text-emphasis:under">‘<code
     class=css>under</code>’</dfn>
 
    <dd>Draw marks under the text in horizontal writing mode.
 
-   <dt><dfn id=lsquorightrsquo title="text-emphasis:right">‘<code
+   <dt><dfn id=right title="text-emphasis:right">‘<code
     class=css>right</code>’</dfn>
 
    <dd>Draw marks to the right of the text in vertical writing mode.
 
-   <dt><dfn id=lsquoleftrsquo title="text-emphasis:left">‘<code
+   <dt><dfn id=left title="text-emphasis:left">‘<code
     class=css>left</code>’</dfn>
 
    <dd>Draw marks to the left of the text in vertical writing mode.