[css-pseudo-4] Remove terrible outdated examples. #4392

Author: fantasai

css-pseudo-4/Overview.bs

@@ -379,7 +379,8 @@ Inheritance and Box Tree Structure of the ''::first-letter'' Pseudo-element</h4>
 
     <pre>
       &lt;div&gt;
-        &lt;p&gt;The first text.
+        &lt;p&gt;&lt;span&gt;The first few words&lt;/span>
+        and the rest of the paragraph.
       &lt;/div&gt;
     </pre>
 
@@ -389,7 +390,8 @@ Inheritance and Box Tree Structure of the ''::first-letter'' Pseudo-element</h4>
 
     <pre>
       &lt;div&gt;
-        &lt;p&gt;&lt;div::first-letter&gt;&lt;p::first-letter&gt;T&lt;/&hellip;&gt;&lt;/&hellip;&gt;he first text.
+        &lt;p&gt;&lt;span&gt;<strong>&lt;div::first-letter&gt;&lt;p::first-letter&gt;</strong>T<strong>&lt;/&hellip;&gt;&lt;/&hellip;&gt;</strong>he first few words&lt;/span>
+        and the rest of the paragraph.
       &lt;/div&gt;
     </pre>
   </div>
@@ -436,82 +438,15 @@ Styling the ''::first-letter'' Pseudo-element</h4>
   what [=first-letter text=] is represented by that ''::first-letter''.
 
   Note: In previous levels of CSS,
-  User Agents were allowed to choose a line height, width and height based on the shape of the letter,
-  approximate font sizes,
-  or to take the glyph outline into account when formatting.
-  This possibility has been intentionally removed,
-  as it proved to be a poor solution for the intended use case (Drop Caps),
+  User Agents were allowed to choose a line height, width, and height
+  based on the shape of the letter,
+  to approximate font sizes;
+  and to take the glyph outline into account when performing layout.
+  The possibility of such loosely-defined magic has been intentionally removed,
+  as it proved to be a poor solution for the intended use case (drop caps and raised caps),
   yet caused interoperability problems.
-
-  <div class="example">
-    Example:
-    This CSS and HTML example shows a possible rendering of an initial cap.
-    Note that the fictional start tag of the first letter
-    is inside the <span>span</span>,
-    and thus the font weight of the first letter is normal,
-    not bold as the <span>span</span>:
-
-    <pre>
-      p { line-height: 1.1 }
-      p::first-letter { font-size: 3em; font-weight: normal }
-      span { font-weight: bold }
-      ...
-      &lt;p&gt;&lt;span&gt;Het hemelsche&lt;/span&gt; gerecht heeft zich ten lange lesten&lt;br&gt;
-      Erbarremt over my en mijn benaeuwde vesten&lt;br&gt;
-      En arme burgery, en op mijn volcx gebed&lt;br&gt;
-      En dagelix geschrey de bange stad ontzet.
-    </pre>
-
-    <div class="figure">
-        <img alt="Image illustrating the ::first-letter pseudo-element" src="images/initial-cap.png">
-    </div>
-  </div>
-
-  <div class="example">
-    The following CSS will make a drop cap initial letter span about two lines:
-    <pre>
-      &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
-      &lt;HTML&gt;
-       &lt;HEAD&gt;
-        &lt;TITLE&gt;Drop cap initial letter&lt;/TITLE&gt;
-        &lt;STYLE type="text/css"&gt;
-         P               { font-size: 12pt; line-height: 1.2 }
-         P::first-letter { font-size: 200%; font-weight: bold; float: left }
-         SPAN            { text-transform: uppercase }
-        &lt;/STYLE&gt;
-       &lt;/HEAD&gt;
-       &lt;BODY&gt;
-        &lt;P&gt;&lt;SPAN&gt;The first&lt;/SPAN&gt; few words of an article
-          in The Economist.&lt;/P&gt;
-       &lt;/BODY&gt;
-      &lt;/HTML&gt;
-    </pre>
-
-    This example might be formatted as follows:
-
-    <div class="figure">
-        <img alt="Image illustrating the combined effect of the ::first-letter
-   and ::first-line pseudo-elements" src="images/first-letter.gif">
-    </div>
-
-    The <a>fictional tag sequence</a> is:
-
-    <pre>
-      &lt;P&gt;
-        &lt;SPAN&gt;
-          &lt;P::first-letter&gt;
-            T
-          &lt;/P::first-letter&gt;he first
-        &lt;/SPAN&gt;
-        few words of an article in the Economist.
-      &lt;/P&gt;
-    </pre>
-
-    Note that the ''::first-letter'' pseudo-element tags abut the
-    content (i.e., the initial character), while the ::first-line
-    pseudo-element start tag is inserted right after the start tag of the
-    block element.
-  </div>
+  See 'initial-letter' in [[CSS-INLINE-3]]
+  for explicitly handling drop caps and raised caps.
 
 <h2 id="highlight-pseudos">
 Highlight Pseudo-elements</h2>