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

Question

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

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

在同一字符串中混合 RTL 和 LTR 文本之前，字符显示正确。那时，文本显示不正确。

什么有效：[ENGLISH ENGLISH ENGLISH] 也适用：[ARABIC ARABIC ARABIC]

失败的地方：[Arabic Arabic English Arabic]

整个文件的方向性在主要 HTML 元素上设置为 "rtl"，语言="ar".

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

Answer 1

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

来实现相同的目的

您也可以使用 <bdi> 标签，但目前还没有得到很好的支持（目前只有 Firefox 和 Chrome）。

另一种不使用任何周围 HTML 元素的方法是通过 &lrm; 实体在任何标点符号之后插入一个不可打印的 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; أوضح لك أن كل

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

How can I explicitly set directionality of bidirectional text so it displays properly when two conflicting languages are used together?

html

javascript

localization

bidirectional

vue.js