[css-pseudo-4] Create subsection for ::first-letter pattern.

Author: fantasai

css-pseudo-4/Overview.bs

@@ -287,6 +287,10 @@ Inheritance and the ''::first-line'' Pseudo-element</h4>
 <h3 id="first-letter-pseudo">
 First-Letter Text: ''::first-letter'' pseudo-element and its ''::prefix'' and ''::postfix'' children</h3>
 
+  <div class="figure">
+    <img alt="A drop-cap initial letter, including the opening quotation mark before it." src="images/first-letter2.gif">
+  </div>
+
   The <dfn>::first-letter</dfn> [=pseudo-element=] represents
   the first Letter, Number, or Symbol
   (Unicode category <code>L*</code>, <code>N*</code>, or <code>S*</code>) [=typographic character unit=]
@@ -303,9 +307,27 @@ First-Letter Text: ''::first-letter'' pseudo-element and its ''::prefix'' and ''
     on every paragraph following a level-2 header,
     using the 'initial-letter' property defined in [[CSS-INLINE-3]]:
 
-    <pre class="lang-css">h2 + p::first-letter { initial-letter: 2; }</pre>
+    <pre class="lang-css">h2 + p::first-letter { initial-letter: 3; }</pre>
   </div>
 
+  Note: The [=first letter=] may in fact be a digit,
+  e.g., the “6” in “67 million dollars is a lot of money.”
+
+  To allow independent styling of the [=first letter=] itself
+  and its adjacent punctuation,
+  associated preceding punctuation
+  is represented by the <dfn for="::first-letter">::prefix</dfn>
+  [=sub-pseudo-element=] of the ''::first-letter'' [=pseudo-element=]
+  (''::first-letter::prefix'');
+  and associated following punctuation
+  is represented by the <dfn for="::first-letter">::postfix</dfn>
+  [=sub-pseudo-element=] of the ''::first-letter'' [=pseudo-element=]
+  (''::first-letter::postfix'').
+  See [[#first-letter-pattern]], below.
+
+<h4 id="first-letter-pattern">
+First Letters and Associated Punctuation</h4>
+
   As explained in [[CSS-TEXT-3#characters]],
   a <a>typographic character unit</a> can include more than one Unicode codepoint.
   For example, combining characters must be kept with their base character.
@@ -318,9 +340,6 @@ First-Letter Text: ''::first-letter'' pseudo-element and its ''::prefix'' and ''
   to reflect the first-letter traditions of
   the ''::first-letter'' pseudo-element’s <em>[=containing block=]</em>’s [=content language=].
 
-  Note: Note that the [=first letter=] may in fact
-  be a digit, e.g., the “6” in “67 million dollars is a lot of money.”
-
   Preceding and following punctuation
   must also be included as part of the [=first-letter text=]
   in the ''::first-letter'' pseudo-element
@@ -344,11 +363,6 @@ First-Letter Text: ''::first-letter'' pseudo-element and its ''::prefix'' and ''
       any <a spec=css-text-3>word-separator characters</a>
   </ul>
 
-
-  <div class="figure">
-      <img alt="Quotes that precede the first letter should be included." src="images/first-letter2.gif">
-  </div>
-
   <div class="note">
     Informally represented, the [=first-letter text=]’s pattern here
     can be roughly
@@ -385,17 +399,6 @@ First-Letter Text: ''::first-letter'' pseudo-element and its ''::prefix'' and ''
     </pre>
   </div>
 
-  To allow independent styling of the [=first letter=] itself
-  and its adjacent punctuation,
-  such preceding punctuation
-  is represented by the <dfn for="::first-letter">::prefix</dfn>
-  sub-[=pseudo-element=] of the ''::first-letter'' [=pseudo-element=]
-  (''::first-letter::prefix'');
-  and such following punctuation
-  is represented by the <dfn for="::first-letter">::postfix</dfn>
-  sub-[=pseudo-element=] of the ''::first-letter'' [=pseudo-element=]
-  (''::first-letter::postfix'').
-
   See [[css-text-3#characters]] and [[css-text-3#character-properties]]
   for more information on [=typographic character units=]
   and their Unicode properties.