阿拉伯文字导致奇怪的锚行为

Question

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

有人可以解释为什么会这样吗？

有一个jsfiddle在行动here中显示这一点。

这是下面的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"和类{/ 1}}等类选择器，但使用.en标记和语言选择器听起来更自然。

这样，对于英文文本和，整个rtl方向性被覆盖，文本被转换为“方向性孤立”，以便那里的任何中性字符服从ltr方向性，不受相邻rtl文本的干扰

这将使版权声明显示为英文，版权符号位于左侧。