Firefox Support for Alignment-Baseline Property

dominant-baseline doesn't work in Firefox

In the SVG 1.1 specification dominant-baseline is not an inherited property. SVG 2 changes things such that dominant-baseline is inherited. Firefox only implemented that SVG 2 feature in version 70. I.e. after this question was originally written.

In the meantime simply set dominant-baseline on the text element.

g {  transform: translate(50px, 50px);  text-anchor: middle;}text {  dominant-baseline: middle;}

<svg width="100" height="100">  <g>    <circle cx="0" cy="0" r="15" stroke="#000" fill="#ffffff" />    <text x="0" y="0">A</text>  </g></svg>

How to align a text vertically using SVG with cross-browser compatibility?

The "alignment-baseline" is not supported by Firefox.
Try to use the attribute "dominant-baseline", it should work for both (Chrome & Firefox but not for IE, see below).

Look at this old answer

According to SVG spec, alignment-baseline only applies to "tspan", "textPath", "tref" and "altGlyph". My understanding is that it is used to offset those from the "text" object above them. I think what you are looking for is dominant-baseline.

It works for Chrome and Firefox but not for IE. If you also want to have a vertical-centered text in IE you have to use a work-arournd like this:

<svg style="" width="60" height="60">
<rect 
    x            = "0"
    y            = "0"
    rx           = "1"
    ry           = "1"
    width        = "17"
    height       = "15"
    fill         = "rgb(254,199,186)"
    stroke       = "rgb(152,119,111)"
    stroke-width = "1">
</rect>
<text 
    id                 = "default-text"
    x                  = "8"
    y                  = "8"
    fill               = "rgb(50,39,37)"
    font-size          = "16"
    font-family        = "monospace"
    alignment-baseline = "middle"
    dominant-baseline  = "middle"
    text-anchor        = "middle">
    a
</text><script>
    window.onload = function() {
        var text = document.getElementById("default-text"),
            bbox = text.getBBox(),
            actualHeight = (4 - bbox.y),
            fontSize = parseInt(window.getComputedStyle(text)["fontSize"]),
            offsetY = (actualHeight / 2) - (bbox.height - fontSize);

        text.setAttribute("transform", "translate(0, " + offsetY + ")");
    }
</script>

Cross-Browser SVG Text Baseline Alignment

replace alignmentBaseline with dominantBaseline.

Firefox does not currently support the former property but does support the latter.

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

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.

Firefox and Chrome button text baseline different

The fonts were different. Though they are the same in CSS, they weren't being loaded properly so one of the browsers was using a fallback while the other wasn't. To help debug this document.fonts.check is very useful.

Thanks Temani Afif for the pointer in the right direction.

How to center text inside an svg element on Firefox?

So according to the Mozilla docs, "alignment-baseline" and "text-anchor" aren't officially supported in the tag, so you will have to use x and y positions instead. (Link)

So what I found that seemed to look the best was this:

<svg viewBox="-20,-20,40,40" class="progress-ring">
    <circle r="20" class="progress-ring-circle"></circle>
    <path d="M0,-20 A20,20,0,0,1,6.180339887498949,-19.02113032590307" 
    class="progress-ring-ring" style="stroke: rgb(255, 0, 0);"></path>
    <text dx="-4" dy="5"> 1 </text>
</svg>

Though, you could probably mess around a little more to get it completely centered the way you want it.

webkit-baseline-middle and -moz-middle-with-baseline

@VSG24:

Are they part of any standards?

Both properties are not part of any standards, according to W3C CSS reference. They only seem to be used by Webkit and Gecko to behave correctly, as expected in CSS 2.1 specification:

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

CSS 2.1 specs, p170

---

@VSG24:
What is the expected behavior when using them?

After some search on the web, here's what I've found about -webkit-baseline-middle on the Safari CSS Reference:

vertical-align: -webkit-baseline-middle:

The center of the element is aligned with the baseline of the text.

I was unable to get any info about -moz-middle-with-baseline other than this one :

Q: Webkit-baseline-middle - are there alternatives?

A: the same, only for Mozilla
>vertical-align: -moz-middle-with-baseline;

https://toster.ru/q/255210

---

Below is a test, you may try it using Webkit based browsers (such as Chrome) and Gecko (Firefox):

div {
  width: 15%;
  height: 100px;
  display: inline-block;
  box-sizing: border-box;
}

hr {
  width: 100%;
  position: absolute;
  top: 90px;
  height: 1px;
  background: hotpink;
  border: none;
}

.container {
  border: 2px solid hotpink;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 100%;
  z-index: -1;
}

.reference {
  background: darkblue;
}

.standard {
  background: teal;
  vertical-align: middle;
}

.moz {
  background: antiquewhite;
  vertical-align: -moz-middle-with-baseline;
}

.webkit {
  background: darksalmon;
  vertical-align: -webkit-baseline-middle
}

<div class="container">
  <hr />
  <div class="reference"></div>
  <div class="standard"></div>
  <div class="moz"></div>
  <div class="webkit"></div>
</div>

---

Related Topics