Designing a website in Arabic: right to left, done properly

Arabic reads from right to left. A website in Arabic therefore needs more than translated text: the whole layout follows the direction of reading. When the Arabic version is an afterthought, visitors notice straight away.

Mirror the layout, not everything

In a right-to-left layout, the page is mirrored: the logo and navigation start on the right, text aligns right, and "next" points to the left. But some things must not be flipped:

• logos, photos and videos;
• play buttons and media controls;
• numbers, phone numbers and prices, which still read left to right;
• icons that picture real objects, such as a clock or a shopping cart.

Arrows that mean "forward" or "back" are the ones that flip.

Build it in from the start

The reliable way is to build the site with direction in mind from day one: layouts that say "start" and "end" rather than "left" and "right", so the same page works in both directions. A site built for left to right and flipped at the end tends to break in small places: an arrow pointing the wrong way, a margin on the wrong side, a menu that opens off screen.

This site is built that way: its Arabic version is laid out right to left with the same code as the English and French ones.

Choose fonts made for Arabic

Many Latin fonts have no Arabic letters, and the browser silently falls back to another font. Choose a typeface designed for Arabic, test it at small sizes and on phones, and avoid the effects that suit Latin text but not Arabic: wide letter spacing, italics and very tight line heights.

Mixed text needs care

Arabic pages often contain Latin words, brand names, email addresses, numbers and prices. Each piece must keep its own direction inside the sentence, or its parts can end up in the wrong order. Check every page that mixes the two, especially forms, prices and addresses.

Forms, emails and everything around the site

• Form fields, error messages and placeholders in Arabic, aligned correctly.
• Confirmation emails and notifications in the visitor's language.
• Search titles and descriptions written in Arabic, not translated word for word.
• A language menu that leads to the same page in the other language.

A checklist before launch

1. 01Read every page in Arabic on a phone.
2. 02Check every arrow, icon and progress indicator.
3. 03Fill in and send every form in Arabic.
4. 04Look for any number, price or Latin word in the wrong place.

Planning a site in Arabic, or in Arabic and another language? Tell us about it. Our packages start from ⁦MAD 3,900⁩.