[css-inline] add illustration of Devangari initial letter

Author: dauwhe

css-inline/Overview.bs

@@ -75,6 +75,16 @@ The alignment constraints for drop initials depend on the writing system. In Jap
 
 Note: In some cases, the exclusion area for the drop initial is larger than its glyph in order to preserve inline-axis alignment. This effect is out-of-scope for this level. However, extra spacing can still be given using margins.
 
+In some Indic scripts, the top alignment point 
+is the hanging baseline, 
+and the bottom alignment point is the text-after-edge. 
+
+<figure>
+  <img src="Devangari-Initial.png" width="480" alt="Devangari initial letter"/>
+  <p class="caption">Devangari <a>initial letter</a> aligned with hanging baseline. Alignment points shown in red.</p>
+</figure>
+
+
 <h4 id="sunk-initial">
 Sunken Initial Letters</h4>
 

css-inline/Overview.html

@@ -185,6 +185,16 @@ <h4 class="heading settled" data-level=2.1.1 id=drop-initial><span class=secno>2
 
 <p class=note role=note>Note: In some cases, the exclusion area for the drop initial is larger than its glyph in order to preserve inline-axis alignment. This effect is out-of-scope for this level. However, extra spacing can still be given using margins.</p>
 
+<p>In some Indic scripts, the top alignment point
+is the hanging baseline, 
+and the bottom alignment point is the text-after-edge.</p>
+
+<figure>
+  <img alt="Devangari initial letter" src=Devangari-Initial.png width=480>
+  <p class=caption>Devangari <a data-link-type=dfn href=#initial-letter>initial letter</a> aligned with hanging baseline. Alignment points shown in red.</p>
+</figure>
+
+
 <h4 class="heading settled" data-level=2.1.2 id=sunk-initial><span class=secno>2.1.2. </span><span class=content>
 Sunken Initial Letters</span><a class=self-link href=#sunk-initial></a></h4>