vertical alignment of text element in SVG
SvgVertical AlignmentW3cSvg Problem Overview
Let's say I have the SVG file:
<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x='20' y='60' style="font-size: 60px">b</text>
<text x='100' y='60' style="font-size: 60px">a</text>
</svg>
I want to somehow align the top of a
and b
. Actually, I want my positioning to be according to the roofline
instead of baseline
!
Svg Solutions
Solution 1 - Svg
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
.
Possible values of dominant-baseline
are:
> auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit
Check the W3C recommendation for the dominant-baseline property for more information about each possible value.
Solution 2 - Svg
The alignment-baseline
property is what you're looking for it can take the following values
auto | baseline | before-edge | text-before-edge |
middle | central | after-edge | text-after-edge |
ideographic | alphabetic | hanging | mathematical |
inherit
Description from w3c
> This property 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. It defaults to the baseline with the same name as > the computed value of the alignment-baseline property. That is, the > position of "ideographic" alignment-point in the > block-progression-direction is the position of the "ideographic" > baseline in the baseline-table of the object being aligned.
Unfortunately, although this is the "correct" way of achieving what you're after it would appear Firefox have not implemented a lot of the presentation attributes for the SVG Text Module ('SVG in Firefox' MDN Documentation)
Solution 3 - Svg
attr("dominant-baseline", "central")
Solution 4 - Svg
If you're testing this in IE, dominant-baseline and alignment-baseline are not supported.
The most effective way to center text in IE is to use something like this with "dy":
<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>
The negative value will shift it up and a positive value of dy will shift it down. I've found using -.4em seems a bit more centered vertically to me than -.5em, but you'll be the judge of that.
Solution 5 - Svg
After looking at the SVG Recommendation I've come to the understanding that the baseline properties are meant to position text relative to other text, especially when mixing different fonts and or languages. If you want to postion text so that it's top is at y
then you need use dy = "y + the height of your text"
.