CODEWITHSUNDEEP
svgright-to-leftpersian
Vahid Arjmand
Vahid Arjmand

Reputation: 73

how to use SVG textpath in persian(rtl) text

I want to use the textpath feature for Persian text, but when I do this Persian text separates into letters:

SVG textpath

Correct Persian text without using the textpath feature: تی مدیا مرکز تخصصی ارائه خد مات سئو

Upvotes: 5

Views: 1176

Answers (2)

koorosh safeashrafi
koorosh safeashrafi

Reputation: 309

Similarly, You can edit your text with "Shetab Farsi Negar 3.8" SoftWare. this link for download this SoftWare : Shetab Farsi Negar 3.8 (password: www.p30download.com)

If the link does not work, you can search for this software on Iranian websites.

Example

The correct code to your question:

.contain-demo {
  margin: 50px auto;
  text-align: center;
}
<div class="contain-demo">
  <svg width="620" height="200">
     <defs>
        <path id="testPath" d="M3.858,58.607
        c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628  c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449" />
    </defs>
    <text x="2" y="40%" fill="#765373" font-size="30" font-family="'Lato', sans-serif">
      <textPath xlink:href="#testPath">ﻥﺍﺮﯾﺍ ﺭﺩ ﻮﺌﺳ ﺕﺎﻣﺪﺧ ﯽﺼﺼﺨﺗ ﺰﮐﺮﻣ ﺎﯾﺪﻣ ﯽﺗ</textPath> 
    </text> 
  </svg>
</div>

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101918

This is a consequence of the algorithm that SVG specifies for laying out text on a path.

http://www.w3.org/TR/SVG/text.html#TextpathLayoutRules

The algorithm specifies that each character be positioned intact and rotated to orient with the tangent of the path at that point.

However the SVG specification provides an attribute called method, on <textPath> elements, that is supposed to do what you want.

http://www.w3.org/TR/SVG11/text.html#TextPathElementMethodAttribute

Unfortunately, no browser currently supports it AFAIK.

Upvotes: 3

Related Questions