CODEWITHSUNDEEP
htmlsvg
Kesavan Subramaniam Che
Kesavan Subramaniam Che

Reputation: 895

How to render Arabic text in svg with span elements?

I am trying to display Arabic text by replacing English words in span elements. But it interchanged by its words.

I have tried by adding direction, xml: lang, unicode-bidi to svg attributes. It changes to RTL but it did not changes order

Please refer this fiddles:

Expected output with english words modelOutput.

<!DOCTYPE html>
<html>
<head>
<title>SVG with english words</title>
</head>
<body>

<svg id="container_svg" width="117.5" height="71.5" opacity="1">
  <g id="container_group" opacity="1">
    <path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25  L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
    <text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
      dominant-baseline="undefined"><tspan
      x="19" fill="#dbdbdb">Browsers</tspan><tspan
      x="25" dy="27" fill="#dbdbdb">Opera : </tspan><tspan
      fill="#ffffff" style="font-weight:bold">37%</tspan></text>
    <path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
    <defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
    <g id="container_trackball_group">
      <ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
    </g>
  </g>
</svg>

</body>
</html>

Actual output actual.

<!DOCTYPE html>
<html>
<head>
<title>SVG with Arabic words</title>
</head>
<body>

<svg id="container_svg" width="117.5" height="71.5" opacity="1">
  <g id="container_group" opacity="1">
    <path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25  L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
    <text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
      dominant-baseline="undefined"><tspan
      x="19" fill="#dbdbdb">ذكي متصفح</tspan><tspan
      x="25" dy="27" fill="#dbdbdb">كروم : </tspan><tspan
      fill="#ffffff" style="font-weight:bold">37%</tspan></text>
    <path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
    <defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
    <g id="container_trackball_group">
      <ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
    </g>
  </g>
</svg>

</body>
</html>

I expect that Browsers will be replaced with متصفح ذكي. Similarly opera with ايفون.

Actual output image actual. Expected output expect.

Can anyone help me to acheive this?

Upvotes: 2

Views: 1686

Answers (1)

ccprog
ccprog

Reputation: 21856

The problem arises because the sequence " : " has no defined direction. Unicode has a group of bidirectional control characters that help with the interpretation of such situations. If you insert a left-to-right mark between the كروم and the following interpunction, it is made clear everything that follows goes left-to-right.

While in HTML the mark could be written as &lrm;, this does not work inside the SVG namespace, which is pure XML. There you have to use the numeric entity &#8206; instead. The extra <tspan> I introduced is not strictly neccesary, but it makes reading of the code a bit easier - otherwise the apparent order on the screen would be a bit confusing.

<svg id="container_svg" width="117.5" height="71.5" opacity="1">
  <g id="container_group" opacity="1">
    <path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25  L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
    <text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
      dominant-baseline="undefined"><tspan
      x="19">ذكي متصفح</tspan><tspan
      x="25" dy="27">كروم</tspan>&#8206;<tspan> : </tspan><tspan
      fill="#ffffff" style="font-weight:bold">37%</tspan></text>
    <path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
    <defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
    <g id="container_trackball_group">
      <ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
    </g>
  </g>
</svg>

Wouldn't live be easier without bugs? Theoretically, that should be the solution, and in Chrome in fact it is. In Firefox, the width of a rtl <tspan> is computed wrong, and the following ltr part disappears to the right. The best workaround I can find is to change the layout a bit so that the percentage number appears right-aligned at the end of the second line:

<svg id="container_svg" width="117.5" height="71.5" opacity="1">
  <g id="container_group" opacity="1">
    <path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25  L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
    <text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
      dominant-baseline="undefined"><tspan
      x="19">ذكي متصفح</tspan><tspan
      x="25" dy="27">كروم</tspan>&#8206;<tspan text-anchor="end" x="107"> : </tspan><tspan
      fill="#ffffff" style="font-weight:bold">37%</tspan></text>
    <path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
    <defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
    <g id="container_trackball_group">
      <ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
    </g>
  </g>
</svg>

Upvotes: 1

Related Questions