SVG and text alignment in browsers vs in inkscape, batik etc.

[jerome cukier]

Hi,

I had built a little tool that lets me make charts from a web form.
That worked well under protovis, I worked on it on and off to update
it to d3 and this works well for the most part, I can churn out lots
of charts with transitions, mouseover effects etc. with minimum work.
one part of my process is that I create a static version of the chart
for the people who have IE8 or earlier, which are still a majority in
my organisation and a sizeable part of my audience.
to do so, when the chart is generated I let users get the svg file.
then it can be rendered to png with batik.

ok so here's my question.

when I worked with protovis, the alignment of the text looked the same
on screen and once rendered through batik or open with inkscape.
now, my text appears lower in the image in those tools, compared to
how it looks in the browser.

here's an example.
here's a html page:
http://www.oecdfactblog.org/charter/tests/myChart.html
here's the corresponding svg:
http://www.oecdfactblog.org/charter/tests/myChart.svg (which should
look fine in a browser)
here's what batik gives me:
http://www.oecdfactblog.org/charter/tests/myChart.png

and I can't find where did I go wrong in the text attributes, ie what
would be interpreted differently than in the browser.
help welcome :)

best,
jerome

[Mike Bostock]

My guess is that Batik ignores this style:

dominant-baseline: hanging;

You should use attr("dy", ".71em") to bottom-aligned text instead,
which is what I've been using in the D3 examples (and what Protovis
used). You can also use attr("dy", ".35em") for vertically-centered
text.

Mike

[Nelson Minar]

On Thu, Feb 23, 2012 at 10:43 AM, Mike Bostock <mbos...@cs.stanford.edu> wrote:

My guess is that Batik ignores this style:
 dominant-baseline: hanging;

Sadly very few browsers seem to support dominant-baseline and baseline-shift. Just Safari and Chrome, I think; not Mobile Safari, IE, or Firefox last I checked.