You've localized your strings into Arabic. The translation is accurate, the glossary was reviewed, the files are merged. Then someone opens the app and the layout is broken — text overflows, icons point the wrong way, and the navigation feels backwards. Welcome to RTL layout bugs.
Why RTL isn't just "flip the layout"
Right-to-left languages like Arabic, Hebrew, and Urdu don't just reverse text direction — they reverse the entire spatial logic of your UI. What was on the left is now on the right. Progress bars fill from right to left. Back arrows point right.
The bugs that only show up in RTL
- Hardcoded margins and padding:
margin-left: 16pxshould bemargin-inline-start: 16px. Every hardcoded directional property is a potential bug. - Icon mirroring: Back arrows, chevrons, and progress indicators need to flip. But not all icons should — a phone handset icon or a checkmark stays the same regardless of direction.
- Text truncation: Arabic text is often 20–30% longer than English. Combined with RTL flow, truncation happens in different places and can cut words mid-morpheme.
- Bidirectional text (Bidi): When Arabic text contains English brand names, numbers, or URLs, the browser's Bidi algorithm can produce unexpected word order without explicit direction markers.
How to catch these before QA
1. Use CSS logical properties everywhere
Replace every instance of left/right in your CSS with inline-start/inline-end. This single change eliminates 60% of RTL layout bugs.
2. Pseudo-localization with RTL
Run your pseudo-localization pass with the dir="rtl" attribute set on <html>. This surfaces layout breaks before any real translation begins — you'll see mirroring issues, overflow, and alignment problems immediately.
3. Screenshot-based review
Generate screenshots of every screen in both LTR and RTL modes. Have a native RTL speaker review not just the text, but the visual hierarchy — does the layout feel natural, or does it feel like a flipped English UI?
The QA checklist we use
- All CSS directional properties use logical equivalents
- Icons reviewed for mirror/no-mirror classification
- Text expansion tested at 130% of English string length
- Bidi markers inserted for mixed-direction content
- Native RTL speaker reviews visual hierarchy and flow
Shipping to RTL markets? Start a project — we handle the translation, the layout QA, and the Bidi edge cases so your Arabic and Hebrew builds ship without a second sprint.