Как сделать арабский текст в SVG с элементами span? - PullRequest
Новая
       0

Как сделать арабский текст в SVG с элементами span?

0 голосов
/ 03 января 2019

Я пытаюсь отобразить арабский текст, заменив английские слова в элементах span.Но это поменялось своими словами.

Я попытался добавить direction, xml: lang, unicode-bidi к атрибутам svg.Он изменяется на RTL, но не меняет порядок

Пожалуйста, укажите это скрипки :

Ожидаемый вывод с английскими словами 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>

Фактический вывод Фактический . 

<!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>

Я ожидаю, что Браузеры будут заменены на متصفح ذكي. Аналогично опера с ايفون .

Фактическое изображение на выходе Фактическое .Ожидаемый результат ожидаемый .

Может кто-нибудь помочь мне добиться этого?

1 Ответ

0 голосов
/ 03 января 2019

Проблема возникает потому, что последовательность ":" не имеет определенного направления.Юникод имеет группу двунаправленных управляющих символов, которые помогают в интерпретации таких ситуаций.Если вы вставите метку слева направо между كروم и следующей взаимосвязью, станет ясно, что все, что следует, идет слева направо.

Хотя в HTML метка можетзаписывается как &lrm;, это не работает внутри пространства имен SVG, которое является чистым XML.Там вы должны использовать числовой объект &#8206; вместо этого.Введенные мной дополнительные <tspan> не являются строго необходимыми, но они немного облегчают чтение кода - в противном случае видимый порядок на экране будет немного запутанным. 

<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>

Не было бы легче жить без ошибок?Теоретически, это должно быть решением, а в Chrome оно и есть.В Firefox ширина rtl <tspan> вычисляется неправильно, и следующая часть ltr исчезает справа.Лучший обходной путь, который я могу найти, - это немного изменить раскладку, чтобы процентное значение выровнялось по правому краю в конце второй строки: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...