Arabic text causing strange anchor behaviour

Question

I came across a strange problem today where an anchor appears to merge (for want of a better word) with 2 arabic ones.

Can anyone explain why this occurs?

There is a jsfiddle showing this in action here.

This is the html below.

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

Answer 1

Try setting the text direction to right-to-left.

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>

You may want to put the rtl on the body tag for the whole page and make a left-to-right class for the English parts.

Answer 2

It happens because you have characters with different inherent directionality: strong left to right (Latin letters), strong right to left (Arabic letters), and more or less neutral or adaptive (digits, copyright sign). It’s the neutrals really that often cause trouble.

To fix this, assuming that your overall layout directionality should be right to left (natural for dominantly Arabic content), so that e.g. the three a elements are set right to left, set

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

and add the attribute lang="en" to the last a element. You could alternatively use a class, say class="en", and a class selector, like .en, but using lang markup and a language selector sounds more natural.

This way, the overall rtl directionality is overridden for the English text and that text is turned to “directionality isolate” so that any neutral characters there obey ltr directionality, with no interference from adjacent rtl text.

This would make the copyright statement appear as in English, with the copyright sign on the left.