[css-pseudo-4] Rewrite ::first-letter section.

Author: fantasai

css-pseudo-4/Overview.bs

@@ -278,9 +278,7 @@ The ::first-letter pseudo-element</h3>
 
   The <dfn>::first-letter</dfn> pseudo-element represents
   the first <a>typographic letter unit</a> [[!CSS-TEXT-3]]
-  on the <a>first formatted line</a> of its <a>originating element</a>,
-  if it is not preceded by any other content
-  (such as images or inline tables) on its line.
+  on the <a>first formatted line</a> of its <a>originating element</a>.
   The ''::first-letter'' pseudo-element can be used
   to create “initial caps” and “drop caps”,
   which are common typographic effects.
@@ -298,7 +296,7 @@ The ::first-letter pseudo-element</h3>
   that precedes or follows the first <a>typographic letter unit</a>
   and any intervening space separators
   (characters that belong to the <code>Zs</code> Unicode general category [[!UAX44]])
-  must also be included
+  must also be included as part of the <dfn>first-letter text</dfn>
   in the ''::first-letter'' pseudo-element.
 
   <div class="figure">
@@ -315,79 +313,107 @@ The ::first-letter pseudo-element</h3>
   about how to treat certain letter combinations.
   In Dutch, for example, if the letter combination "ij" appears at the beginning of an element,
   both letters should be considered within the ''::first-letter'' pseudo-element. [[UAX29]]
-  The UA should tailor its definition of <a>typographic letter unit</a>
+  When selecting the [=first-letter text=],
+  the UA should tailor its definition of <a>typographic letter unit</a>
   to reflect the first-letter traditions of the ''::first-letter'' pseudo-element’s <em>containing block</em>’s content language.
 
-  If the characters that would form the ''::first-letter''
-  are not in the same element, such as <code>‘T</code> in <code>&lt;p&gt;‘&lt;em&gt;T...</code>,
-  the user agent may create a ''::first-letter'' pseudo-element
-  from one of the elements, both elements, or simply not create a pseudo-element.</code>
-  Additionally, if the first letter(s) of the block
-  are not at the start of the line (for example due to bidirectional reordering),
-  then the user agent need not create the pseudo-element(s).
-
-  The ''::first-letter'' pseudo-element is contained within any ''::first-line''
-  pseudo-elements, and thus inherits from ''::first-line''.
-
 <h4 id="first-letter-application">
-Finding the First Letter</h4>
-
-  The first letter must occur on the <a>first formatted line</a>.
-  For example, in this HTML fragment: <code>&lt;p&gt;&lt;br&gt;First...</code>
-  the first line doesn't contain any letters
-  and ''::first-letter'' doesn't match anything.
-  In particular, it does not match the “F” of “First”.
-
-  In CSS, the ''::first-letter'' pseudo-element
-  only applies to block containers.
-  <span class="note">A future version of this specification
-  may allow this pseudo-element to apply to more display types.</span>
-  The ''::first-letter'' pseudo-element can be used
-  with all such elements that contain text,
-  or that have a descendant in the same flow that contains text.
-  A user agent should act as if the fictional start tag
-  of the ::first-letter pseudo-element
-  is just before the first text of the element,
-  even if that first text is in a descendant.
+Finding the First Letter Text</h4>
+
+  As with ''::first-line'',
+  the ''::first-letter'' pseudo-element
+  can only have an effect when attached to a [=block container=].
+  Its [=first-letter text=] is the first such [=inline-level content=]
+  participating in the [=inline formatting context=]
+  of its [=originating element=]’s [=first formatted line=],
+  if it is not preceded by any other in-flow content
+  (such as images or inline tables) on its line.
+
+  For this purpose, any [=marker boxes=] are ignored,
+  as if they were out-of-flow.
+  However, if an element has in-flow ''::before'' or ''::after'' content,
+  the [=first-letter text=] is selected from the content of the element
+  <em>including</em> that generated content.
 
   <div class="example">
     Example:
-    The <a>fictional tag sequence</a> for this HTML fragment:
+    After the rule ''p::before {content: "Note: "}'', the
+    selector ''p::first-letter'' matches the "N" of "Note".
+  </div>
+
+  If no such text exists,
+  then there is no [=first-letter text=]
+  and no ''::first-letter'' pseudo-element.
+
+  Note: When the [=first formatted line=] is empty,
+  ''::first-letter'' will not match anything.
+  For example, in this HTML fragment:
+  <code>&lt;p&gt;&lt;br&gt;First...</code>
+  the first line doesn't contain any letters,
+  so ''::first-letter'' doesn't match anything.
+  In particular, it does not match the “F” of “First”,
+  which is on the second line.
+
+  Note: As with ''::first-line'',
+  the [=first-letter text=] of a [=block container=]
+  that does not participate in a [=block formatting context=]
+  cannot be the [=first-letter text=] of an ancestor element.
+  Thus, in <code>&lt;DIV&gt;&lt;P STYLE="display: inline-block"&gt;Hello&lt;BR&gt;Goodbye&lt;/P&gt; etcetera&lt;/DIV&gt;</code>
+  the first letter of the <code>DIV</code> is not the letter “H”.
+  In fact, the <code>DIV</code> doesn't have a first letter,
+  as its [=first formatted line=] contains no content besides the inline block.
+
+<h4 id="first-letter-tree">
+Inheritance and Box Tree Structure of the ''::first-letter'' Pseudo-element</h4>
+
+  The ''::first-letter'' pseudo-element is wrapped
+  immediately around the [=first-letter text=] it represents,
+  even if that text is in a descendant.
+  When a [=first-letter text=] is represented by multiple ''::first-letter" pseudo-elements,
+  they are nested in the same order as their [=originating elements=].
+  [=Inheritance=] behaves accordingly.
+
+  <div class="example">
+    Consider the following markup:
+
     <pre>
       &lt;div&gt;
-      &lt;p&gt;The first text.
+        &lt;p&gt;The first text.
+      &lt;/div&gt;
     </pre>
-    is:
+
+    If we assume a [=fictional tag sequence=]
+    to represent the elements’ ''::first-letter'' pseudo-elements,
+    it would be something like:
+
     <pre>
       &lt;div&gt;
-      &lt;p&gt;&lt;div::first-letter&gt;&lt;p::first-letter&gt;T&lt;/...&gt;&lt;/...&gt;he first text.
+        &lt;p&gt;&lt;div::first-letter&gt;&lt;p::first-letter&gt;T&lt;/&hellip;&gt;&lt;/&hellip;&gt;he first text.
+      &lt;/div&gt;
     </pre>
   </div>
 
-  In CSS the first letter of a table-cell or inline-block
-  cannot be the first letter of an ancestor element.
-  Thus, in <code>&lt;DIV&gt;&lt;P STYLE="display: inline-block"&gt;Hello&lt;BR&gt;Goodbye&lt;/P&gt; etcetera&lt;/DIV&gt;</code>
-  the first letter of the <code>DIV</code> is not the letter "H".
-  In fact, the <code>DIV</code> doesn't have a first letter.
-  If an element is a [=list item=]
-  the ''::first-letter'' applies
-  to the first letter in the principal box <em>after</em> the marker.
-  User-Agents may ignore ''::first-letter''
-  on list items with ''list-style-position: inside''.
-  If an element has ''::before'' or ''::after'' content,
-  the ''::first-letter'' applies to the first letter of the
-  element <em>including</em> that content.
-
-  <div class="example">
-    Example:
-    After the rule ''p::before {content: "Note: "}'', the
-    selector ''p::first-letter'' matches the "N" of "Note".
-  </div>
+  If the characters that would form the [=first-letter text=]
+  are not all in the same element
+  (as the <code>‘T</code> in <code>&lt;p&gt;‘&lt;em&gt;T...</code>),
+  the user agent may create a ''::first-letter'' pseudo-element
+  from one of the elements, or all elements,
+  or simply not create a pseudo-element.
+  Additionally, if the [=first-letter text=]
+  is not at the start of the line
+  (for example due to bidirectional reordering,
+  or due to a [=list item=] [=marker=] with ''list-style-position: inside''),
+  then the user agent is not required to create the pseudo-element(s).
+
+  A ''::first-letter'' pseudo-element is contained within
+  any ''::first-line'' pseudo-elements,
+  and thus inherits (potentially indirectly) from ''::first-line'',
+  the same as any [=inline box=] on the same line.
 
 <h4 id="first-letter-styling">
 Styling the ''::first-letter'' Pseudo-element</h4>
 
-  In CSS a ::first-letter pseudo-element is similar to an inline-level element.
+  In CSS a ::first-letter pseudo-element is similar to an [=inline box=].
   The following properties that apply to ''::first-letter'' pseudo-elements:
 
   <ul>