Search code examples
svgarabic

SVG <text> gets misaligned on Arabic version of site?

I have a complex svg layout that's made of elements like <rect>, <path>, <text>, etc.

The svg displays perfectly on the English version of the website, but on the Arabic version of the site, all the elements are moved slightly to the right.

I have compared the svg code between the Arabic and English versions just to be sure, and all the transform-matrixes are the same.

Solution

  • The issue was caused by the rtl setting in the <html> tag (dir = rtl).

    I fixed the issue by setting dir=ltr to the svg container element. (Note, it did not work if dir=ltr was set to the <svg> directly).