True RTL is not a checkbox

Translating the words is the easy 20%. Making an interface actually work right-to-left is the other 80 — and it is where most bilingual sites quietly fall apart.

Plenty of "bilingual" sites are really one site with the Arabic poured in. The words are translated; the interface is not. A visitor reading right-to-left meets a layout still built left-to-right, and everything feels subtly wrong in a way that reads as carelessness.

Doing it properly is not harder because Arabic is hard. It is harder because right-to-left touches layout, not just text — and layout is where the work hides.

Direction is a property of the whole interface

When a page flips to RTL, far more than the paragraph text moves. The navigation mirrors. The sidebar changes sides. Icons that imply direction — a back arrow, a "next" chevron, a progress bar — have to flip, while icons that don't — a clock, a logo — must not. Get this wrong and an arrow points the visitor the wrong way through their own language.

We build this with logical CSS properties — margin-inline, inset-inline-start, padding-inline-end — instead of hard left and right. The layout then mirrors itself from a single source, so a component built once is correct in both directions rather than maintained twice and drifting.

The details that give it away

  • Mixed content. A phone number, a Latin brand name or a URL inside Arabic text runs left-to-right within a right-to-left line. Handled wrong, the digits scramble; handled right, they simply read correctly.
  • Numbers and dates. Iraqi month names, the right numerals, a date that reads naturally in Arabic rather than a machine format transliterated.
  • Type. Arabic needs a face designed for it — we use Noto Kufi Arabic — not a Latin font stretched to cover glyphs it was never drawn for.
  • Line and letter rhythm. Arabic sets at a different density; spacing tuned for Latin looks cramped or loose when the script changes.

Arabic-first, from the first draft

The reliable way to ship a real bilingual interface is to design it in both languages from the start, not to build in English and translate at the end. When Arabic is an afterthought, RTL becomes a retrofit — a pile of exceptions bolted onto an LTR frame. When both are first-class from the first draft, neither is the exception.

Arabic is the default language for our own site's visitors. It was never going to be the version we tested last.

More from the blog

All articles