[css-text-decor-3] Define 'decorating box', fix up element/box confusion.

Author: tabatkins

css-text-decor-3/Overview.html

@@ -330,33 +330,36 @@ <h3 id=terms><span class=secno>1.3. </span>Terminology</h3>
   <h2 id=line-decoration><span class=secno>2. </span> Line Decoration:
    Underline, Overline, and Strike-Through</h2>
 
-  <p>The following properties describe line decorations that are added to the
-   content of an element. When specified on or propagated to an inline box,
-   such decoration affects all the boxes generated by that element, and is
-   further propagated to any in-flow block-level boxes that split the inline
-   (see <a
+  <p> The following properties describe line decorations that are added to
+   the content of an element. When specified on or propagated to an inline
+   box, that box becomes a <dfn id=decorating-box>decorating box</dfn> for
+   that decoration, applying the decoration to all its fragments. The
+   decoration is then further propagated to any in-flow block-level boxes
+   that split the inline (see <a
    href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1
-   section 9.2.1.1</a>) When specified on or propagated to a ruby box, the
-   decorations are further propagated only to the ruby base. When specified
-   on or propagated to a a block container that establishes an inline
-   formatting context, the decorations are propagated to an anonymous inline
-   element that wraps all the in-flow inline-level children of the block
-   container. For all other elements, the decorations are propagated to any
+   section 9.2.1.1</a>). When specified on or propagated to a block container
+   that establishes an inline formatting context, the decorations are
+   propagated to an anonymous inline box that wraps all the in-flow
+   inline-level children of the block container. When specified on or
+   propagated to a ruby box, the decorations are propagated only to the ruby
+   base. For all other box types, the decorations are propagated to all
    in-flow children.
 
-  <p class=note>Note that text decorations are not propagated to any
+  <p class=note> Note that text decorations are not propagated to any
    out-of-flow descendants, nor to the contents of atomic inline-level
-   descendants such as inline blocks and inline tables.
+   descendants such as inline blocks and inline tables. They are also not
+   propagated to inline children of inline boxes, although the decoration is
+   <em>applied</em> to such boxes.
 
   <p> By default underlines, overlines, and line-throughs are applied only to
    non-replaced inline boxes, and are drawn over all text (including white
-   space, letter spacing, and word spacing). Elements containing no text,
-   such as images, are not decorated. The ‘<a
-   href="#text-decoration-skip"><code
+   space, letter spacing, and word spacing). Atomic inlines, such as images,
+   are not decorated. The ‘<a href="#text-decoration-skip"><code
    class=property>text-decoration-skip</code></a>’ property can be used to
-   modify this behavior, for example allowing inline replaced elements to be
-   underlined or requiring that white space be skipped. Margins, borders, and
-   padding of the element originating the decoration are always skipped.
+   modify this behavior, for example allowing atomic inlines to be underlined
+   or requiring that white space be skipped. Margins, borders, and padding of
+   the <a href="#decorating-box"><i>decorating box</i></a> are always
+   skipped.
 
   <p>In determining the position and thickness of text decoration lines, user
    agents may consider the font sizes and dominant baselines of descendants,
@@ -365,7 +368,7 @@ <h2 id=line-decoration><span class=secno>2. </span> Line Decoration:
    href="#text-decoration-color">color</a> and <a
    href="#text-decoration-style">line style</a> of decorations must remain
    the same on all decorations applied by a given element, even if descendant
-   elements have different color or line style values.
+   boxes have different color or line style values.
 
   <div class=example>
    <p>The following figure shows the averaging for underline:
@@ -379,25 +382,24 @@ <h2 id=line-decoration><span class=secno>2. </span> Line Decoration:
     increases.
   </div>
 
-  <p>Relatively positioning a descendant moves all text decorations affecting
-   it along with the descendant's text; it does not affect calculation of the
-   decoration's initial position on that line. The ‘<code
+  <p>Relatively positioning a descendant moves all text decorations applied
+   to it along with the descendant's text; it does not affect calculation of
+   the decoration's initial position on that line. The ‘<code
    class=property>visibility</code>’ property, ‘<a
    href="#text-shadow"><code class=property>text-shadow</code></a>’,
    filters, and other graphical transformations likewise affect text
    decorations as part of the text they're drawn on, even if the decorations
-   were specified on an ancestor element.
+   were specified on an ancestor box.
 
   <div class=example>
    <p>In the following style sheet and document fragment:
 
-   <pre><code class=css>
+   <pre>
 <!-- -->   blockquote { text-decoration: underline; color: blue; }
 <!-- -->   em { display: block; }
-<!-- -->   cite { color: fuchsia; }
-<!----></code></pre>
+<!-- -->   cite { color: fuchsia; }</pre>
 
-   <pre class=html><code>
+   <pre>
 <!-- -->   &lt;blockquote&gt;
 <!-- -->    &lt;p&gt;
 <!-- -->     &lt;span&gt;
@@ -407,15 +409,14 @@ <h2 id=line-decoration><span class=secno>2. </span> Line Decoration:
 <!-- -->      &lt;cite&gt; —GwieF &lt;/cite&gt;
 <!-- -->     &lt;/span&gt;
 <!-- -->    &lt;/p&gt;
-<!-- -->   &lt;/blockquote&gt;
-<!----></code></pre>
+<!-- -->   &lt;/blockquote&gt;</pre>
 
    <p>...the underlining for the blockquote element is propagated to an
-    anonymous inline element that surrounds the span element, causing the
-    text "Help, help!" to be blue, with the blue underlining from the
-    anonymous inline underneath it, the color being taken from the blockquote
-    element. The <code>&lt;em&gt;text&lt;/em&gt;</code> in the em block is
-    also underlined, as it is in an in-flow block to which the underline is
+    anonymous inline box that surrounds the span element, causing the text
+    "Help, help!" to be blue, with the blue underlining from the anonymous
+    inline underneath it, the color being taken from the blockquote element.
+    The <code>&lt;em&gt;text&lt;/em&gt;</code> in the em block is also
+    underlined, as it is in an in-flow block to which the underline is
     propagated. The final line of text is fuchsia, but the underline
     underneath it is still the blue underline from the anonymous inline
     element.
@@ -783,9 +784,10 @@ <h3 id=text-decoration-skip-property><span class=secno>2.5. </span> Text
     class=css>edges</code>’</dfn>
 
    <dd>The UA should place the start and end of the line inwards from the
-    content edge of the decorating element so that, e.g. two underlined
-    elements side-by-side do not appear to have a single underline. (This is
-    important in Chinese, where underlining is a form of punctuation.)
+    content edge of the <i>decorating element</i> so that, e.g. two
+    underlined elements side-by-side do not appear to have a single
+    underline. (This is important in Chinese, where underlining is a form of
+    punctuation.)
 
    <dt><dfn id=box-decoration
     title="text-decoration-skip:box-decoration">‘<code

css-text-decor-3/Overview.src.html

@@ -167,32 +167,34 @@ <h3 id="terms">Terminology</h3>
 <h2 id="line-decoration">
 Line Decoration: Underline, Overline, and Strike-Through</h2>
 
-  <p>The following properties describe line decorations that are added
-    to the content of an element. When specified on or propagated to
-    an inline box, such decoration affects all the boxes generated
-    by that element, and is further propagated to any in-flow block-level
-    boxes that split the inline
-    (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>)
-    When specified on or propagated to a ruby box, the decorations are
-    further propagated only to the ruby base.
-    When specified on or propagated to a a block container that establishes
-    an inline formatting context, the decorations are propagated to an
-    anonymous inline element that wraps all the in-flow inline-level children
-    of the block container. For all other elements, the decorations are
-    propagated to any in-flow children.
-
-  <p class="note">Note that text decorations are not propagated to any
-    out-of-flow descendants, nor to the contents of atomic inline-level
-    descendants such as inline blocks and inline tables.
+  <p>
+    The following properties describe line decorations that are added to the content of an element. 
+    When specified on or propagated to an inline box, 
+    that box becomes a <dfn>decorating box</dfn> for that decoration,
+    applying the decoration to all its fragments.
+    The decoration is then further propagated to any in-flow block-level boxes that split the inline
+    (see <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1 section 9.2.1.1</a>).
+    When specified on or propagated to a block container that establishes an inline formatting context, 
+    the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container. 
+    When specified on or propagated to a ruby box, 
+    the decorations are propagated only to the ruby base.
+    For all other box types, 
+    the decorations are propagated to all in-flow children.
+
+  <p class="note">
+    Note that text decorations are not propagated to any out-of-flow descendants, 
+    nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
+    They are also not propagated to inline children of inline boxes,
+    although the decoration is <em>applied</em> to such boxes.
 
   <p>
     By default underlines, overlines, and line-throughs are applied only to non-replaced inline boxes,
     and are drawn over all text (including white space, letter spacing, and word spacing).
-    Elements containing no text, such as images, are not decorated.
+    Atomic inlines, such as images, are not decorated.
     The 'text-decoration-skip' property can be used to modify this behavior, 
-    for example allowing inline replaced elements to be underlined 
+    for example allowing atomic inlines to be underlined 
     or requiring that white space be skipped.
-    Margins, borders, and padding of the element originating the decoration are always skipped. 
+    Margins, borders, and padding of the <i>decorating box</i> are always skipped. 
 
   <p>In determining the position and thickness of text decoration lines,
     user agents may consider the font sizes and dominant baselines of
@@ -201,7 +203,7 @@ <h2 id="line-decoration">
     <a href="#text-decoration-color">color</a> and
     <a href="#text-decoration-style">line style</a> of decorations must
     remain the same on all decorations applied by a given element, even
-    if descendant elements have different color or line style values.</p>
+    if descendant boxes have different color or line style values.</p>
 
   <div class="example">
     <p>The following figure shows the averaging for underline:
@@ -217,20 +219,19 @@ <h2 id="line-decoration">
   </div>
 
   <p>Relatively positioning a descendant moves all text decorations
-    affecting it along with the descendant's text; it does not affect
+    applied to it along with the descendant's text; it does not affect
     calculation of the decoration's initial position on that line.
     The 'visibility' property, 'text-shadow', filters, and other graphical transformations
     likewise affect text decorations as part of the text they're drawn on,
-    even if the decorations were specified on an ancestor element.
+    even if the decorations were specified on an ancestor box.
 
   <div class="example">
     <p>In the following style sheet and document fragment:</p>
-    <pre><code class="css">
+    <pre>
 <!-- -->   blockquote { text-decoration: underline; color: blue; }
 <!-- -->   em { display: block; }
-<!-- -->   cite { color: fuchsia; }
-<!----></code></pre>
-    <pre class="html"><code>
+<!-- -->   cite { color: fuchsia; }</pre>
+    <pre>
 <!-- -->   &lt;blockquote&gt;
 <!-- -->    &lt;p&gt;
 <!-- -->     &lt;span&gt;
@@ -240,10 +241,9 @@ <h2 id="line-decoration">
 <!-- -->      &lt;cite&gt; &mdash;GwieF &lt;/cite&gt;
 <!-- -->     &lt;/span&gt;
 <!-- -->    &lt;/p&gt;
-<!-- -->   &lt;/blockquote&gt;
-<!----></code></pre>
+<!-- -->   &lt;/blockquote&gt;</pre>
     <p>...the underlining for the blockquote element is propagated to an
-    anonymous inline element that surrounds the span element, causing
+    anonymous inline box that surrounds the span element, causing
     the text "Help, help!" to be blue, with the blue underlining from
     the anonymous inline underneath it, the color being taken from the
     blockquote element. The <code>&lt;em&gt;text&lt;/em&gt;</code>
@@ -492,7 +492,7 @@ <h3 id="text-decoration-skip-property">
       distance to either side of the glyph outline.</dd>
     <dt><dfn title="text-decoration-skip:edges">''edges''</dfn></dt>
     <dd>The UA should place the start and end of the line inwards from
-      the content edge of the decorating element so that, e.g. two
+      the content edge of the <i>decorating element</i> so that, e.g. two
       underlined elements side-by-side do not appear to have a single
       underline. (This is important in Chinese, where underlining is a
       form of punctuation.)</dd>