Bug with webkit browsers and text

[appstractmeyn]

paper.circle(50, 50, 50); var text = paper.text(50, 50, "Hi");

You would expect a circle and Hi written within it, but it has a bug for webkit browsers, such as chrome with the Y axis for the text.

Any fix?

[andreipetre]

Is there any fix for this yet or workaround? I'm experiencing the same issue when using paper.text. Maybe an older version did not have this issue?

[andreipetre]

Can this be caused by an error in the browsers as opposed to the JS library? I created a plot a few weeks ago, before Chrome and Safari pushed the last updates, that had no problems with paper.text(). Today, I opened the same plot in Chrome and Safari and the plot looks weird (to say the least). However it still looks fine in Firefox. #maybeThisHelps

[drawluap]

I too ran into this issue, and it appears the cause is that the tspan node's (the child of the text node) 'dy' attribute recieves the same value of its parent's 'y' attribute.

ex:

<text x="391.48" y="321.4697">
    <tspan dy="321.4697">Hi</tspan>
</text>

My workaround was to (re)set the tspan's 'dy' attribute:

paper.circle(50, 50, 50);
var text = paper.text(50, 50, "Hi");
if ($.browser.webkit) {
    $("tspan", text[0]).attr("dy", 3.5); // I used '3.5' in order to offset my circle's stroke
}

[andreipetre]

Thank you @drawluap! Very good advice. My approach was to add a function that fixes all "text tspan" elements within an SVG, e.g.

Raphael.prototype.fixTextForWebkit = function () {
    if ($.browser.webkit) {
        $("svg text tspan").attr("dy", 0);
    }
};

[TheCloudlessSky]

I've actually ran into this today. The issue is because getComputedStyle returns an empty string for font-size and therefore the parseInt returns a NaN.

The reason, at least in my code, is because the Raphael paper wasn't actually added to the DOM yet.

[scovetta]

Nice solution, @andreipetre, but it doesn't solve multi-line text. Text gets broken up at newlines and then all get laid on top of each other. You could do:

Raphael.prototype.fixTextForWebkit = function () {
    if ($.browser.webkit) {
        $("svg text tspan:first-child").attr("dy", 0);
    }
};

Even in this case, only the first line is centered, everything else comes after that.

[andreipetre]

@scovetta good point. My use case only needed single line text as I was just using 1-2 words for labels on plots.