Arabic website - design for right to left languages

I am working on a website in multiple languages, one of them is Arabic. Which makes things more fun ..

As you know, in arabic and other similar languages the text goes the other way, from right to left.. I am wondering what are the basics to consider when starting such a design?

What should I worry about that is specific to right to left languages ?

What would be some standard fonts to work with? (something like Arial, Helvetica, sans-serif but for arabic languages ..)

Where can I get information about users that use this as an everyday browsing experience?

If you know, examples of clean, modern looking arab websites would be great. All I can find is old and very confusing designs(I do not speak Arabic).

Any other advice, guidelines and helpfull information is welcome :) Thank you

Answer

With RTL language sites, we need to change a fair many things about a LTR site.

1. Assign . For more information on what that does, check this article or look it up. There is also a CSS direction property that changes the text flow of block level elements and text but does not affect the layout of the page.


2. Mirror your layout. This means things that are usually on the left should be on the right and vice versa. Some gotchas are using floats (they will be reversed), forgetting to change the positioning of some ::before and ::after elements, and not changing images themselves that need to be changed. Creating a work around like .left { float:right !important; } for some of these may be advantageous.

3. Fonts: The only fonts by default on most computers are usually Arial, Verdana, and Tahoma (Tahoma is most common). Google has an "Early Access Program" for potential fonts that it's adding to its library of fonts, of which many are RTL. If they are used enough, Google will add them to their collection permanently (so use them!). You can see a demo of how the different Google-hosted Arabic fonts look here.


4. Arabic characters are shorter and wider than Latin characters. This gives a different visual appearance to the website. Keep this in mind when designing.


5. As with any foreign culture, be careful with iconography assumptions and content. Know your audience.


6. Arabic readers will put up with reading English/Western numbers, but if the text is in Arabic (and thus RTL), so should the numbers also be.


7. Make sure your translations are correct!


8. The web culture is different. Some of the answers in this interview provide more information about it, but I'd recommend talking to the people who will be using it to find out what's accepted/expected and what's not. From what I can tell, they're more open to trying new things, which could be a huge plus, and have a bit less standards across the board. This may vary from country to country as well.

A pretty good example of a RTL site is CNBC's Arabian site. It's not cutting-edge-new, but it does its job pretty well. For a more modern one you can check out this site or this election website.

It's interesting for me to see how everything is flipped from what I'm used to including the moving news update at the bottom and the important content. For more examples, check out the very bottom of the interview page linked previously.

If you're a developer or want to help a team of developers, I recommend taking a look at some tips for creating a multilingual web page put together by the BBC team.

_{Much of this post was pulled from this article as well as this one and the links in them.}