Menu
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/
610
In SVG, text can be displayed not only horizontally or vertically but along any vector curve. SVG can place text along a path defined by a <path> element. This is making by a <textPath> element in a few ways: Attribute href ( xlink:href) references to an URL pointing to the <path> element. Attribute path specifies the SVG path data directly.
Within the SVG code itself we can position text exactly as we want it to render on the screen. In taking this manipulation even further, SVG <text> can be set to follow a given <path> element, and that text can then be animated to move along this path!
If the length of the path is shorter than the text size, then only the text part that is within the extent of the path is drawn. In the figure, the second curve is shorter than the text length, so text breaks off at the path end. The SVG text can be styled using CSS properties like font-weight, font-style, text-decoration, text-transform, etc.
It is advisable, of course, to keep a copy of the file with the text that has yet to be rendered in the event you need to make changes. You can do this in Inkscape by selecting the text then going to Path > Object to Path (Shift + Ctrl + C).
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("");
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
