html – 如何在同一元素中混合RTL和LTR文本方向？

2023年5月4日 336次阅读

我正在实现一个RTL接口.所有组件和文本都是RTL,但是数字是LTR.

我使用< span dir =“ltr”>将LTR文本插入主RTL文本的元素.

它适用于大多数情况,但不适用于 元件：

<div dir="rtl">
  <select>
    <option>One amount <span dir="ltr">15.000</span> coins</option>
    <option>Other amount <span dir="ltr">19،000</span> coins</option>
  </select>
</div>

它不起作用.

这里有一个JSfiddle：https://jsfiddle.net/fguillen/2hngzv3d/

最佳答案 一开始,我认为这是一个bug(与unicode-bidi相关的东西：bidi-override),但是当我尝试使用IE,Edge和Firefox时,它们都给出了相同的结果.这给了我足够的证据证明这是一种正常行为.我到处看看,发现了什么是错的.

标签

选项标签有点特别.来自Mozilla< option>文档,它声明您只能在其中写入文本.这意味着你在里面写的任何标签< option>标记,它将被浏览器解析器忽略,这正是你< span>的原因.标签被忽略了.从Firefox DOM检查器中查看下图.还值得一提的是智能手机在微调器中显示选择选项而不是组合框(当然你可以覆盖它).意味着在< option>中包含除文本之外的任何内容实际上没有意义.标签.

《html – 如何在同一元素中混合RTL和LTR文本方向？》

了解unicode-bidi属性

默认情况下,RTL文本足够智能,可以通过应用Unicode Bi-directional Algorithm处理嵌入的LTR文本.如果使用bidi-override覆盖算法,则您将负责处理RTL文本中的任何LTR文本.

This means that inside the element, reordering is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored. – (Mozilla Documentation)

现在,在您的情况下,您不能放置< span>里面 因为它是无效的HTML也不使用& LRM;因为你禁用了bidi算法的字符.

解决方案

我能想到的唯一解决方案是

>第1步：删除bidi-override.
>步骤2：使用RTL文本而不是英文文本.

看到这个小提琴手：https://jsfiddle.net/61dvmsnn/

故事的道德启示

除非您尝试创建镜像效果,否则请勿使用bidi-override.永远不要禁用bidi算法.此外,在RTL元素内部测试时,始终使用RTL文本(例如阿拉伯语,希伯来语,波斯语……).让bidi算法发挥其神奇作用.

点赞