Rendering RTL text along an SVG Path

Question

Trying to render a Hebrew text along a path in SVG causes a bug in Chrome - the glyphs are rendered backwards (left-to-right), making the text unreadable.

<svg height="220" width="190">
    <defs>
        <path id="MyPath2" d="M0,100 L200,100" />
    </defs>
    <use xlink:href="#MyPath2" fill="none" stroke="red"  />
    <text text-anchor="middle" dx="100" dy="0" writing-mode="rl" direction="rtl">
        <textPath xlink:href="#MyPath2">
            הטקסט הזה ייראה הפוך
        </textPath>
    </text>     
</svg>

Is there a way to get around this? Is this a known bug or is there an attribute I should've used?

JSFIddle: http://jsfiddle.net/j9RnL/

Warhol

It looks like writing-mode="rl" is deprecated in favor of "rl-tb", but changing that doesn't appear to solve your issue. developer.mozilla.org/en-US/docs/Web/CSS/writing-mode – Wales

The only other relevant attribute is unicode-bidi. You could try "embed" or "bidi-override" values to see if they have the desired effect. You could also try drawing the path in the opposite direction, i.e. in the direction you want the text to go, like d="M200,100 L0,100". JSFiddle is currently giving me an error face instead of a result frame, so I can't test it out myself. It might come down to a Chrome bug; support for RTL languages in SVG is not as good as the people who wrote the specs envisioned. – Rebellious

Currently, it is working fine in Firefox 42.0, May be, SVG was not support was not fully implemented a that time. – Aideaidedecamp

I don't suppose you figured this out? I can still repro the bug in Chrome & Safari, so is probably a bug in Webkit. If i remove the dx attr on the <tspan>, the text appears RTL. – Cerellia

Answer 1

After not finding an elegant solution myself, I just reversed the characters.

function reverse(s, languageCode) {
    if (['he', 'ar'].indexOf(languageCode) === -1)
        return s;
    return s.split("").reverse().join("");
}

Perseid

Answer 2

I modified your SVG and it seems to render correctly on Chrome 100 and Firefox 100:

<svg viewBox="0 0 190 220" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="MyPath2" d="M0,100 L200,100"/>
  </defs>
  <use href="#MyPath2" fill="none" stroke="red"/>
  <text text-anchor="middle" dx="100" dy="0" writing-mode="rl" direction="rtl">
    <textPath href="#MyPath2">
      הטקסט הזה ייראה הפוך
    </textPath>
  </text>
</svg>

Kelsy