为什么“[x]y”在RTL方向中显示不正确?

34

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

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

这种结果的原因是什么?

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


@printxdiv0 我正在使用 Chrome。 - Sayakiss
15
在Firefox上,我看到了 y[x] - Kroltan
1
@Kroltan 还是不对。奇怪。 - theonlygusti
1
我已经在我的电脑上尝试过,发现Edge和Firefox显示为y[x],而Vivaldi和Chrome则显示为x]y] - phuclv
显示剩余2条评论
5个回答

34

我不能告诉你原因,但我可以告诉你如何解决它:添加unicode-bidi: bidi-override;。有关更多信息,请参见此处

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

该描述不足以解释unicode-bidi属性的行为。然而,它是有效的。

MDN文章在这里提供了一些启示,bidi-override实际上禁用了浏览器标准的智能行为,一切都按照预期的方式工作。


1
unicode-bidi 在 MDN 上的介绍。 - Sander_P
1
说实话,“为什么”次要,重要的是解决这个问题(在这个堆栈中)。另一个答案解释了原因,但我认为这应该是正确的答案。我知道这个问题不太适合这个网站,但是对这个答案点赞。 - Mindwin Remember Monica

27

它被正确地呈现,即根据规范。您要求从右到左的布局。渲染首先采用字符[。它是方向中性的,因此在RTL运行中呈现为最右边并且被镜像(因此看起来像])。接下来,在其左侧以x]y的顺序出现,因为拉丁字母xy具有固有的从左到右的方向性,而中性的]从它们那里获取其方向性。
得出的结论取决于您想要的呈现方式以及使用从右到左方向性的原因。


解释得很好,但是根据你的回答,为什么[x]被渲染为[x](而不是x]])?通过这个JSFiddle检查结果。 - Sayakiss
1
Sayakiss,在“[x]”中没有任何东西可以防止括号偏离RTL布局,因此它被呈现为从右到左,括号字形被镜像。如果您设置例如<font color=red>[</font>,您可以看到这一点。最右边的字符变成红色;它被镜像,以便看起来像“]”。同样,最左边的字符是用“[”字形呈现的“]”。 - Jukka K. Korpela
1
接下来,它左边是“x]y”,按照这个顺序,因为拉丁字母“x”和“y”具有固有的从左到右的方向性,而中性的“]”则从它们那里获得其方向性。我的问题是,为什么“x]y”具有固有的从左到右的方向性,但“x]”却没有? - Sayakiss
5
因为在前一种情况下,“中性”字符位于从左到右(LTR)字符之间,所以被视为LTR处理。而在后一种情况下,这种情况不适用。 - plugwash
6
“所以看起来像“ [ ”” 是不是应该改为“所以看起来像“]”?” - user2357112
是的,“所以看起来‘【’应该指的是‘】’ ”;我会修复它。 - Jukka K. Korpela

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

括号和方括号没有固有的方向。开放的括号处于LTR和RTL文本运行之间,因此不能“继承”周围文本的方向。因此,默认为段落的RTL基本方向,并放置在希伯来语单词shalom的左侧。请注意,关闭方括号嵌入在从左到右的单个文本运行中。因此它采用其周围文本的方向,并放置在英语单词shalom的右侧。


2

0

尝试在需要闭合方括号的地方使用开放方括号“ [ ”,反之亦然。我有一个字体将一个字母映射到“ [ ”,但它无法显示。我在数据库中将该字母更改为“ ]”,然后它就可以正常工作了。


在这个html rtl文档中使用>括号时出现了问题。https://ilmlc.sourceforge.io/books/multilinear_torah/html/multilinear_torah_3rd_edition_4_fonts.html阿拉姆语字体estrangelo_cursive(从顶部开始的第二行)使用>按键表示等于希伯来字母kaf的字母。 第一行的最后一个单词的最后一个字母显示正常,但是在第三行中,从右边数第八个单词的>会出现在单词的末尾。 尝试使用 >、<、‹。HTML看到>并翻转以>开头的单词的顺序。 我尝试重新映射字体按键。 - Timothy Whittaker
将 MySQL 数据库中的 > 角度更改为 <‎ 可以纠正该问题。 - Timothy Whittaker

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接