Reference even more baseline concepts in CSS Inline Layout

See w3c/csswg-drafts#5312. And also #5429 for where all of this started.

This should help #6731 quite a bit too.

Author: annevk

images/baselines.png

@@ -3875,6 +3875,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      alphabetic baseline
      ascent metric
      descent metric
+     em-over baseline
+     em-under baseline
      hanging baseline
      ideographic-under baseline
     
   attribute's allowed keywords correspond to alignment points in the
   font:
 
-  top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic-under baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square.">
+  em-over baseline is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the em-over and em-under baselines, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic-under baseline is where glyphs like 私 and 達 are anchored, and the em-under baseline is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside em-over and em-under baselines.">
 
   The keywords map to these alignment points as follows:
 
   
    top
-   The top of the em square
+   The em-over baseline
 
    hanging
    The hanging baseline
 
    middle
-   The middle of the em square
+   Halfway between the em-over baseline and the em-under baseline
 
    alphabetic
    The alphabetic baseline
    The ideographic-under baseline
 
    bottom
-   The bottom of the em square
+   The em-under baseline
   
 
   The direction attribute's allowed keywords are
@@ -68985,19 +68987,20 @@ try {
    emHeightAscent attribute
 
 
-
-   squares in the inline box, in CSS pixels; positive numbers
-   indicating that the given baseline is below the top of that em square (so this value will usually
-   be positive). Zero if the given baseline is the top of that em square; half the font size if the
-   given baseline is the middle of that em square.
+
+   baseline in the inline box, in CSS pixels;
+   positive numbers indicating that the given baseline is below the em-over baseline
+   (so this value will usually be positive). Zero if the given baseline is the em-over
+   baseline; half the font size if the given baseline is halfway between the em-over
+   baseline and the em-under baseline.
 
    emHeightDescent attribute
 
 
-
-   squares in the inline box, in CSS pixels; positive numbers
-   indicating that the given baseline is above the bottom of that em square. (Zero if the given baseline
-   is the bottom of that em square.)
+
+   baseline in the inline box, in CSS pixels;
+   positive numbers indicating that the given baseline is above the em-under baseline.
+   (Zero if the given baseline is the em-under baseline.)
 
    hangingBaseline attribute
 
@@ -69027,9 +69030,9 @@ try {
 
   Glyphs rendered using fillText() and
   strokeText() can spill out of the box given by the
-
-
-  to use the bounding box values described above if this is an issue.
+
+  (the text width). Authors are encouraged to use the bounding box values described above if this is
+  an issue.
 
   A future version of the 2D context API might provide a way to render fragments of
   documents, rendered using CSS, straight to the canvas. This would be provided in preference to a