Search code examples
svgtext

svg text - rtl issue

Whene i`m adding letter-spacing or word-spacing chrome flips rtl to ltr, and the letters\words are reversed. here is a sandbox: https://codesandbox.io/s/f57mc?file=/src/App.js

<svg textAnchor="middle">
  <text x="50" y="50" direction="rtl" writing-mode="rl"
    letterSpacing="4">שלום</text>
</svg>

thank in advance for any help

Solution

  • Update

    This is a known bug in the Chrome SVG renderer. The Chrome bug number is 973581.

    See that bug report for more information.

    Old answer

    It's a definite bug. I think it's just a deficiency in the text shaping algorithm of Chrome. The bug doesn't seem to affect the HTML text shaping code (see below).

    Please report the bug, as others have said. If you do, please add the bug number/link to this question for future reference.

    <svg>
  <text
    x="0"
    y="50"
    letter-spacing="4"
    >שלום</text>
</svg>

<p style="letter-spacing: 4px">שלום</p>