[css-inline] add illustrations for measuring baselines from letterforms

Author: dauwhe

css-inline/Overview.bs

@@ -1142,12 +1142,22 @@ Appendix A: Synthesizing Alignment Metrics</h2>
 					descends below the alphabetic baseline
 					can be subtracted from its highest point
 					to <a href="https://drafts.csswg.org/css-values/#ex">measure the x-height</a>.
+					
+					<figure>
+						<img src="images/measuring-x-height-o.png" width="240" 
+						alt="measuring the x height of the letter o"  >
+						<figcaption>
+							Measuring the x height.
+						</figcaption>
+					</figure>
 
 				<li>
 					The amount by which the uppercase “O”
 					descends below the alphabetic baseline
 					can be subtracted from its highest point
 					to measure the cap-height.
+					
+
 
 				<li>
 					The top edge of the below ideograph (U+4E05 “丅”)
@@ -1197,6 +1207,14 @@ Appendix A: Synthesizing Alignment Metrics</h2>
 					</table>
 
 					Issue: Pick a default.
+					
+					<figure>
+						<img src="images/measuring-hanging-baseline-ka.png" width="240" 
+						alt="finding the position of the hanging baseline of the letter ka"  >
+						<figcaption>
+							The hanging baseline is at the top edge of the character ink.
+						</figcaption>
+					</figure>
 
 				<li>Issue: Add more notes here?
 			</ol>