[css-pseudo] Clean up ::first-letter and ::before/::after definitions.

--HG--
rename : css-pseudo/Overview.src.html => css-pseudo/Overview.bs
extra : rebase_source : fe2dbf98cc1224cfc0be1e3257652cde1bb7cc9d

Author: fantasai

css-pseudo/Overview.bs

@@ -10,7 +10,7 @@ TR: http://www.w3.org/TR/css-pseudo-4/
 Editor: fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
 Editor: Alan Stearns, Adobe Systems Inc., stearns@adobe.com
 Abstract: This CSS module defines pseudo-elements, abstract elements that represent portions of the CSS render tree that can be selected and styled.
-Ignored Terms: typographic letter unit, Unicode general category
+Ignored Terms: typographic letter unit, Unicode general category, initial-letter
 </pre>
 
 <h2 id="intro">Introduction</h2>
@@ -36,11 +36,14 @@ Ignored Terms: typographic letter unit, Unicode general category
   and on their syntax and interaction with other <i>selectors</i>,
   see [[!SELECTORS4]].
 
+<h2 id="typographic-pseudos">
+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 <i>first formatted line</i> of an element. 
+  the <i>first formatted line</i> of its <i>originating element</i>.
 
   <div class="example">
     The rule below means
@@ -125,7 +128,7 @@ The ::first-line pseudo-element</h3>
   </div>
 
 <h4 id="first-text-line">
-The first formatted line</h4>
+Finding the First Formatted Line</h4>
 
   In CSS, the ''::first-line'' pseudo-element
   can only have an effect when attached to a <i>block container</i>.
@@ -169,6 +172,9 @@ The first formatted line</h4>
     </pre>
   </div>
 
+<h4 id="first-line-styling">
+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.
   The following CSS properties apply to a ''::first-line'' pseudo-element:
@@ -184,6 +190,9 @@ The first formatted line</h4>
   </ul>
   User agents may apply other properties as well.
 
+<h4 id="first-line-inheritance">
+Inheritance and the ''::first-line'' Pseudo-element</h4>
+
   During CSS inheritance, the portion of a child element that occurs on the first line
   only inherits properties applicable to the ''::first-line'' pseudo-element
   from the ''::first-line'' pseudo-element.
@@ -195,88 +204,67 @@ The first formatted line</h4>
 <h3 id="first-letter-pseudo">
 The ::first-letter pseudo-element</h3>
 
-  The <dfn>::first-letter</dfn> pseudo-element represents
-  the first <i>typographic letter unit</i> of an element,
+  The ''::first-letter'' pseudo-element represents
+  the first <i>typographic letter unit</i> [[!CSS3TEXT]]
+  on the <i>first formatted line</i> of its <i>originating element</i>,
   if it is not preceded by any other content
   (such as images or inline tables) on its line.
   The ''::first-letter'' pseudo-element can be used
   to create “initial caps” and “drop caps”,
-  which are common typographical effects. 
-  Punctuation (i.e, characters that belong to the Punctuation (<code>P</code>) <i>Unicode general category</i> [[!UAX44]])
+  which are common typographic effects.
+
+  <div class="example">
+    For example, the following rule creates a 2-line drop-letter
+    on every paragraph following a level-2 header,
+    using the 'initial-letter' property defined in [[CSS3LINE]]:
+
+    <pre>h2 + p::first-letter { initial-letter: 2; }
+    </pre>
+  </div>
+
+  Punctuation (i.e, characters that belong to the Punctuation (<code>P*</code>) <i>Unicode general category</i> [[!UAX44]])
   that precedes or follows the first <i>typographic letter unit</i> must also be included
   in the ''::first-letter'' pseudo-element.
 
   <div class="figure">
       <img alt="Quotes that precede the first letter should be included." src="http://www.w3.org/TR/selectors/first-letter2.png">
   </div>
 
-  The ''::first-letter'' also applies if the first letter is in
-  fact a digit, e.g., the “6” in “67 million dollars is a lot of money.”
- 
-  Note: In some cases the ''::first-letter'' pseudo-element
-  should include more than just the first non-punctuation character on a line.
+  As explained in [[!CSS3TEXT]],
+  a <i>typographic letter unit</i> can include more than one Unicode codepoint.
   For example, combining characters must be kept with their base character.
-  Additionally, some languages may have specific rules about
-  how to treat certain letter combinations.
-  The User-Agent definition of ''::first-letter''
-  should include at least the default grapheme cluster as defined by UAX29
-  and may include more than that as appropriate.
+  Also, languages may have additional rules
+  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 <i>typographic letter unit</i>
+  to reflect the first-letter traditions of the <i>originating element</i>’s content language.
+  Issue: This is actually a problem in cases where the originating element is an ancestor
+  with a different content. What <em>should</em> we say here?
 
-  If the letters that would form the ''::first-letter''
-  are not in the same element,
-  such as "‘T" in <code>&lt;p&gt;'&lt;em&gt;T...</code>,
+  Note: Note that the first <i>typographic letter unit</i> may in fact
+  be a digit, e.g., the “6” in “67 million dollars is a lot of money.”
+
+  If the characters that would form the ''::first-letter''
+  are not in the same element, such as "‘<code class="css">T" 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.
-  Similarly, if the first letter(s) of the block
+  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). 
-
-  <div class="example" id="overlapping-example">
-    The following CSS and HTML example
-    illustrates how overlapping pseudo-elements may interact.
-    The first letter of each P element will be green with a font size of ’24pt'.
-    The rest of the first formatted line will be blue
-    while the rest of the paragraph will be red.
-
-    <pre>
-      p { color: red; font-size: 12pt }
-      p::first-letter { color: green; font-size: 200% }
-      p::first-line { color: blue }
-      
-      &lt;P&gt;Some text that ends up on two lines&lt;/P&gt;
-    </pre>
+  then the user agent need not create the pseudo-element(s).
 
-    Assuming that a line break will occur before the word "ends",
-    the <i>fictional tag sequence</i> for this fragment might be:
-    <pre>
-      &lt;P&gt;
-      &lt;P::first-line&gt;
-      &lt;P::first-letter&gt;
-      S
-      &lt;/P::first-letter&gt;ome text that
-      &lt;/P::first-line&gt;
-      ends up on two lines
-      &lt;/P&gt;
-    </pre>
+  The ''::first-letter'' pseudo-element is contained within any ''::first-line''
+  pseudo-elements, and thus inherits from ''::first-line''.
 
-    Note that the ''::first-letter'' element is inside the ''::first-line'' element.
-    Properties set on ''::first-line'' are inherited by ''::first-letter'',
-    but are overridden if the same property is set on ''::first-letter''.
-  </div>
+<h4 id="application-in-css">
+Finding the First Letter</h4>
 
   The first letter must occur on the <i>first formatted line</i>.
   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
-  (assuming the default style for <code>br</code> in HTML 4).
+  and ''::first-letter'' doesn't match anything.
   In particular, it does not match the “F” of “First”.
 
-<h4 id="application-in-css">
-Application in CSS</h4>
-
   In CSS, the ''::first-letter'' pseudo-element
   only applies to block containers.
   <span class="note">A future version of this specification
@@ -323,6 +311,9 @@ Application in CSS</h4>
     selector ''p::first-letter'' matches the "N" of "Note".
   </div>
 
+<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
   if its 'float' property is ''none'';
   otherwise, it is similar to a floated element.
@@ -424,26 +415,81 @@ Application in CSS</h4>
   approximate font sizes, for example to align baselines. Also, the glyph
   outline may be taken into account when formatting. 
 
-<h3 id="generated-content">
-The ::before and ::after pseudo-elements</h3>
-
-  The <dfn>::before</dfn> and <dfn>::after</dfn> pseudo-elements
-  can be used to describe generated content before or after
-  an element's content.
-  They are explained in CSS 2.1 [[!CSS21]].
-
-  When the ''::first-letter'' and ''::first-line'' pseudo-elements
-  are applied to an element having content generated
-  using ''::before'' or ''::after'' pseudo-elements,
-  they apply to the first letter or line of the element including the generated content. 
-
-  A <a href="http://www.w3.org/TR/CSS2/syndata.html#rule-sets">CSS rule</a>
-  using ''::before'' or ''::after'' creates a pseudo-element only if
-  the <a href="http://www.w3.org/TR/CSS2/cascade.html#computed-value">computed
-    values</a> of the '<a href="http://www.w3.org/TR/CSS2/generate.html#content">content</a>'
-  property and the '<a href="http://www.w3.org/TR/css3-regions/#the-flow-from-property"><span
-      class="property">flow-from</span></a>'
-  property [[CSS3-REGIONS]] are not both ''none''.
+<h2 id="generated-content">
+Generated Content Pseudo-elements: ''::before'' and ''::after''</h2>
+
+  When their computed 'content' value is not ''none'',
+  these pseudo-elements generate boxes
+  as if they were immediate children of their <i>originating element</i>,
+  and can be styled exactly like any normal document-sourced element in the document tree.
+  They <i title="inheritance">inherit</i> any inheritable properties from their <i>originating element</i>;
+  non-inheritable properties take their <i>initial values</i> as usual.
+  [[CSS3CASCADE]]
+
+  <dl>
+    <dt><dfn>::before</dfn>
+    <dd>Represents a styleable child pseudo-element
+    immediately before the <i>originating element</i>'s actual content.
+
+    <dt><dfn>::after</dfn>
+    <dd>Represents a styleable child pseudo-element
+    immediately before the <i>originating element</i>'s actual content.
+  </dl>
+
+  <div class="example">
+    For example, the following rule inserts the string “Note: ”
+    before the content of every <code>&lt;p></code> element
+    whose <code>class</code> attribute has the value <code>note</code>:
+
+    <pre>p.note::before { content: "Note: " }</pre>
+
+    Since the initial value of 'display' is ''inline'',
+    this will generate an inline box.
+    Like other inline children of <code>&lt;p></code>,
+    it will participate in <code>&lt;p></code>’s inline formatting context,
+    potentially sharing a line with other content.
+  </div>
+
+  As with the content of regular elements,
+  the generated content of ''::before'' and '':after'' pseudo-elements
+  may be included in any ''::first-line'' and ''::first-letter'' pseudo-elements
+  applied to its <i>originating element</i>.
+
+  <p>For compatibility with existing style sheets written against CSS Level 2 [[CSS21]],
+  user agents must also accept the previous one-colon notation
+  (<code>:before</code> and <code>:after</code>)
+  for these pseudo-elements.
+
+<h2 id="interactions">Overlapping Pseudo-element Interactions</h2>
+
+  <div class="example" id="overlapping-example">
+    The following CSS and HTML example
+    illustrates how overlapping pseudo-elements may interact.
+    The first letter of each P element will be green with a font size of ’24pt'.
+    The rest of the first formatted line will be blue
+    while the rest of the paragraph will be red.
+
+    <pre>
+      p { color: red; font-size: 12pt }
+      p::first-letter { color: green; font-size: 200% }
+      p::first-line { color: blue }
+      
+      &lt;P&gt;Some text that ends up on two lines&lt;/P&gt;
+    </pre>
+
+    Assuming that a line break will occur before the word "ends",
+    the <i>fictional tag sequence</i> for this fragment might be:
+    <pre>
+      &lt;P&gt;
+      &lt;P::first-line&gt;
+      &lt;P::first-letter&gt;
+      S
+      &lt;/P::first-letter&gt;ome text that
+      &lt;/P::first-line&gt;
+      ends up on two lines
+      &lt;/P&gt;
+    </pre>
+  </div>
 
 <h2 id="cssom">
 Additions to the CSS Object Model</h2>