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’s a set of deliberate choices from the start. Here’s the engineering that actually matters.

1. Direction: build it logical, not left/right

The foundation is a single dir attribute (rtl/ltr) on the document, and logical CSS properties everywhere instead of physical ones:

• margin-inline-start / -end instead of margin-left / -right
• padding-inline, inset-inline-start, border-inline-*
• text-align: start / end instead of left / right

Do this and one codebase lays out correctly in both directions automatically. Hardcode left/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, code, phone numbers. Without care, the browser’s bidirectional algorithm reorders them — so 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 LTR runs (with <bdi> or unicode-bidi: isolate) so a Latin word or number keeps its own order inside an Arabic sentence. This is the single most common defect in Arabic UIs.

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

• Use a real Arabic typeface with proper shaping (letters join and change form by position), paired with a matching Latin design so both feel like one product.
• Arabic generally needs more line-height — its ascenders/descenders and marks want breathing room.
• letter-spacing doesn’t apply to connected Arabic script — using it breaks the joins. Don’t.
• Keep the UI free of forced diacritics (tashkeel) unless the content genuinely needs them; clean, unvocalized Arabic reads best in interfaces.

4. Numbers, dates, and plurals

• Digits: decide between Arabic-Indic (٠١٢) and Latin (012) per your audience — Saudi B2B often prefers Latin digits — and apply it consistently via the locale, not by hand.
• Dates & currency: format through the locale (Intl on web), with SAR and the Gregorian or Hijri calendar as appropriate.
• Plurals: Arabic has six plural forms (zero, one, two, few, many, other) versus English’s two. “3 items” vs “11 items” vs “100 items” can each need different wording. Use a real i18n plural system, never string concatenation.

5. Mirror the right things — and only those

When direction flips, mirror what encodes direction and leave the rest:

• Flip: back/forward arrows, chevrons, progress that moves along the reading direction, list bullets/indentation.
• Don’t flip: logos, media, clock icons, checkmarks, and most brand imagery.

6. Test both from day one

Build and review in Arabic and English continuously, not as a launch-week pass. Arabic strings are often a different length than English, so test truncation, wrapping, and input fields in both. A UI that’s only ever checked in English will break in Arabic in ways no amount of translation fixes.

The bottom line

A genuinely bilingual app is one codebase built direction-agnostically, with correct bidi, deliberate Arabic typography, locale-driven numbers and plurals, and selective mirroring — tested in both from the start. It’s exactly how this site and the products we build work, and a core reason to pick an Arabic-fluent team when you choose a development partner.

Building for Arabic and English? Book a free consultation — bilingual, RTL-first is how we build every product.