html - 如何分隔 SVG 中从右到左的文本，中间没有英文字母？

Question

例子

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="100" viewBox="0 0 250 100">
<g transform="translate(10, 20)">
    <text>
        11K צפיות&ensp;•&ensp;לפני שנה
    </text>
</g>
</svg>

目前显示如下，这是不正确的:

我希望它在左侧显示 צפיות，在右侧显示 לפני שנה，例如:

我不想在文本中重新排列单词本身，因为它是动态生成的并且应该支持多种语言。

如果我在单词之间放置一个英文字母，例如。 o 而不是 •，它以正确的顺序显示，但没有我想放在那里的任何字母。

我也尝试过研究诸如 ‏、‎ 之类的字符，但到目前为止没有任何效果。

---

更新

我目前最终使组的 x 偏移量为 width - 10 而不是 10 和 style="direction: rtl" 当使用从右到左的语言时。结果不一样，但我认为它更适合我的用例。

不过，如果有人知道一种干净的方法，我仍然有兴趣听听原始问题的可能解决方案。

更新2

感谢 Sam 在下面提供的链接，我找到了“相同方向运行之间的中立”(https://www.w3.org/International/tutorials/svg-tiny-bidi/#Slide0320)的解决方案，即使用 ‎(或 ‎ ) 在中性字符之后将运行分成两个从右到左的运行。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="100" viewBox="0 0 250 100">
<g transform="translate(10, 20)">
    <text>
        11K צפיות&ensp;•&ensp;&lrm;לפני שנה
    </text>
</g>
</svg>

Answer 1

我不读希伯来语，但我查了一下，似乎用从右到左的语言(如希伯来语)编写的 svg 文本是由一种叫做“Unicode 双向算法”的东西自动编辑的。这就是交换文本的原因。

W3 在这篇文章的开头有一个简短的示例，它似乎说明了与您遇到的格式错误类似的格式错误，并解释了如何修复它。

我认为在此示例中，解决方案是将 direction="rtl" 属性添加到 SVG，但我不完全确定，因为我缺少一些关键上下文。解决方案取决于希伯来语的上下文，文章非常详细并解释了许多不同的场景，我认为这应该有所帮助!

这是文章:https://www.w3.org/International/tutorials/svg-tiny-bidi/