Arabic web design, written and not translated

Arabic web design mirrors the whole layout

Right-to-left is not a text alignment setting. An Arabic reader starts at the top right, so the whole page turns with them.

What mirrors

The navigation, the grids, the breadcrumbs and the form fields. Arrows and icons that point in a direction. Sliders, which advance the other way. A button that sat on the right in English sits on the left in Arabic.

What stays as it is

Logos, phone numbers and names written in Latin script. A mirrored logo is a mistake, and so is a phone number that reads backwards.

The quickest proof is the language switcher at the top of this page. Open the Arabic version and watch every element change sides.

Arabic typography needs its own size and line height

Arabic type looks smaller than Latin type at the same size. If the English stylesheet is copied across, the Arabic text ends up cramped and hard to read, above all on a phone.

So the Arabic version gets its own settings. The text is set larger. The lines have more room between them, because the letters carry marks above and below. There is no letter-spacing, since Arabic letters join and spacing pulls the words apart. There are no capital letters either, so a heading that shouts in capitals in English needs weight or size to do the same job.

The typeface is chosen for the script, not borrowed from the Latin font. Noto Naskh Arabic is one I use for body text that has to stay readable on a small screen.

Written from the brief, not run through a plugin

A translation plugin turns English sentences into Arabic words. The result follows English word order, English idioms and English headlines, and an Arabic reader can tell within a line.

I write the Arabic from the same brief as the English. The facts, the prices and the page structure are the same. The sentences are built the way an Arabic writer would build them, with the vocabulary Gulf businesses use.

It also means nothing depends on a plugin that can break after an update, leave half a page untranslated or create pages Google cannot index properly. Every Arabic page is a real page, with its own title, its own description and its own text.

Separate URLs, hreflang and a language switcher

Each language lives at its own address. The English page is at one URL and the Arabic page sits under /ar/, so Google can index both and treat each as the right answer for its own reader.

The two are linked with hreflang, a short tag that tells Google which page is for which language. Someone searching in Arabic is shown the Arabic page. Someone searching in English is shown the English one.

The language switcher takes the reader to the same page in the other language, not back to the homepage. It is a small thing, and it is the difference between a reader who continues and one who leaves.

Numerals and mixed English and Arabic content

Gulf business writing mixes scripts all the time, and the page has to handle it.

Numerals

Western numerals are common in Gulf business, so prices and phone numbers are written with them. A phone number still reads from left to right, even in the middle of an Arabic line.

Latin names inside Arabic sentences

Brand names and platform names stay in Latin script. If the direction is not set correctly, the brackets, full stops and numbers around them jump to the wrong side. I set the direction of each mixed line and check it on a real phone.

Arabic keyword research is its own job

People do not search with translated words. The Arabic phrase someone types for a service is often not the dictionary translation of the English one. It may be a Gulf expression, a shorter word, or the English term written in Arabic letters.

So I research the Arabic keywords separately and give each Arabic page its own target phrase. The page list may even differ between the two languages, because the questions differ.

After launch, the Bilingual monthly plan tracks 20 English and 20 Arabic keywords and includes Arabic content written natively. It is described with the other SEO services.