Every few months a global product launches its Arabic version, and every few months Arabic Twitter has a field day with the screenshots. Clipped buttons. Progress bars filling the wrong way. Numbers scattered mid-sentence like someone dropped them.
None of these are exotic bugs. They’re the same 7 mistakes, made by teams who treated RTL as a CSS property instead of a design decision. I’ve spent 5+ years fixing them. Here’s the list.
The mistakes
1. Mirroring everything
Navigation flips. Timelines flip. But media player controls stay LTR (play is play everywhere), phone numbers stay LTR, and code blocks stay LTR. Blind direction: rtl on the root element mirrors things that should never mirror. Fix: audit every directional element individually. [INPUT NEEDED: a real example you caught]
2. Ignoring bidirectional text
An Arabic sentence containing “iPhone 15 Pro” is a BiDi minefield. Get the Unicode handling wrong and the “15” detaches from “iPhone,” punctuation jumps to the wrong end, and the sentence becomes a puzzle. Fix: spec BiDi behavior in design, not in QA. Use directional isolation marks. Test with real mixed content, never lorem ipsum.
3. Keeping English font sizes
Arabic script at 14px is what English looks like at 11px: technically legible, practically hostile. Arabic needs roughly 10-20% larger sizes and more generous line height. Fix: separate typography tokens for Arabic. Not a global bump, per-style tuning.
4. Forgetting text expansion
Arabic runs ~25% longer than English on average. Buttons, tabs, and cards designed to fit “Submit” explode when they meet the Arabic equivalent. Fix: design with Arabic strings from the first wireframe. If it fits in Arabic, it fits in English. The reverse is not true.
5. Translated microcopy with the wrong register
MSA in a casual social app sounds like a legal document. Gulf dialect in a Jordanian product sounds imported. Fix: decide the register per product and audience, then write natively. [INPUT NEEDED: your Levantine vs Egyptian خالص-type example works perfectly here, anonymized]
6. Icons that lie in RTL
The “back” arrow, the “send” plane, the “next” chevron: all directional, all wrong when unflipped. But flip the search icon or a clock and you’ve created new confusion. Fix: classify icons as directional or neutral in the design system itself.
7. Testing Arabic last
The Arabic version gets reviewed in the final sprint, after every layout decision is locked. At that point, fixes are patches. Fix: bilingual review at every design milestone. Arabic-first when the primary market is Arabic.
RTL isn’t a checklist you run at the end, it’s a lens you design through from the start. If your product is heading to Saudi Arabia, the UAE, or anywhere Arabic is spoken, this is what Arabic-first design means in practice.
Building for the Arabic market? I do Arabic UX audits: info@mikdam.com.
