SVG icon indicating copy to clipboard operation
SVG copied to clipboard

Render problem of Arabic string with "(" symbol

Open diydevdesign opened this issue 2 years ago • 1 comments

I'm working on convert SVG to PNG using svg-net in c#. the problem is when I meet Arabic character "(" or ")" . - (other characters no problem).

The position and direction of the "(" symbol is rendered differently than in the original SVG text .

text in SVG file render result

sample svg code is:

<?xml-stylesheet type="text/css"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" baseProfile="basic" contentStyleType="text/css" id="test" version="1.1" width="1080px" preserveAspectRatio="xMidYMid meet" viewBox="-15 -20 1095 1010" height="1440px" x="0px" y="0px">
  <g id="textbox" transform="scale(1.6875) translate(11,96)">
        <g type="Background" id="A3">
          <rect x="140.397995" y="0.000000" fill="#004C91" width="220.0" rx="6" class="background_fill_1 background_stroke_22" height="170.0" ry="6" stroke="#FCFFFF" stroke-width="3"/>
        </g>        
        <g id="A11" type="Text">
          <text x="215.284710" font-size="20" y="29.984963" fill="#FCFFFF" class="text_fill_22 text_font-family_6 text_font-weight_1" font-weight="normal">شارع لطيفة بنت</text>
          <text x="235.909716" font-size="20" y="52.477149" fill="#FCFFFF" class="text_fill_22 text_font-family_6 text_font-weight_1" font-weight="normal">حمدان (غرب)</text>
        </g>
  </g>
<defs>
<style type="text/css"><![CDATA[
.text_font-family_6 {font-family: "DejaVu Sans"}
.text_font-style_3 {font-style: normal}
.text_font-weight_1 {font-weight: normal}
.background_fill_1 {fill: #004C91}
.background_fill_27 {fill: none}
.background_stroke_22 {stroke: #FCFFFF}
.text_fill_22 {fill: #FCFFFF}
.text_fill_27 {fill: none}
]]></style>
</defs>
</svg>


My development environment is as follows.

  • VS 2017 , c# .net (4.6.1)
  • svg-net (3.4.4)

My expecting result is below, expecting result

Additonally, I don't know how to change contents in svgDocument.

var svgDoc = SvgDocument.Open<SvgDocument>(tempSvgname);
svgDoc.GetElementById("A11").Children[k].Content = "changed text";

using (MagickImage img = new MagickImage(svgDoc.Draw(width * 2, height * 2)))
{
  // no change text in render result
  ...
}

Thanks for help. Note1. This problem does not occur when viewing svg files in chrome. Note2. I have attached the svg file that causes the problem.

test_problem

diydevdesign avatar Mar 30 '23 01:03 diydevdesign

Finally , I've solved my problem, so I'll write down my solution.

In svg-net, this problem could not be solved, and the problem was solved by directly modifying the text string in the svg file.

If the string is in Arabic, adding "&#8207 ;" symbol to the end of the string, hass rendered it correctly.

bool isArabic = false;
string[] svgTexts = File.ReadAllLines(filename);
for (int k = 0; k < svgTexts.Length; k++)
{
    string cline = svgTexts[k];
    if (cline.IndexOf("<text") != -1)
    {
        int tmpPos = cline.IndexOf(">");
        string curText_prev = cline.Substring(0, tmpPos + 1);
        string curText = cline.Substring(tmpPos + 1, cline.IndexOf("</") - tmpPos - 1);

        if (IsRtl(curText)) // case of string is Arabic
        {
            curText += "&#8207;"; // add "&#8207;" 
            isArabic = true;
            svgTexts[k] = curText_prev + curText + "</text>";
        }
    }
}
if (isArabic)
{
    File.WriteAllLines(filename, svgTexts);
}


// check Arabic text
private static bool IsRtl(string input)
{
    return Regex.IsMatch(input, @"\p{IsArabic}");
}

diydevdesign avatar Mar 30 '23 05:03 diydevdesign