Arabic text causes strange anchor behavior

Question

Today I ran into some strange problem when the anchor merges (due to the lack of a better word) with two Arabic.

Can someone explain why this is happening?

There is jsfiddle showing this in action here .

Below is the html.

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

Answer 1

Try adjusting the direction of the text from 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, LR</a> </div> 

You can put rtl in the body tag for the whole page and make a class from left to right for the English parts.

Answer 2

This is because you have characters with different inherent orientations: strong from left to right (Latin letters), strong from right to left (Arabic letters) and more or less neutral or adaptive (numbers, copyright sign). His neutrals do often cause problems.

To fix this, assuming that your general layout should be right to left (naturally for predominantly Arabic content), so for example, the three elements a set from right to left, set

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

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

Thus, the general orientation of rtl is redefined for English text, and the text is converted to "isolation of directionality", so that any neutral characters obey the directionality of ltr, without interference from adjacent text rtl.

This would make the copyright expression appear in both English and the copyright mark on the left.