mdn
alignment-baseline does not work on <text> in Firefox
MDN URL: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline
What information was incorrect, unhelpful, or incomplete?
The example has the alignmnet-baseline attribute on a text element. This is not supported (see the comment under the image: 'For object alignment in other elements (such as <text>), see dominant-baseline.')
Specific section or headline?
Example section
What did you expect to see?
An example where the attributes are applied to supported elements.
Did you test this? If so, how?
https://codepen.io/tomfroehle/pen/yLoXKZz
Example in Chrome 95.0.4638.54:
Example in FireFox 93.0:
MDN Content page report details
- Folder:
en-us/web/svg/attribute/alignment-baseline - MDN URL: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/svg/attribute/alignment-baseline/index.md
- Last commit: https://github.com/mdn/content/commit/bd3f490ef78b600a1435dfe3611a27f3f2fbf4ef
- Document last modified: 2021-09-23T21:22:12.000Z
An example where the attributes are applied to supported elements.
Of the two non-deprecated attributes tspan and textPath, I tried creating an example with tspan. Unless I got the svg wrong, that doesn't work either. I tried looking for a Firefox bug, but couldn't find one. Chrome is right here:-
<svg width="300" height="120" viewBox="0 0 300 120"
xmlns="http://www.w3.org/2000/svg">
<!-- Materialization of anchors -->
<path d="M30,65 L300,65" stroke="grey" />
<!-- Anchors in action -->
<text x="60" y="65">A <tspan alignment-baseline="hanging">hanging</tspan></text>
<circle cx="60" cy="65" r="3" fill="red" />
<style><![CDATA[
text{
font: bold 36px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>
Related: https://github.com/mdn/content/issues/22260
The CSS spec for alignment-baseline says it applies to SVG text content elements, which includes text, textPath, and tspan (tref is deprecated). Firefox doesn't implement alignment-baseline yet: https://bugzilla.mozilla.org/show_bug.cgi?id=1403440
