Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rendering RTL text along an SVG Path

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.

letters are backwards

<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/

like image 610
TastySpaceApple Avatar asked Jul 20 '14 11:07

TastySpaceApple


People also ask

How to display text along a path in SVG?

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.

How do I animate text in SVG?

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!

How to style SVG text using CSS?

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.

How do I make changes to a text file before rendering?

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).


Video Answer


1 Answers

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("");
}
like image 122
Gil Stal Avatar answered Nov 26 '22 01:11

Gil Stal