[css-pseudo-4] Define ::prefix and ::postfix sub-elements of ::first-letter. #2040

Author: fantasai

css-pseudo-4/Overview.bs

@@ -16,13 +16,14 @@ Editor: Daniel Glazman, Disruptive Innovations, w3cid 13329
 Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
 Editor: Alan Stearns, Adobe Systems Inc., stearns@adobe.com, w3cid 46659
 Abstract: This CSS module defines pseudo-elements, abstract elements that represent portions of the CSS render tree that can be selected and styled.
+At Risk: the ''::prefix'' and ''::postfix'' sub-elements of ''::first-letter''
 Ignored Terms: initial-letter, PseudoElement, pseudo(), selectors
 Default Highlight: css
 Indent: 2
 </pre>
 <pre class="link-defaults">
-spec:css-color-3; type:value; text:currentcolor
-spec:css-color-3; type:property; text:color
+spec:css-color-4; type:value; text:currentcolor
+spec:css-color-4; type:property; text:color
 spec:fill-stroke-3; type:property; text:stroke-width
 </pre>
 
@@ -53,7 +54,7 @@ spec:fill-stroke-3; type:property; text:stroke-width
 Typographic Pseudo-elements</h2>
 
 <h3 id="first-line-pseudo">
-The ::first-line pseudo-element</h3>
+First-Line Text: the ''::first-line'' pseudo-element</h3>
 
   The <dfn>::first-line</dfn> [=pseudo-element=] represents
   the contents of the [=first formatted line=]
@@ -171,7 +172,7 @@ Finding the First Formatted Line</h4>
   </div>
 
 <h4 id="first-line-styling">
-Styling the First Line Pseudo-element</h4>
+Styling the ''::first-line'' Pseudo-element</h4>
 
   The ''::first-line'' pseudo-element’s generated box
   behaves similar to that of an inline-level element, but with certain restrictions.
@@ -274,9 +275,9 @@ Inheritance and the ''::first-line'' Pseudo-element</h4>
 
 
 <h3 id="first-letter-pseudo">
-The ::first-letter pseudo-element</h3>
+First-Letter Text: ''::first-letter'' pseudo-element and its ''::prefix'' and ''::postfix'' children</h3>
 
-  The <dfn>::first-letter</dfn> pseudo-element represents
+  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>,
   its <dfn>first-letter text</dfn>.
@@ -317,8 +318,20 @@ The ::first-letter pseudo-element</h3>
       <img alt="Quotes that precede the first letter should be included." src="images/first-letter2.gif">
   </div>
 
+  To allow independent styling of the first letter itself
+  and its adjacent punctuation,
+  any punctuation included in ''::first-letter''
+  that comes before the first <a>typographic letter unit</a>
+  is represented by the <dfn for="::first-letter">::prefix</dfn>
+  sub-[=pseudo-element=] of the ''::first-letter'' [=pseudo-element=]
+  (''::first-letter::prefix'');
+  and any such punctuation that comes after the first <a>typographic letter unit</a>
+  is represented by the <dfn for="::first-letter">::postfix</dfn>
+  sub-[=pseudo-element=] of the ''::first-letter'' [=pseudo-element=]
+  (''::first-letter::postfix'').
+
 <h4 id="first-letter-application">
-Finding the First Letter Text</h4>
+Finding the First-Letter Text</h4>
 
   As with ''::first-line'',
   the ''::first-letter'' pseudo-element
@@ -364,7 +377,7 @@ Finding the First Letter Text</h4>
   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>
+Inheritance and Box Tree Structure of the First-Letter Pseudo-elements</h4>
 
   The ''::first-letter'' pseudo-element is wrapped
   immediately around the [=first-letter text=] it represents,
@@ -387,20 +400,47 @@ Inheritance and Box Tree Structure of the ''::first-letter'' Pseudo-element</h4>
     to represent the elements’ ''::first-letter'' pseudo-elements,
     it would be something like:
 
-    <pre class="lang-markup">
+    <pre>
       &lt;div&gt;
         &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>
 
+  If any ''::first-letter::prefix'' or ''::first-letter::postfix'' [=pseudo-elements=] are required,
+  they are nested within the innermost ''::first-letter'',
+  and otherwise interpreted similar to ''::first-letter'' itself.
+
+  <div class="example">
+    Consider the following markup:
+
+    <pre class="lang-markup">
+      &lt;div&gt;
+        &lt;p&gt;&lt;span&gt;“The first few words&lt;/span>
+        and the rest of the quotation.
+      &lt;/div&gt;
+    </pre>
+
+    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;span&gt;&lt;div::first-letter&gt;&lt;p::first-letter&gt;<strong>&lt;div::first-letter::prefix&gt;&lt;p::first-letter::prefix&gt;</strong>“<strong>&lt;/&hellip;&gt;&lt;/&hellip;&gt;</strong>T&lt;/&hellip;&gt;&lt;/&hellip;&gt;he first few words&lt;/span>
+        and the rest of the paragraph.
+      &lt;/div&gt;
+    </pre>
+  </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 class="lang-css">&lt;p&gt;‘&lt;em&gt;T...</code>),
-  the user agent may create a ''::first-letter'' pseudo-element
+  the user agent may create the ''::first-letter'' pseudo-element
+  (and its ''::prefix'' or ''::postfix'' sub-elements, if any)
   from one of the elements, or all elements,
-  or simply not create a pseudo-element.
+  or simply not create the pseudo-element(s).
   Additionally, if the [=first-letter text=]
   is not at the start of the line
   (for example due to bidirectional reordering,
@@ -413,10 +453,14 @@ Inheritance and Box Tree Structure of the ''::first-letter'' Pseudo-element</h4>
   the same as any [=inline box=] on the same line.
 
 <h4 id="first-letter-styling">
-Styling the ''::first-letter'' Pseudo-element</h4>
+Styling the First-Letter Pseudo-elements</h4>
 
-  In CSS a ::first-letter pseudo-element is similar to an [=inline box=].
-  The following properties that apply to ''::first-letter'' pseudo-elements:
+  In CSS a ''::first-letter'' [=pseudo-element=]
+  (and its ''::prefix'' and ''::postfix'' sub-elements)
+  is similar to an [=inline box=].
+  The following properties that apply to
+  ''::first-letter'', ''::first-letter::prefix'', and ''::first-letter::postfix''
+  pseudo-elements:
 
   <ul>
     <li>all font properties (see [[CSS-FONTS-3]])
@@ -922,6 +966,8 @@ List Markers: the ''::marker'' pseudo-element</h3>
   and the computed value of 'display' on ''::marker''
   always loses any ''display/list-item'' aspect.
 
+  ISSUE: Should ''::marker'' also have ''::prefix'' and ''::postfix'' sub-elements?
+
 <h3 id="placeholder-pseudo">
 Placeholder Input: the ''::placeholder'' pseudo-element</h3>