What's the difference between Dominant-baseline and Alignment-baseline? - svg

Question

I've googled but got this:
https://codepen.io/felipe_matos/pen/pMrXpK
html, body, svg {
height: 200px;
}
text {
font: bold 8px Verdana, Helvetica, Arial, sans-serif;
}
.flex {
display: flex;
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline -->
<div class="flex">
<div>
<h2>Dominant-baseline</h2>
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<path d="M20,15 L180,15 M20,30 L180,30 M20,45 L180,45 M20,60 L180,60 M20,75 L180,75 M20,90 L180,90" stroke="grey" />
<text dominant-baseline="ideographic" x="30" y="30">Ideographic</text>
<text dominant-baseline="baseline" x="30" y="45">Baseline</text>
<text dominant-baseline="middle" x="30" y="60">Middle</text>
<text dominant-baseline="hanging" x="30" y="75">Hanging</text>
<text dominant-baseline="text-before-edge" x="30" y="90">text-before-edge</text>
<text dominant-baseline="text-after-edge" x="30" y="15">text-after-edge</text>
</svg>
</div>
<div>
<h2>Alignment-baseline</h2>
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<path d="M20,15 L180,15 M20,30 L180,30 M20,45 L180,45 M20,60 L180,60 M20,75 L180,75 M20,90 L180,90" stroke="grey" />
<text alignment-baseline="ideographic" x="30" y="30">Ideographic</text>
<text alignment-baseline="baseline" x="30" y="45">Baseline</text>
<text alignment-baseline="middle" x="30" y="60">Middle</text>
<text alignment-baseline="hanging" x="30" y="75">Hanging</text>
<text alignment-baseline="text-before-edge" x="30" y="90">text-before-edge</text>
<text alignment-baseline="text-after-edge" x="30" y="15">text-after-edge</text>
</svg>
</div>
</div>
it seems the two properties are exactly the same. Then why do we have two different types?

Answer 1

The distinction is that dominant-baseline is the baseline used to calculate the baseline table. Specifically the distinction will be found when you mix different fonts, for example, if you are using a roman font like English and quote something in an Indic Script, "অসমীয়া লিপিবাংলা লিপি". The baseline in the script is visible there, but it's different than the English baseline. Though in practice it tends to do the same thing probably because the distinction is pretty minor and involves building an adjustment table first vs. adjusting for the baseline.