CODEWITHSUNDEEP
htmlxmlsvgright-to-leftmarkup
DenverCoder1
DenverCoder1

Reputation: 2501

How do I separate right-to-left text in an SVG without English letters in between?

Example

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="100" viewBox="0 0 250 100">
<g transform="translate(10, 20)">
    <text>
        11K צפיות&ensp;•&ensp;לפני שנה
    </text>
</g>
</svg>

It currently displays like the following which is incorrect:

image1

I want it to instead display with צפיות on the left and לפני שנה on the right, for example:

image2

I do not want to have to rearrange the words themselves in the text as it is dynamically generated and should support many languages.

If I place an English letter between the words, eg. o instead of •, it displays in the right order, but there aren't any letters I want to put there.

image3

I have also tried looking into characters such as &rlm;, &lrm; but nothing has worked so far.

Update

I currently ended up making the group have an x-offset of width - 10 instead of 10 and style="direction: rtl" when a right-to-left language is used. It is not the same result, but I think it is better for my use case.

image4

I am still interested in hearing possible solutions to the original problem if anyone knows a clean way to do it, though.

Update 2

Thanks to the link Sam provided below, I found a solution to "Neutrals between same directional runs" (https://www.w3.org/International/tutorials/svg-tiny-bidi/#Slide0320) which is to use &#x200E; (or &lrm;) after the neutral characters to separate the run into two right-to-left runs.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="100" viewBox="0 0 250 100">
<g transform="translate(10, 20)">
    <text>
        11K צפיות&ensp;•&ensp;&lrm;לפני שנה
    </text>
</g>
</svg>

Upvotes: 3

Views: 139

Answers (1)

Sam Sabin
Sam Sabin

Reputation: 1167

I don't read Hebrew, but I looked it up and it appears that svg text written in right-to-left languages such as Hebrew is automatically edited by something called the "Unicode Bidirectional Algorithm". That is what is swapping your text.

There is a short example at the start of this article by W3 that seems to illustrate a similar formatting error to the one that you are getting, and an explanation of how to fix it.

I think in this example the solution would be to add the direction="rtl" attribute to the SVG, but I'm not entirely sure as I'm missing some crucial context. The solution is dependent on the context of the Hebrew, and the article is extremely detailed and explains many different scenarios, which I think should help!

Here is the article: https://www.w3.org/International/tutorials/svg-tiny-bidi/

Upvotes: 2

Related Questions