Text Vertical Alignment

[mercury2269]

text vertical alignment is different in browsers, any clean solutions?

I got this weird text alignment issue, if I set text to var test = paper.text(30, 22, "something); and then test.remove(); and again test = paper.text(30, 22, "something); vertical alignment for y becomes 26 in FF and chrome, any ideas?

Thank you

[uiteoi]

Could you paste an example that shows the problem in Raphael Playground?

Personally I have found this workaround to alignment issues: http://groups.google.com/group/raphaeljs/browse_thread/thread/daf44c4c1557b898

But I did not test what happens after removing some elements. I did make tests removing all elements and did not notice any issue.

[uiteoi]

I have created a gist showing a working solution: http://gist.github.com/265480 This could be used towards a fix to this problem although this is not a patch. I use this solution in my Graph library: http://github.com/uiteoi/ico It works regardless of the font, size, and angle and of printed text

[dnozay]

http://raphaeljs.com/playground.html

for (i=0, x=Math.random()*200, y=Math.random()*300; i< 100; i++) paper.text(30+x, 30+y, "something");
paper.text(30, 30, "something"); /* for comparison */

Is the placement not deterministic?

[cleonello]

I found this same issue. The vertical (y) alignment difference was especially noticeable between IE and SVG capable browsers such as FF and Chrome. I made a slight modification to raphael.js which fixed this problem. The mod also positions text at (roughly) it's baseline rather than it's middle. A diff of my changes:

<                 dif = a.y - (bb.y + bb.height / 2);
---
>                 // Mod to put text at proper baseline.
>                 // dif = a.y - (bb.y + bb.height / 2);
>                 dif = 0;
2009c2011,2013
<                     this.textpath.v = ["m", round(attr.x), ", ", round(attr.y - 2), "l", round(attr.x) + 1, ", ", round(attr.y - 2)][join](E);
---
>                     // Mod to put text at proper baseline.
>                     // this.textpath.v = ["m", round(attr.x), ", ", round(attr.y - 2), "l", round(attr.x) + 1, ", ", round(attr.y - 2)][join](E);
>                     this.textpath.v = ["m", round(attr.x), ", ", round(attr.y-(this.H-2)/4), "l", round(attr.x) + 1, ", ", round(attr.y-(this.H-2)/4)][join](E);

[DmitryBaranovskiy]

Fixed in 2.0

[antoineguiral]

Well it seems there is still a problem (at least between chrome & FF). I've played with the @uiteoi's gist (http://gist.github.com/265480) on the playground and alignements are differents.

Any idea?

(Btw, I reopen this issue because I've the probleme too. You can try it with the official exemple : http://raphaeljs.com/analytics.html remove .hide() on lines 78 and 79)

Thank you :)

[antoineguiral]

it seems chrome play badly with _getBBox (a console log here https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.js#L4021 show only rounded value with chrome, I dunno if it's normal but it sounds weird)