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

Question

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

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

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

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

什么失败：[阿拉伯文阿拉伯文英文]

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

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

Answer 1

您不仅可以在文档本身上使用HTML dir属性，还可以在元素上使用HTML dir="ltr"属性。因此，您可以将任何英文文本包含在例如版本的RTL文本中，并设置属性direction: ltr;。或者，您可以使用unicode-bidi: bidi-override;和<bdi>通过CSS实现相同的功能。

您也可以使用left-to-right marker标签，但目前尚未得到很好的支持（目前只支持Firefox和Chrome）。

另一种不使用任何周围HTML元素的方法是在任何标点符号后通过‎实体插入不可打印的

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; أوضح لك أن كل

qazxswpoi