Arabic website

7 Dec 2010 - 2:55am
3 years ago
4 replies
1422 reads
Kumud
2009

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 ?



Thanks,

Kumud BihaniCEO, Codez IT Solutions
Email  : kumud@umich.edu
Twitter: http://twitter.com/kumud26

Facebook: http://www.facebook.com/kumud26

Comments

7 Dec 2010 - 4:02am
Yohan Creemers
2008

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:
http://english.aljazeera.net/
http://www.aljazeera.net/portal

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

- Yohan

 

7 Dec 2010 - 6:05am
rsatyajit77
2010

Kumud,

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.

Thanks
Satyajit

7 Dec 2010 - 6:43am
Ali Naqvi
2008

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.

http://en.wikipedia.org/wiki/Modern_Standard_Arabic

The North Africans tend to use Berb elements in their Arabic

http://en.wikipedia.org/wiki/Maghrebi_Arabic 

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

http://freearabicfonts.com/Free_Arabic_Fonts 

http://www.ehow.co.uk/how_6830224_use-arabic-fonts.html

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

 

Regards

Ali

 

 

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

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:
http://www.w3.org/International/tutorials/bidi-xhtml/

<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