为什么"[x] y"在RTL方向上显示不正确？

Question

<div style="direction: rtl">
[x]y
</div>

您可以看到HTML文本[x]y显示为x]y].

这个结果是什么原因？

PS:我在Chrome 56.0.2924.87(64位)中得到了这个结果.

Answer 1

我无法告诉你原因,但我可以告诉你如何解决它:添加unicode-bidi: bidi-override;.了解更多信息

<div style="direction: rtl; unicode-bidi: bidi-override;">
[x]y
</div>

说明

unicode-bidi属性与direction属性一起用于设置或返回是否应覆盖文本以支持同一文档中的多种语言.

不清楚解释这种行为.但是,它的工作原理.

编辑

MDN文章在这里带来了一些亮点,bidi-override实际上禁用了浏览器标准的智能行为,一切都按预期工作.

Answer 2

它被正确呈现,即根据规格.您已经要求从右到左布局.渲染首先采用[角色.它是方向中性的,因此在最右边的RTL运行中呈现并镜像(所以它看起来像]).接下来,它的左边是x]y那个顺序,因为拉丁字母x和y内在的左右方向性和中性]从它们获得方向性.
要绘制的结论取决于您想要的渲染以及使用从右到左方向性的原因.

Answer 3

经过一些研究,我发现了以下信息:从右到左的文本方向

括号和方括号没有固有的方向.左括号是在LTR和RTL文本运行之间,因此不能"继承"周围文本的方向.因此,它默认为段落的RTL基本方向,并且位于希伯来语单词shalom的左侧.请注意,结束方括号嵌入在从左到右文本的单个运行中.因此它采用其周围文本的方向,并位于英文单词shalom的右侧.