Right-to-left app design: what breaks and how to prevent it
Mirroring a layout is the easy part. What breaks is mixed-direction text, icons that carry direction, numbers, and every animation that assumed left to right.
Key takeaways
- Bidirectional text mixing Arabic with Latin names and numbers is the hardest and most common failure.
- Mirror directional icons, but never mirror clocks, logos, media controls or anything containing Latin text.
- Arabic needs its own typeface and line height; Latin metrics render it cramped.
- Animations and gestures carry direction and are missed in static review; test in right-to-left from week one.
Building an app that works in Arabic requires more than mirroring the layout. Four things reliably break: sentences mixing Arabic with Latin text or numbers, icons whose meaning depends on direction, numeric and date formatting, and animations and gestures built around a left-to-right assumption. All four are cheap to handle at the start and expensive to retrofit.
Mixed-direction text is the hard problem
An Arabic sentence containing an English product name, a phone number, a price or a URL is bidirectional text, and the rendering rules are genuinely intricate. The visible symptoms are punctuation appearing at the wrong end of a line, a phone number reversed, or a bracket landing on the wrong side. Use the platform's bidirectional support rather than manual string manipulation, isolate embedded Latin runs explicitly, and test with real content containing all of these.
Icons that mirror and icons that must not
- Mirror direction: back arrows, forward chevrons, progress indicators, undo and redo, list indentation, and anything indicating sequence.
- Do not mirror: clocks, logos, media playback controls, anything containing Latin text, and physical objects that are not direction-dependent.
- Numbers can render as Western or Eastern Arabic numerals by locale. Decide which your market expects rather than accepting the default, and be consistent between the interface and any documents you generate.
- Dates and currency need locale-aware formatting, including the calendar system where relevant.
Typography is not a substitution
Arabic script has different vertical metrics from Latin. A font size and line height tuned for English will render Arabic cramped, with diacritics and descenders colliding. Choose a typeface designed for Arabic rather than relying on a fallback, and set line height separately per script. Text also expands and contracts in translation, commonly by twenty to thirty per cent in either direction, so any layout that only fits at the exact English string length will break.
Gestures and motion
A swipe-to-go-back gesture, a slide-in transition, and a progress bar all carry direction. In a right-to-left interface each should reverse, and a screen that slides in from the wrong side reads as broken even to users who cannot articulate why. This is the category most often missed, because it is invisible in static design review and only appears when the build is used.
Test properly
Force the interface into right-to-left mode from the first week of development rather than at the end, and have native Arabic speakers use it on real devices. Screenshot comparison will not catch a reversed animation or an awkward line break. The cost of finding these problems in week two is trivial; in the week before launch it is a redesign.
Force right-to-left mode in week one. Finding these in the final week is a redesign, not a fix.
Sources