[css-inline] rewrite section on alignment of replaced content

Author: dauwhe

css-inline/Overview.bs

@@ -26,7 +26,7 @@ Link Defaults: css-fonts-3 (property) font-family
 
 <h2>Line Heights and Baseline Alignment</h2>
 
-<p class="issue">This section is being rewritten. Refer to <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">section 10.8</a> of [[CSS21]] for the normative CSS definition or the <a href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515/">2002 Working Draft</a> if you want pretty pictures. (But ignore the old text, half of it's wrong.)</p>
+<p class="issue">This section is being rewritten. Refer to <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">section 10.8</a> of [[CSS21]] for the normative CSS definition or the <a href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515/">2002 Working Draft</a> if you want pretty pictures. (But ignore the old text, half of it's wrong. We're not specifying which half, that's to be determined.)</p>
 
 
 
@@ -122,34 +122,24 @@ The alignment constraints depend on the script used. In Japanese vertical writin
 
 <h3 id="selecting-drop-initials">Selecting Initial Letters</h3>
 
-Initial letters are typically a single letter, which can be selected by the <code>::first-letter</code> pseudo-element, as defined in [[SELECT]]. Authors who need more control over which characters are included in an initial letter can also apply the 'initial-letter' property to the first inline child of a block container.
-
-
-
-
-Only the following properties can be applied to the <code>::first-letter</code> pseudo-elements:
-
-<ul>
-  <li>font properties</li>
-  <li>color properties</li>
-  <li>background properties</li>
-  <li>text decoration properties</li>
-  <li>baseline alignment properties (only if 'float' is ''none'')</li>
-  <li>'text-transform'</li>
-  <li>'letter-spacing'</li>
-  <li>'line-height' (may be ignored depending on the block line-stacking strategy)</li>
-  <li>margin properties</li>
-  <li>padding properties</li>
-  <li>border properties</li>
-  <li>'float'</li>
-  <li>text-shadow</li>
-  <li>'clear'</li>
-  <li>'initial-letter'</li>
-  <li>'initial-letter-align'</li>
-  </ul>
-
+Initial letters are typically a single letter, which can be selected by the <code>::first-letter</code> pseudo-element, as defined in [[SELECT]].
 
+<p>Authors who need more control over which characters are included in an initial letter, or who want to apply initial-letter formatting to replaced elements or multiple words can also apply the 'initial-letter' property to the first inline-level child of a block container.
 
+<div class="example">
+  <pre>
+    &lt;p>This paragraph has a dropped “T”.
+    &lt;p>&lt;img alt="H" src="illuminated-h.svg">ere we have an illuminated “H”.
+    &lt;p>&lt;span>Words may also&lt;/span> be given initial letter styling at the beginning of a paragraph.
+  </pre>
+
+  <pre>
+    ::first-letter, /* style first paragraph's T */
+    img, /* style illuminated H */
+    span /* drop Words may also */
+    { initial-letters: 2; }
+  </pre>
+</div>
 
 <h3 id="sizing-drop-initials">Creating Initial Letters: the 'initial-letter' property</h3>
 
@@ -276,13 +266,11 @@ span.initial {
 
 </div>
 
+If 'initial-letter' is applied to an image or other atomic element that does not provide the necessary alignment information, the alignment points for the image must be synthesized from the content edges.
 
-<h4 id="initial-letter-replaced">Applying 'initial-letter' to replaced elements</h4>
-
-'initial-letter' may be applied to an image or other replaced element, if it is the first child of the block container. In this case, the alignment points for the image would be the content edges.
+Issue: Need to decide whether using margin edges or content edges for alignment. Writing Modes uses the margin edges for baseline alignment of replaced elements. There are cases for both content-alignment and margin-alignment for text. In both cases the margin box needs to be excluded.
 
 
-<p class="issue">TK</p>
 
 
 <h3 id="initial-letter-exclusions">Space Around Initial Letters</h3>