svg:text – baseline considered harmful

SVG has a bunch of properties for laying out text. Two really handy ones are “dominant-baseline” and “baseline-shift”, which together let you move text up and down a bit. “dominant-baseline: central” seems particularly useful because it lets you lay out text where 0, 0 is the middle of the text, not the baseline underneath the letters. Ie: visually center things vertically.

Unfortunately those properties don’t work in many SVG implementations. They work in Safari and Chrome, but not in Mobile Safari, IE, or Firefox.

A workaround is to use the dy parameter on the text nodes to move them around. dy: .35em is about like centering. I don’t think this works via CSS, though, only in the DOM.