Raphael is adding a 'dy' attribute

Question

I Am creating an image with raphael and the SVG it generats for paper.text() adds a <tspan dy="number"> where "number" is a number based off the Attr(font-size:n)

can someone tell me how this number is calculated as I need to know because what I send the serialized data to the server with toJSON() (a 3rd party plugin for raphael called ElbertF / Raphael.JSON) and recreate an SVG on the server the text is always out by this dy="number"

the dy value also seems to be linked to the text's y attribute as if I round the y value the dy value also gets rounded to the nearest 0.5

so for example:

textEmement = paper.text(Math.round(x_positionOfText),
                                                    Math.round(y_positionOfText));
textEmement.attr({ "font": "",
                   "fill": fontColour,
                   "font-family": "Arial",
                   "text-anchor": "middle",
                   "font-size": 17});

makes ->

<text style="text-anchor: middle; font-family: Arial; font-size: 17px;" x="161" y="48" text-anchor="middle" font="" stroke="none" fill="#ffffff" font-family="Arial" font-size="17px">
<tspan dy="5.5">Text 3</tspan>
 </text>

removing the Math.round() from y_positionOfText makes

 <text style="text-anchor: middle; font-family: Arial; font-size: 17px;" x="161" y="48.188976378525" text-anchor="middle" font="" stroke="none" fill="#ffffff" font-family="Arial" font-size="17px">
 <tspan dy="5.501476378524998">Text 3</tspan>
 </text>

Note how the y="48" gives dy="5.5" but y="48.188976378525" gives dy="5.501476378524998"

this is killing me! why does Raphael do this and HOW!?

Answer 1

Whenever I need to know how a library works, I read the source code. Now given that I didn't write Raphael I can't tell you exactly why the tspan is created like this, but I can certainly tell you how:

var bb = el._getBBox(),
    dif = a.y - (bb.y + bb.height / 2);
dif && R.is(dif, "finite") && $(tspans[0], {dy: dif});

Presumably this is fixing an issue with anchoring. It's shifting the text so that the mid-point of the tspan is aligned with the y attribute.

It's computed by checking the difference between the y attribute and the middle position of the text (bounding box top plus half the height).