html - 导致奇怪锚行为的阿拉伯文本

Question

我今天遇到了一个奇怪的问题，一个锚似乎与 2 个阿拉伯语的锚合并（因为需要一个更好的词）。

谁能解释为什么会发生这种情况？

有一个 jsfiddle 在这里展示了这一点。

这是下面的html。

<div>
    <a href="#">بيان الخصوصية</a>
    <a href="#">شروط الاستخدام</a>
    <a href="#">© 2012 Hewlett-Packard Development Company, L.R</a>
</div>​

Answer 1

尝试将文本方向设置为从右到左。

CSS：

.rtl {direction:rtl; }

HTML：

<div class="rtl">
    <a href="#">بيان الخصوصية</a>
    <a href="#">شروط الاستخدام</a>&nbsp;
    <a href="#">© 2012 Hewlett-Packard Development Company, L.R</a>
</div>

您可能希望将 rtl 放在整个页面的 body 标记上，并为英语部分创建一个从左到右的类。

Answer 2

发生这种情况是因为您的字符具有不同的固有方向性：从左到右（拉丁字母）强，从右到左（阿拉伯字母）强，以及或多或少是中性或自适应的（数字、版权符号）。真正经常引起麻烦的是中立者。

为了解决这个问题，假设您的整体布局方向性应该是从右到左（对于主要是阿拉伯语内容来说很自然），因此例如三个a元素设置为从右到左，设置

body{ direction: rtl; }
:lang(en) { unicode-bidi: embed; direction: ltr; }

并将属性添加lang="en"到最后一个a元素。您也可以使用一个类，比如class="en"，和一个类选择器，比如.en，但是使用lang标记和语言选择器听起来更自然。

这样，英文文本的整体 rtl 方向性被覆盖，并且该文本被转换为“方向性隔离”，因此那里的任何中性字符都服从 ltr 方向性，而不会受到相邻 rtl 文本的干扰。

这将使版权声明显示为英文，版权标志在左侧。