Building right-to-left interfaces that feel native

Arabic readers notice in a second when an interface was translated rather than designed for them. The text is right-to-left, but the arrows still point the wrong way, the numbers jump around and the typography looks borrowed.

We build platforms in French, English and Arabic, including our own. Here is what it takes for the Arabic version to feel native rather than converted.

Mirror the layout, not the content

In a right-to-left interface, the whole layout mirrors: navigation starts on the right, the reading order flows from right to left, progress moves leftwards. But not everything flips.

• Logos and brand marks keep their original form. A Latin wordmark stays exactly as it is.
• Numbers are still written left to right, even inside Arabic text.
• Code, email addresses and URLs stay left to right.
• Media controls such as play buttons and timelines usually keep their direction, because they describe time rather than reading order.

Directional icons are the trickiest part. An arrow that means “next” must point left in Arabic. An arrow that means “download” points down in every language. Decide icon by icon, and sometimes the right answer is to remove the arrow altogether.

Use logical properties everywhere

The most effective decision is made on the first day of a project: never write left or right in CSS. Use logical properties instead, which follow the reading direction automatically.

/* physical: breaks in Arabic */
.card { margin-left: 24px; text-align: left; }

/* logical: correct in every language */
.card { margin-inline-start: 24px; text-align: start; }

With margin-inline-start, padding-inline-end, inset-inline-start and text-align: start, a single stylesheet serves both directions. Setting dir="rtl" on the page is then enough to mirror the whole interface.

Retrofitting this later means reviewing every component. Starting with it costs nothing.

Typography is not a translation

Arabic is a connected script with its own proportions. Taking a Latin design and swapping the font is rarely enough.

• Choose an Arabic typeface deliberately, one that pairs with your Latin font in weight and tone rather than whatever the system falls back to.
• Give it more line height. Arabic letterforms extend further above and below the line.
• Never apply negative letter spacing. Tight tracking that looks elegant in Latin breaks the connections between Arabic letters.
• Be careful with italics. Arabic has no true italic. If your design uses italic for emphasis, choose another device such as a lighter weight.

Numbers, dates and mixed text

Real interfaces mix languages constantly: an Arabic sentence with a company name in Latin letters, a price, a phone number. The browser’s bidirectional algorithm handles most of it, but it needs help.

Mark user-generated content with dir="auto" so each value takes the direction of its own text. Format dates and numbers with the platform’s internationalisation tools rather than by hand, and decide early whether you will use Western or Eastern Arabic digits, then apply the choice consistently.

Motion that makes sense

Animations have a direction too. A panel that slides in from the right in English should slide in from the left in Arabic. A progress bar fills from the right. Underlines draw from the start of the line, which is on the right. When motion follows the reading direction, the interface feels calm. When it doesn’t, it feels foreign.

Test with native readers

No checklist replaces a native reader using the product. Before launch, have Arabic speakers complete real tasks, and watch where they hesitate. The issues they find in an hour would take weeks to discover otherwise.

If you are planning a platform that needs to work in Arabic, French and English, talk to us. We build all three from the start.