Building a Bilingual Arabic/English App: RTL Done Right

Plenty of “bilingual” apps are really English apps with the layout flipped and the text run through a translator. In Arabic they feel broken: misaligned, mis-ordered, awkwardly typeset. Doing it right isn’t hard, but it is a set of deliberate choices, and they’re cheapest at the start. This site and the products we build run on exactly these six.

1. Build direction logically, not left/right

The foundation is a single dir attribute on the document and logical CSS properties everywhere: margin-inline-start instead of margin-left, padding-inline, inset-inline-start, text-align: start instead of left.

Do this and one codebase lays out correctly in both directions automatically. Hardcode left and right, and every screen needs a manual mirror, the classic source of broken RTL.

2. Bidi: the part everyone gets wrong

Arabic runs right-to-left, but real Arabic text is full of left-to-right islands: numbers, Latin brand names, URLs, phone numbers. Without care, the bidirectional algorithm reorders them, and namla.sa or an order number comes out scrambled.

The fixes: rely on proper Unicode bidi, set dir="auto" on user-generated fields, and isolate embedded Latin runs with <bdi> or unicode-bidi: isolate. This is the single most common defect in Arabic UIs.

3. Typography: Arabic isn’t Latin in a different font

Use a real Arabic typeface with proper shaping, paired with a matching Latin design. Give Arabic more line-height; its letterforms need the room. Never apply letter-spacing to connected Arabic script; it breaks the joins. And keep the UI free of forced diacritics; clean unvocalized Arabic reads best in interfaces.

4. Numbers, dates, and plurals

Decide between Arabic-Indic (٠١٢) and Latin (012) digits per your audience — Saudi B2B usually prefers Latin, and apply it through the locale, not by hand. Format dates and currency through Intl. And respect that Arabic has six plural forms against English’s two: “3 items,” “11 items,” and “100 items” can each need different wording, which is why string concatenation always eventually embarrasses you. Use a real i18n plural system.

5. Mirror the right things only

Flip what encodes direction: back and forward arrows, chevrons, progress along the reading direction, list indentation. Don’t flip logos, media, clock icons, checkmarks, or brand imagery.

6. Test both from day one

Arabic strings run different lengths than English, so truncation, wrapping, and input fields need testing in both, continuously rather than in launch week. A UI only ever reviewed in English will break in Arabic in ways no translation pass fixes.

An app that’s genuinely great in both languages is one codebase, built direction-agnostically, with deliberate typography and locale-driven text. It’s also a strong filter when you choose a development partner: ask to see their Arabic work first.