[css-inline] add figure describing ooptical kerning

Author: dauwhe

css-inline/Overview.bs

@@ -341,6 +341,11 @@ is not a space (<a>Unicode general category</a> <code>Zs</code>),
 the UA should optically kern the first line of text into the <a>initial letter</a>’s area
 as necessary to maintain perceptual continuity of the text.
 
+<figure>
+<img src="OpticalKerning.png" alt="optical kerning in the presence or absence of a space after the initial letter" width="200"/>
+<p class="caption">In the top paragraph, the initial letter "A" has a word space after it. In the middle paragraph, the initial letter "A" is part of a word. In this case, the first line of text should be kerned into the initial letter's area as shown in the bottom paragraph.</p>
+</figure>
+
 <h3 id="initial-letter-paragraphs">Clearing Initial Letters</h3>
 
 <h4 id="raised-sunken-caps">Raised and sunken caps</h4>

css-inline/Overview.html

@@ -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,
-    <span class=dt-updated><span class=value-title title=20141215>15 December 2014</span></span></span></h2>
+    <time class=dt-updated datetime=2014-12-15>15 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.
@@ -403,6 +403,11 @@ <h3 class="heading settled" data-level=2.9 id=initial-letter-position><span clas
 the UA should optically kern the first line of text into the <a data-link-type=dfn href=#initial-letter>initial letter</a>’s area
 as necessary to maintain perceptual continuity of the text.</p>
 
+<figure>
+<img alt="optical kerning in the presence or absence of a space after the initial letter" src=OpticalKerning.png width=200>
+<p class=caption>In the top paragraph, the initial letter "A" has a word space after it. In the middle paragraph, the initial letter "A" is part of a word. In this case, the first line of text should be kerned into the initial letter’s area as shown in the bottom paragraph.</p>
+</figure>
+
 <h3 class="heading settled" data-level=2.10 id=initial-letter-paragraphs><span class=secno>2.10. </span><span class=content>Clearing Initial Letters</span><a class=self-link href=#initial-letter-paragraphs></a></h3>
 
 <h4 class="heading settled" data-level=2.10.1 id=raised-sunken-caps><span class=secno>2.10.1. </span><span class=content>Raised and sunken caps</span><a class=self-link href=#raised-sunken-caps></a></h4>