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.

source

@@ -3875,6 +3875,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-inline/#alphabetic-baseline">alphabetic baseline</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-inline/#ascent-metric">ascent metric</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-inline/#descent-metric">descent metric</dfn></li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-inline/#em-over-baseline">em-over baseline</dfn></li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-inline/#em-under-baseline">em-under baseline</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-inline/#hanging-baseline">hanging baseline</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-inline/#ideographic-under-baseline">ideographic-under baseline</dfn></li>
     </ul>
@@ -66561,19 +66563,19 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
   attribute's allowed keywords correspond to alignment points in the
   font:</p>
 
-  <p><img src="/images/baselines.png" width="738" height="300" alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like &#x0906; 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 &#x00C1;, &#x00FF;, &#x0066;, and &#x03A9; are anchored, the ideographic-under baseline is where glyphs like &#x79C1; and &#x9054; 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."></p>
+  <p><img src="/images/baselines.png" width="738" height="300" alt="The em-over baseline is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like &#x0906; are anchored, the middle is half-way between the em-over and em-under baselines, the alphabetic baseline is where characters like &#x00C1;, &#x00FF;, &#x0066;, and &#x03A9; are anchored, the ideographic-under baseline is where glyphs like &#x79C1; and &#x9054; 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."></p>
 
   <p>The keywords map to these alignment points as follows:</p>
 
   <dl>
    <dt><dfn enum-value for="CanvasTextBaseline"><code data-x="dom-context-2d-textBaseline-top">top</code></dfn>
-   <dd>The top of the em square</dd>
+   <dd>The <span>em-over baseline</span></dd>
 
    <dt><dfn enum-value for="CanvasTextBaseline"><code data-x="dom-context-2d-textBaseline-hanging">hanging</code></dfn>
    <dd>The <span>hanging baseline</span></dd>
 
    <dt><dfn enum-value for="CanvasTextBaseline"><code data-x="dom-context-2d-textBaseline-middle">middle</code></dfn>
-   <dd>The middle of the em square</dd>
+   <dd>Halfway between the <span>em-over baseline</span> and the <span>em-under baseline</span></dd>
 
    <dt><dfn enum-value for="CanvasTextBaseline"><code data-x="dom-context-2d-textBaseline-alphabetic">alphabetic</code></dfn>
    <dd>The <span>alphabetic baseline</span></dd>
@@ -66582,7 +66584,7 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
    <dd>The <span>ideographic-under baseline</span></dd>
 
    <dt><dfn enum-value for="CanvasTextBaseline"><code data-x="dom-context-2d-textBaseline-bottom">bottom</code></dfn>
-   <dd>The bottom of the em square</dd>
+   <dd>The <span>em-under baseline</span></dd>
   </dl>
 
   <p>The <code data-x="dom-context-2d-direction">direction</code> attribute's allowed keywords are
@@ -68985,19 +68987,20 @@ try {
    <dt><dfn attribute for="TextMetrics"><code data-x="dom-textmetrics-emHeightAscent">emHeightAscent</code></dfn> attribute</dt>
 
    <dd><p>The distance from the horizontal line indicated by the <code
-   data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the highest top of the em
-   squares in the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>; 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.</p></dd>
+   data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the <span>em-over
+   baseline</span> in the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>;
+   positive numbers indicating that the given baseline is below the <span>em-over baseline</span>
+   (so this value will usually be positive). Zero if the given baseline is the <span>em-over
+   baseline</span>; half the font size if the given baseline is halfway between the <span>em-over
+   baseline</span> and the <span>em-under baseline</span>.</p></dd>
 
    <dt><dfn attribute for="TextMetrics"><code data-x="dom-textmetrics-emHeightDescent">emHeightDescent</code></dfn> attribute</dt>
 
    <dd><p>The distance from the horizontal line indicated by the <code
-   data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the lowest bottom of the em
-   squares in the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>; 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.)</p></dd>
+   data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the <span>em-under
+   baseline</span> in the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>;
+   positive numbers indicating that the given baseline is above the <span>em-under baseline</span>.
+   (Zero if the given baseline is the <span>em-under baseline</span>.)</p></dd>
 
    <dt><dfn attribute for="TextMetrics"><code data-x="dom-textmetrics-hangingBaseline">hangingBaseline</code></dfn> attribute</dt>
 
@@ -69027,9 +69030,9 @@ try {
 
   <p class="note">Glyphs rendered using <code data-x="dom-context-2d-fillText">fillText()</code> and
   <code data-x="dom-context-2d-strokeText">strokeText()</code> can spill out of the box given by the
-  font size (the em square size) and the width returned by <code
-  data-x="dom-context-2d-measureText">measureText()</code> (the text width). Authors are encouraged
-  to use the bounding box values described above if this is an issue.</p>
+  font size and the width returned by <code data-x="dom-context-2d-measureText">measureText()</code>
+  (the text width). Authors are encouraged to use the bounding box values described above if this is
+  an issue.</p>
 
   <p class="note">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