[css-inline] add illustrations of drop, sunken, and raised caps

Author: dauwhe

css-inline/InitialLetter31.png

@@ -154,15 +154,20 @@ and is not ''initial-letter/normal'': this triggers the special layout considera
     <dt>''initial-letter: 3''
     <dt>(''initial-letter: 3 3'')
     <dd>Represents a <a>dropped initial</a> 3 lines high, 3 lines deep.
+    
+      <img src="InitialLetter33.png" alt="3 lines high, 3 lines deep" width="360"/>
 
     <dt>''initial-letter: 3 2''
     <dd>Represents a <a>sunken initial</a> 3 lines high, 2 lines deep.
+    
+      <img src="InitialLetter32.png" alt="3 lines high, 2 lines deep" width="360"/>
 
     <dt>''initial-letter: 3 1''
     <dd>Represents a <a>raised initial</a> 3 lines high, 1 line deep.
+    
+      <img src="InitialLetter31.png" alt="3 lines high, 1 line deep" width="360"/>
   </dl>
 
-  Issue: Add pictures.
 </div>
 
 <div class="example">

css-inline/InitialLetter32.png

@@ -62,7 +62,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Inline Layout Module Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft,
-    <time class=dt-updated datetime=2014-12-15>15 December 2014</time></span></h2>
+    <time class=dt-updated datetime=2014-12-16>16 December 2014</time></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-inline/>http://dev.w3.org/csswg/css-inline/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-inline/>http://www.w3.org/TR/css-inline/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2002/WD-css3-linebox-20020515/ rel=previous>http://www.w3.org/TR/2002/WD-css3-linebox-20020515/</a><dt>Feedback:<dd><span><a href="mailto:www-style@w3.org?subject=%5Bcss-inline%5D%20feedback">www-style@w3.org</a> with subject line “<kbd>[css-inline] <var>… message topic …</var></kbd>” (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)</span><dt>Issue Tracking:<dd><a href=#issues-index>Inline In Spec</a><dt class=editor>Editors:<dd class=editor><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:dauwhe@gmail.com>Dave Cramer</a> (<span class="p-org org">Hachette Livre</span>)</div><dd class=editor><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>Elika J. Etemad</a> (<span class="p-org org">Invited Expert</span>)</div><dd class=editor><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:szilles@adobe.com>Steve Zilles</a> (<span class="p-org org">Adobe</span>)</div><dt>Issues list:<dd><span><a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Linebox&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">CSS3 Line Layout issues in Bugzilla</a></span></dl></div>
   <div data-fill-with=warning></div>
   <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
@@ -254,14 +254,19 @@ <h3 class="heading settled" data-level=2.3 id=sizing-drop-initials><span class=s
     <dt>(<a class=css data-link-type=propdesc href=#propdef-initial-letter title=initial-letter>initial-letter: 3 3</a>)
     <dd>Represents a <a data-link-type=dfn href=#dropped-initial>dropped initial</a> 3 lines high, 3 lines deep.
 
+<p><img alt="3 lines high, 3 lines deep" src=InitialLetter33.png width=360></p>
+
     <dt><a class=css data-link-type=propdesc href=#propdef-initial-letter title=initial-letter>initial-letter: 3 2</a>
     <dd>Represents a <a data-link-type=dfn href=#sunken-initial>sunken initial</a> 3 lines high, 2 lines deep.
 
+<p><img alt="3 lines high, 2 lines deep" src=InitialLetter32.png width=360></p>
+
     <dt><a class=css data-link-type=propdesc href=#propdef-initial-letter title=initial-letter>initial-letter: 3 1</a>
     <dd>Represents a <a data-link-type=dfn href=#raised-initial>raised initial</a> 3 lines high, 1 line deep.
+
+<p><img alt="3 lines high, 1 line deep" src=InitialLetter31.png width=360></p>
   </dl>
 
-<p class=issue id=issue-2e07b898><a class=self-link href=#issue-2e07b898></a>Add pictures.</p>
 </div>
 
 <div class=example>
@@ -597,4 +602,4 @@ <h3 class="no-ref heading settled" id=testing><span class=content>
 
 
 
-<h2 class="no-num heading settled" id=references><span class=content>References</span><a class=self-link href=#references></a></h2><h3 class="no-num heading settled" id=normative><span class=content>Normative References</span><a class=self-link href=#normative></a></h3><dl><dt id=biblio-rfc2119 title=rfc2119><a class=self-link href=#biblio-rfc2119></a>[rfc2119]<dd>S. Bradner. <a href=https://tools.ietf.org/html/rfc2119>Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href=https://tools.ietf.org/html/rfc2119>https://tools.ietf.org/html/rfc2119</a></dl><h3 class="no-num heading settled" id=informative><span class=content>Informative References</span><a class=self-link href=#informative></a></h3><dl><dt id=biblio-css2 title=CSS2><a class=self-link href=#biblio-css2></a>[CSS2]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/CSS2>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href=http://www.w3.org/TR/CSS2>http://www.w3.org/TR/CSS2</a><dt id=biblio-css21 title=CSS21><a class=self-link href=#biblio-css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=biblio-css3-line-grid title=CSS3-LINE-GRID><a class=self-link href=#biblio-css3-line-grid></a>[CSS3-LINE-GRID]<dd>Elika J. Etemad; Koji Ishii; Alan Stearns. <a href=http://www.w3.org/TR/css-line-grid-1/>CSS Line Grid Module Level 1</a>. 16 December 2014. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/css-line-grid-1/>http://www.w3.org/TR/css-line-grid-1/</a><dt id=biblio-css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#biblio-css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=biblio-css3text title=CSS3TEXT><a class=self-link href=#biblio-css3text></a>[CSS3TEXT]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>CSS Text Module Level 3</a>. 13 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>http://www.w3.org/TR/2012/WD-css3-text-20121113/</a><dt id=biblio-select title=SELECT><a class=self-link href=#biblio-select></a>[SELECT]<dd>Tantek Çelik; et al. <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl><h2 class="no-num heading settled" id=index><span class=content>Index</span><a class=self-link href=#index></a></h2><ul class=indexlist><li>dropped initial, <a href=#dropped-initial title="section 2.1.1">2.1.1</a><li>initial-letter, <a href=#propdef-initial-letter title="section 2.3">2.3</a><li>initial letter, <a href=#initial-letter title="section 2.3">2.3</a><li>initial-letter-align, <a href=#propdef-initial-letter-align title="section 2.4">2.4</a><li>&lt;integer&gt;, <a href=#valdef-initial-letter-integer title="section 2.3">2.3</a><li>normal, <a href=#valdef-initial-letter-normal title="section 2.3">2.3</a><li>&lt;number&gt;, <a href=#valdef-initial-letter-number title="section 2.3">2.3</a><li>raised initial, <a href=#raised-initial title="section 2.1.3">2.1.3</a><li>sunken initial, <a href=#sunken-initial title="section 2.1.2">2.1.2</a></ul><h2 class="no-num heading settled" id=property-index><span class=content>Property Index</span><a class=self-link href=#property-index></a></h2><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Computed value<tbody><tr><th scope=row><a class=css data-link-type=property href=#propdef-initial-letter>initial-letter</a><td>normal | [&lt;number&gt; &lt;integer&gt;?]<td>normal<td>::first-letter pseudo-elements and inline-level first child of a block container<td>no<td>N/A<td>visual<td>no<td>as specified<tr><th scope=row><a class=css data-link-type=property href=#propdef-initial-letter-align>initial-letter-align</a><td>[ auto | alphabetic | hanging | ideographic ]<td>auto<td>::first-letter pseudo elements and inline level first child of a block container<td>no<td>N/A<td>visual<td>no<td>???</table><h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style=counter-reset:issue><div 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 <a data-biblio-type=informative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a> 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.)<a href=#issue-469c7c8c> ↵ </a></div><div class=issue>The editors would appreciate any examples of drop initials in non-western scripts, especially Arabic and Indic scripts.<a href=#issue-f90429eb> ↵ </a></div><div class=issue>Add pictures.<a href=#issue-2e07b898> ↵ </a></div><div class=issue>Define interaction with Ruby. Easiest is to make it not apply to/within ruby.<a href=#issue-664624cd> ↵ </a></div><div class=issue>Input from those knowledgeable about non-Western  typographic traditions would be very helpful in describing the appropriate alignments. More values may be required for this property.<a href=#issue-209367a3> ↵ </a></div><div class=issue>Are there other things we need to consider here?<a href=#issue-bef56215> ↵ </a></div><div class=issue>Handle glyph ink above cap height of font.<a href=#issue-f77cbeb9> ↵ </a></div><div class=issue>Is this the behavior we want? What if the float is on the same line as the initial letter?<a href=#issue-2ad0a0cb> ↵ </a></div></div>
+<h2 class="no-num heading settled" id=references><span class=content>References</span><a class=self-link href=#references></a></h2><h3 class="no-num heading settled" id=normative><span class=content>Normative References</span><a class=self-link href=#normative></a></h3><dl><dt id=biblio-rfc2119 title=rfc2119><a class=self-link href=#biblio-rfc2119></a>[rfc2119]<dd>S. Bradner. <a href=https://tools.ietf.org/html/rfc2119>Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href=https://tools.ietf.org/html/rfc2119>https://tools.ietf.org/html/rfc2119</a></dl><h3 class="no-num heading settled" id=informative><span class=content>Informative References</span><a class=self-link href=#informative></a></h3><dl><dt id=biblio-css2 title=CSS2><a class=self-link href=#biblio-css2></a>[CSS2]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/CSS2>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href=http://www.w3.org/TR/CSS2>http://www.w3.org/TR/CSS2</a><dt id=biblio-css21 title=CSS21><a class=self-link href=#biblio-css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=biblio-css3-line-grid title=CSS3-LINE-GRID><a class=self-link href=#biblio-css3-line-grid></a>[CSS3-LINE-GRID]<dd>Elika J. Etemad; Koji Ishii; Alan Stearns. <a href=http://www.w3.org/TR/css-line-grid-1/>CSS Line Grid Module Level 1</a>. 16 December 2014. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/css-line-grid-1/>http://www.w3.org/TR/css-line-grid-1/</a><dt id=biblio-css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#biblio-css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=biblio-css3text title=CSS3TEXT><a class=self-link href=#biblio-css3text></a>[CSS3TEXT]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>CSS Text Module Level 3</a>. 13 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>http://www.w3.org/TR/2012/WD-css3-text-20121113/</a><dt id=biblio-select title=SELECT><a class=self-link href=#biblio-select></a>[SELECT]<dd>Tantek Çelik; et al. <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl><h2 class="no-num heading settled" id=index><span class=content>Index</span><a class=self-link href=#index></a></h2><ul class=indexlist><li>dropped initial, <a href=#dropped-initial title="section 2.1.1">2.1.1</a><li>initial-letter, <a href=#propdef-initial-letter title="section 2.3">2.3</a><li>initial letter, <a href=#initial-letter title="section 2.3">2.3</a><li>initial-letter-align, <a href=#propdef-initial-letter-align title="section 2.4">2.4</a><li>&lt;integer&gt;, <a href=#valdef-initial-letter-integer title="section 2.3">2.3</a><li>normal, <a href=#valdef-initial-letter-normal title="section 2.3">2.3</a><li>&lt;number&gt;, <a href=#valdef-initial-letter-number title="section 2.3">2.3</a><li>raised initial, <a href=#raised-initial title="section 2.1.3">2.1.3</a><li>sunken initial, <a href=#sunken-initial title="section 2.1.2">2.1.2</a></ul><h2 class="no-num heading settled" id=property-index><span class=content>Property Index</span><a class=self-link href=#property-index></a></h2><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Computed value<tbody><tr><th scope=row><a class=css data-link-type=property href=#propdef-initial-letter>initial-letter</a><td>normal | [&lt;number&gt; &lt;integer&gt;?]<td>normal<td>::first-letter pseudo-elements and inline-level first child of a block container<td>no<td>N/A<td>visual<td>no<td>as specified<tr><th scope=row><a class=css data-link-type=property href=#propdef-initial-letter-align>initial-letter-align</a><td>[ auto | alphabetic | hanging | ideographic ]<td>auto<td>::first-letter pseudo elements and inline level first child of a block container<td>no<td>N/A<td>visual<td>no<td>???</table><h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style=counter-reset:issue><div 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 <a data-biblio-type=informative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a> 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.)<a href=#issue-469c7c8c> ↵ </a></div><div class=issue>The editors would appreciate any examples of drop initials in non-western scripts, especially Arabic and Indic scripts.<a href=#issue-f90429eb> ↵ </a></div><div class=issue>Define interaction with Ruby. Easiest is to make it not apply to/within ruby.<a href=#issue-664624cd> ↵ </a></div><div class=issue>Input from those knowledgeable about non-Western  typographic traditions would be very helpful in describing the appropriate alignments. More values may be required for this property.<a href=#issue-209367a3> ↵ </a></div><div class=issue>Are there other things we need to consider here?<a href=#issue-bef56215> ↵ </a></div><div class=issue>Handle glyph ink above cap height of font.<a href=#issue-f77cbeb9> ↵ </a></div><div class=issue>Is this the behavior we want? What if the float is on the same line as the initial letter?<a href=#issue-2ad0a0cb> ↵ </a></div></div>