[css-inline] add section on wrapping around initial letters

Author: dauwhe

css-inline/Overview.bs

@@ -457,6 +457,14 @@ If 'initial-letter' is applied to an image or other atomic element that does not
 
 Note: For 'vertical-align', the alignment points of an atomic inline are synthesized from the margin edges. [[CSS3-WRITING-MODES]]
 
+
+
+
+
+
+
+
+
 <h3 id="initial-letter-box">
 Margins, Borders, and Padding</h3>
 
@@ -564,6 +572,109 @@ In the <a>inline axis</a>, the position of the inline letter is given by alignin
 
 However, if the <a>initial letter</a> is a non-atomic inline with zero padding and borders, the UA must apply an additional negative offset on the start side of the amount necessary to optically align the first glyph to the containing block edge as it would be in normal text.
 
+
+<h4 id="initial-letter-wrapping">
+Initial Letter Wrapping</h4>
+
+<pre class="propdef">
+Name: <dfn id="propdef-initial-letter-wrap">initial-letter-wrap</dfn>
+Value: none | auto | first-line
+Initial: none
+Applies to: <code>::first-letter</code> pseudo-elements and inline-level first child of a block container
+Inherited: no
+Percentages: N/A
+Media: visual
+Computed value: as specified
+</pre>
+
+<dl dfn-for=initial-letter-wrap dfn-type=value>
+<dt><dfn>none</dfn>
+<dd>No wrapping is performed.</dd>
+<dt><dfn>auto</dfn></dt>
+<dd>For each line of text impacted by the initial letter, the line box adjacent to the intial letter starts at the left-most point that touches the ink of the initial letter, plus a fixed amount of offset.</dd>
+
+Issue: How much offset? Based on the right side-bearing of the initial letter? That could be a problem as it's sometimes negative (see Zapfino). 
+
+<dt><dfn>first-line</dfn>
+<dd>As auto, but wrapping only performed on the first line of the block containing the initial letter.</dd>
+</dl>
+
+Issue: Rewrite for logical directions.
+
+Issue: Bikeshed value names. 
+
+
+Issue: Do we need anything else for scripts where this behavior is undesirable? Or is default "none" sufficient? 
+
+
+Note: If the next character after the initial letter is a whitespace character, auto and first-line compute to none, in order to avoid the initial letter appearing to be part of the subsequent word. 
+
+
+<div class="example">
+<pre>
+p::first-letter {
+  initial-letter: 3;
+  initial-letter-wrap: none;
+}
+</pre>
+
+<img alt="regular dropcap A"  src="images/A-wraparound-none.png" width="600">
+
+Ordinary initial letter with no wrapping. 
+</figure>
+</div>
+
+
+<div class="example">
+<pre>
+p::first-letter {
+  initial-letter: 3;
+  initial-letter-wrap: auto;
+}
+</pre>
+<img alt="text wrapping around dropcap A"  src="images/A-wraparound.png" width="600">
+
+Text follows shape of initial letter. Each line box should just touch the ink of the letter, with some offset (represented by the shaded box).
+
+</div>
+
+
+<div class="example">
+<pre>
+p::first-letter {
+  initial-letter: 3;
+  initial-letter-wrap: first-line;
+}
+</pre>
+
+<img alt="text wrapping around dropcap A but only on first line"  src="images/A-wraparound-first.png" width="600">
+
+Only first line is moved up against the ink of the initial letter.
+
+</div>
+
+
+<div class="example">
+
+  <img alt="text wrapping around dropcap V"  src="images/V-wraparound.png" width="600">
+
+</div>
+
+<div class="example">
+
+  <img alt="text wrapping around dropcap P"  src="images/P-wraparound.png" width="600">
+
+</div>
+
+<div class="example">
+
+  <img alt="text wrapping around dropcap W"  src="images/W-wraparound.png" width="600">
+
+</div>
+
+Issue: What should happen with initial letters that are concave on the (right) side? Wrapping the middle line in a three-line initial "K" can look very strange. 
+
+
 Additionally, when borders and padding are zero
 and the next <a>typographic character unit</a> after the <a>initial letter</a>
 is not a space (<a>Unicode general category</a> <code>Zs</code>),