如何显式设置双向文本的方向性，以便在两种冲突语言一起使用时正确显示

Question

我正在尝试实现本地化，当我尝试在页面上显示混合字符时，内容的方向性被抛弃了。

我正在使用一个包含所有文本内容的 json 文件，并使用 Vue.js 模板插入到 dom 中。

字符正确显示，直到同一字符串中混合了 RTL 和 LTR 文本。 此时，文本无法正确显示。

什么有效： [英语 英语 英语]也有效： [阿拉伯语阿拉伯语]

失败内容：[阿拉伯语 阿拉伯语 英语 阿拉伯语]

整个文件的方向性在主HTML元素上设置为"rtl"，language="ar"。

我可以在 unicode 字符或其他一些代码方面使用什么来让我在被阿拉伯文本包围的句子中分割英语单词并保持内容的方向性？

Answer 1

您不仅可以在文档本身上使用 HTML dir 属性，还可以在元素上使用 HTML 属性。因此，例如，您可以将任何英文文本包装在 span alement 中的 RTL 文本中，并将属性设置为 dir="ltr" 。或者，您可以使用 direction: ltr; 结合使用 unicode-bidi: bidi-override; 通过 CSS 实现相同的目的。

您也可以使用 <bdi> 标签，但目前还不支持它(到目前为止只有 Firefox 和 Chrome(。

另一种方法是使用任何周围的HTML元素，方法是在任何标点符号之后通过‎实体插入不可打印的left-to-right marker，但这似乎不太可行。

html {
  direction: rtl;
}
.ltr {
  direction: ltr;
  unicode-bidi: bidi-override;
}

<h3>via the <code>dir</code> attribute</h3>
لكن لا بد أن <span dir="ltr">Lorem Ipsum!</span>&rlm;أوضح لك أن كل
<h3>via CSS</h3>
لكن لا بد أن <span class="ltr">Lorem Ipsum!</span>&rlm;أوضح لك أن كل
<h3>Using the <code>&lt;bdi&gt;</code> tag</h3>
لكن لا بد أن <bdi>Lorem Ipsum!</bdi> أوضح لك أن كل
<h3>Using <code>&amp;lrm;&lrm;</code></h3>
لكن لا بد أن Lorem Ipsum!&lrm; أوضح لك أن كل