[css-pseudo-4] Clean up definition/examples of fictional tag sequences for ::first-line

Author: fantasai

css-pseudo-4/Overview.bs

@@ -55,8 +55,9 @@ Typographic Pseudo-elements</h2>
 <h3 id="first-line-pseudo">
 The ::first-line pseudo-element</h3>
 
-  The <dfn>::first-line</dfn> pseudo-element describes the contents of
-  the <a>first formatted line</a> of its <a>originating element</a>.
+  The <dfn>::first-line</dfn> [=pseudo-element=] represents
+  the contents of the [=first formatted line=]
+  of its [=originating element=].
 
   <div class="example">
     The rule below means
@@ -66,77 +67,49 @@ The ::first-line pseudo-element</h3>
 
     The selector ''p::first-line''
     does not match any real document element.
-    It does match a pseudo-element that conforming user agents
-    will insert at the beginning of every <code>p</code> element.
+    It instead matches a pseudo-element
+    that the user agent will automatically insert
+    at the beginning of every <code>p</code> element.
   </div>
 
   Note: Note that the length of the first line depends on a number of factors,
   including the width of the page, the font size, etc.
 
-  <div class="example">
+  <div class="example" id="first-line-example">
     For example, given an ordinary HTML [[HTML5]] paragraph such as:
 
     <pre>
-      &lt;P&gt;This is a somewhat long HTML
-      paragraph that will be broken into several
-      lines. The first line will be identified
-      by a fictional tag sequence. The other lines
-      will be treated as ordinary lines in the
-      paragraph.&lt;/P&gt;
+      &lt;P&gt;This is a somewhat long HTML paragraph
+      that will be broken into several lines.
+      The first line will be styled
+      by the ‘::first-line’ pseudo-element.
+      The other lines will be treated
+      as ordinary lines in the paragraph.&lt;/P&gt;
     </pre>
 
-    The lines might be broken as follows:
+    Depending on the width of the element,
+    its lines might be broken as follows:
 
     <pre>
       THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
-      will be broken into several lines. The first
-      line will be identified by a fictional tag
-      sequence. The other lines will be treated as
-      ordinary lines in the paragraph.
-    </pre>
-
-    This paragraph might be “rewritten” by user agents
-    to include a <dfn>fictional tag sequence</dfn> to represent ''::first-line''.
-    This <a>fictional tag sequence</a> helps to show how properties are inherited.
-
-    <pre>
-      &lt;P&gt;<b>&lt;P::first-line&gt;</b> This is a somewhat long HTML
-      paragraph that <b>&lt;/P::first-line&gt;</b> will be broken into several
-      lines. The first line will be identified
-      by a fictional tag sequence. The other lines
-      will be treated as ordinary lines in the
-      paragraph.&lt;/P&gt;
-    </pre>
-  </div>
-
-  If a pseudo-element breaks up a real element,
-  the desired effect can often be described by a <a>fictional tag sequence</a>
-  that closes and then re-opens the element.
-
-  <div class="example">
-    Thus, if we mark up the previous paragraph with a <code>span</code>
-    element encompassing the first sentence:
-
-    <pre>
-      &lt;P&gt;<b>&lt;SPAN class="test"&gt;</b> This is a somewhat long HTML
-      paragraph that will be broken into several
-      lines.<b>&lt;/SPAN&gt;</b> The first line will be identified
-      by a fictional tag sequence. The other lines
-      will be treated as ordinary lines in the
-      paragraph.&lt;/P&gt;
+      will be broken into several lines. The
+      first line will be by the ‘::first-line’
+      pseudo-element. The other lines will be
+      treated as ordinary lines in the paragraph.
     </pre>
 
-    the user agent could simulate start and end tags for <code>span</code>
-    when inserting the <a>fictional tag sequence</a> for ''::first-line''
-    to get the correct inheritance behavior.
+    or alternately as follows:
 
     <pre>
-      &lt;P&gt;&lt;P::first-line&gt;<b>&lt;SPAN class="test"&gt;</b> This is a somewhat long HTML
-      paragraph that will <b>&lt;/SPAN&gt;</b>&lt;/P::first-line&gt;<b>&lt;SPAN class="test"&gt;</b> be broken into several
-      lines.<b>&lt;/SPAN&gt;</b> The first line will be identified
-      by a fictional tag sequence. The other lines
-      will be treated as ordinary lines in the
-      paragraph.&lt;/P&gt;
+      THIS IS A SOMEWHAT LONG
+      HTML paragraph that will
+      be broken into several
+      lines. The first line will
+      be by the ‘::first-line’
+      pseudo-element. The other
+      lines will be treated as
+      ordinary lines in the
+      paragraph.
     </pre>
   </div>
 
@@ -227,6 +200,68 @@ Inheritance and the ''::first-line'' Pseudo-element</h4>
   (The portion of a child element that does not occur on the first line
   always inherits from the non-pseudo parent.)
 
+
+  <div class="example">
+    In the common case (of standard inherited CSS properties),
+    [=inheritance=] into and from a ''::first-line'' pseudo-element
+    can be understood by writing out a <dfn>fictional tag sequence</dfn>
+    to represent ''::first-line''.
+    Consider the <a href="#first-line-example">earlier example</a>;
+    in case of the first rendering, the fictional tag sequence would be:
+
+    <pre>
+      &lt;P&gt;<strong>&lt;p::first-line></strong>This is a somewhat long HTML paragraph
+      that<strong>&lt;/p::first-line></strong> will be broken into several lines.
+      The first line will be styled
+      by the ‘::first-line’ pseudo-element.
+      The other lines will be treated
+      as ordinary lines in the paragraph.&lt;/P&gt;
+    </pre>
+
+    And in the case of the second rendering:
+
+    <pre>
+      &lt;P&gt;<strong>&lt;p::first-line></strong>This is a somewhat long<strong>&lt;/p::first-line></strong> HTML paragraph
+      that will be broken into several lines.
+      The first line will be styled
+      by the ‘::first-line’ pseudo-element.
+      The other lines will be treated
+      as ordinary lines in the paragraph.&lt;/P&gt;
+    </pre>
+  </div>
+
+
+  <div class="example">
+    If a pseudo-element breaks up a real element,
+    the effect can often be described
+    by a <a>fictional tag sequence</a>
+    that closes and then re-opens the element.
+    Suppose we mark up the earlier example
+    with a <code>span</code> element encompassing the first sentence:
+
+    <pre>
+      &lt;P&gt;<strong>&lt;span></strong>This is a somewhat long HTML paragraph
+      that will be broken into several lines.<strong>&lt;/span></strong>
+      The first line will be styled
+      by the ‘::first-line’ pseudo-element.
+      The other lines will be treated
+      as ordinary lines in the paragraph.&lt;/P&gt;
+    </pre>
+
+    The effect of the first rendering
+    would be similar to the following [=fictional tag sequence=]:
+
+    <pre>
+      &lt;P&lt;P&gt;<strong>&lt;p::first-line>&gt;&lt;span></strong>This is a somewhat long HTML paragraph
+      that<strong>&lt;/span>&lt;/P&gt;&lt;p::first-line>&lt;span></strong> will be broken into several lines.<strong>&lt;/span></strong>
+      The first line will be styled
+      by the ‘::first-line’ pseudo-element.
+      The other lines will be treated
+      as ordinary lines in the paragraph.&lt;/P&gt;
+    </pre>
+  </div>
+
+
 <h3 id="first-letter-pseudo">
 The ::first-letter pseudo-element</h3>