Menu
Does Firefox have any support at all for the alignment-baseline property? When I inspect (using Firebug) SVG elements for which the alignment-baseline property has been explicitly set, Firebug does not list this property at all (IOW it treats is as noise). No matter what value I assign to this property, the appearance of the displayed text never changes, further suggesting that FF ignores this property altogether.
(One other sign that FF's support for this property may be busted is that the link given in the page cited above for the CSS documentation for this property is dead-as-a-doornail.)
Assuming that, as it appears, FF does not support the alignment-baseline property, what is the value of this property that would most closely replicate FF's default behavior?
EDIT: For example, view this jsFiddle with both Chrome and FF; each line of displayed text displayed a highlighted word that has been produced with code of the following form:
<tspan style="alignment-baseline:alphabetic">alphabetic</tspan> Note that all the lines look the same in FF, but not so in Chrome.
There are a few possible candidate values for this property to replicate FF's default behavior (namely, auto, alphabetic, mathematic, and inherit); unfortunately, this experiment cannot decide the matter, and it's not clear to me which of the possible options would match FF's default behavior in the greatest fraction of cases.
355
The alignment-baseline attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes.
The dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box's text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the box's alignment context.
Baseline attributes are a list of fields that have a predefined expected value. Each baseline attribute lists both an attribute name and an attribute value. The attribute name is the field that contains the expected value.
The traditional baseline is the line upon which most letters sit and from which the total height of elements should derive. To make matters worse, the CSS line-height property doesn't have an inherent concept of baseline, and each line of text is placed roughly in the middle of the element's total height.
It seems that alignment-baseline is ment to be used only for portions of <text>, that is for elements tspan, tref etc. For the main <text> element use the dominant-baseline attribute.
(This is what @Tanel Eero wrote above as a comment. I'm re-stating it here so the question can get an accepted answer).
149
The Mozilla Developer Network website states that the style can only be used on certain elements:
The following elements can use the alignment-baseline attribute
<tspan> <tref> <altglyph> <textpath>
So that seems to be your main issue as I understand that you are trying to apply it to a SVG.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
