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

Question

我正在尝试实现本地化，并且当我尝试在页面上显示混合字符时，内容的方向性被抛弃了。我正在使用一个包含所有文本内容的json文件，并且正在使用Vue.js模板将其插入dom。字符将正确显示，直到在同一字符串中混合包含RTL和LTR文本为止。那时，文本无法正确显示。有效的方法：[ENGLISH ENGLISH ENGLISH]也有效的：[阿拉伯语阿拉伯语]失败了：[阿拉伯语阿拉伯语英语阿拉伯语]整个文件的方向性在主HTML元素上设置为“ rtl”，语言设置为“ ar”。在unicode字符或其他一些可以使我在阿拉伯语文本包围的句子中分割英语单词并保持内容的方向性的代码方面，我可以使用什么？

Answer 1

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

您也可以使用<bdi>标记，但目前尚不支持该标记（到目前为止，仅Firefox和Chrome）。

还有一种方法，不使用任何周围的HTML元素，就是在任何标点符号后left-to-right marker通过&lrm;实体插入一个不可打印的对象，但这似乎不太可行。

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