Arabic website

7 Dec 2010 - 1:55am
4 years ago
4 replies
1831 reads

I am working on a project in which we need to design website which will be in English, French and Arabic. 
The challenge we face is that Arabic is read from right to left instead of left to right. Has anyone worked on any such website ? Are there any particular usability norms that need to be followed for such mirrored websites ?


Kumud BihaniCEO, Codez IT Solutions
Email  :



7 Dec 2010 - 3:02am
Yohan Creemers

Hi Kumud,

The browser takes care of most of the 'mirroring'. Set the correct dir attribute on the highest possible element in the html document. Not only will the text flow in the right direction, the lay-out will also flip over.

Pay extra attention to graphics though. Where a "Next" button in a LTR script might have an arrow pointing to the right, it should point  to the left in a RTL script (script as in writing system). Same for the copy writing, check if there are words referring to the left or the right of the page.

In Arabic, numbers and names or abbreviations (like "IxDA") using the Latin script are written LTR. The browser tries to take care of that too, but will fail for example if a phone number is formatted with spaces. In that case you must explicitly set the dir attribute. 

For the visual design it gets harder if you have both a the Arabic and Latin script on a single page. The scripts differ enormously in look and feel. The Arabic characters have more detail; readability benefits from a bigger font-size compared to sans serif Latin characters.

If you offer the user a language switch, then make sure the name of the language is in a language and script they can read (obvious, but often overlooked).

Take a look at the Aljazeera website for best practices:

And of course, get feedback on your design from real users as early as possible.

- Yohan


7 Dec 2010 - 5:05am


I hope this going to have a good learning on multilingual website. Arabic read from L to R.
So while design website put dir<tag> for orientation.
<BODY DIR=LTR> or BODY {direction: ltr}

Hope this helps u.


7 Dec 2010 - 5:43am
Ali Naqvi

Hello Kumud,

is this website intended for North African (Morrocon, Algerian and Tunisian users)? Or is it also supposed to be used by Arabs living in the Gulf region?

Keep in mind that there are several Arab dialects but the main Arabic dialect that can be understood by almost everyone is called Fus-haa/Modern Standard Arabic.

The North Africans tend to use Berb elements in their Arabic 

There are tons of fonts available but you can get inspired on this link:

If the website is supposed to be used by all Arabs, use the Modern Standard Arabic language and use a font such as:

Modern Standard Arabic.jpg






Modern Standard Arabic.jpg 13.85 KB
7 Dec 2010 - 7:05am
AmirBehzad Eslami

As an Iranian web developer, I've designed many multilingual websites in Persian, Arabic, and English.

FYI: Please take a look at the following article from W3C:

<head dir="rtl">

<bdo dir="ltr">123459..... (any number)</bdo>

Do not add "dir=rtl" to body or html tags, because it changes the position of the scroll-bar to the left side of Internet Explorer, which is against Consistency (From a UX point of view).

Syndicate content Get the feed