Bilingual Arabic and English websites: how to do it properly

In Jordan and the Gulf, most businesses serve customers in two languages. Many websites still treat Arabic as an afterthought. A translated copy of the English site, flipped at the last minute, with text that overflows its boxes and a search result that only shows the English page.

Doing both languages properly is not difficult, but it has to be planned from the start. These are the parts that matter.

Right-to-left is a layout, not a setting

Arabic reads from right to left, and the whole page should follow. Setting the page direction to right-to-left is the first step, not the last. The layout then needs to mirror.

• Navigation, menus and the logo move to the opposite side.
• Arrows and icons that show direction, such as back, next and carousels, point the other way.
• Margins, padding and alignment follow the reading direction instead of being fixed to left and right.
• Progress bars, steps and timelines run from right to left.

Not everything should flip. Logos, photos, phone numbers, product codes and media controls usually stay as they are. Deciding what mirrors and what does not is a design decision, and it is easier to make once, in the design system, than page by page.

Modern CSS helps. Logical properties, which describe start and end instead of left and right, let one stylesheet serve both directions.

Typography that respects both scripts

Arabic and Latin scripts have different shapes, proportions and rhythm. A font that looks good in English often has weak Arabic support, or none at all. Choose fonts designed for Arabic, and pair them with an English font of similar weight and character.

• Arabic text usually needs a slightly larger size and more line height to read comfortably.
• Avoid letter spacing on Arabic. It breaks the connections between letters.
• Uppercase does not carry over. Arabic has no capital letters, so emphasis has to come from weight, size or colour.
• Text length changes. A heading in Arabic may be shorter or longer than in English, so layouts should allow for both.

Separate URLs for each language

Search engines need to see each language as its own page. If the language changes only with a button and the address stays the same, search engines will usually index one version and ignore the other.

Give each language its own address. A common pattern is the main site in one language and the other under a path, such as /ar for Arabic. Each page should declare its language, link to its equivalent in the other language with hreflang tags, and have its own title and description written in that language.

This is how someone searching in Arabic finds your Arabic page, rather than an English page they then have to switch.

Write for each audience, not only translate

Literal translation produces text that is correct and unconvincing. Arabic readers notice when a page was written in English first. Phrasing, tone and examples that work in one language can feel stiff in the other.

Treat each language as its own audience. Keep the same structure and the same facts, but let the writer express them naturally. Decide early whether the Arabic will be formal Modern Standard Arabic or closer to the dialect your customers use, and keep it consistent. Search terms differ too. People searching in Arabic do not always use a literal translation of the English phrase.

Forms, numbers and dates

Forms are where many bilingual sites fail quietly.

• Fields, labels and error messages should align with the reading direction and be written in the page language.
• Phone numbers, email addresses and web addresses are typed left to right, even on an Arabic page. Those fields should keep that direction.
• Decide whether to show Western digits or Arabic-Indic digits, and accept both when people type.
• Dates and times should use a format your audience expects. Some audiences will also expect the Hijri calendar alongside the Gregorian one.
• Names and addresses vary in structure. Avoid fields that assume a single format.

Test on real phones, in both languages

Most visitors will open the site on a phone, so that is where testing matters most. Check every page in both languages, on iPhone and Android, and in more than one browser. Look for text that overflows, icons pointing the wrong way, lines that mix Arabic and English and display out of order, and forms that are hard to complete with an Arabic keyboard.

Ask native speakers of each language to use the site before launch. They will notice problems a checklist will miss.

A bilingual site done properly feels as if it was made for each reader. If you are planning one, the first consultation with Talos is free, in Arabic or English.