RTL and Arabic UX patterns that actually feel native

Flipping an English layout is not localisation. Arabic-first and bilingual products need typography, spacing, and navigation models designed for how people actually read and scan.

Common mistakes

• Mirroring icons that should stay directional (play, charts, media controls)
• Undersized Arabic type with cramped line height
• Mixing LTR numbers and dates inside RTL paragraphs without consistent rules

Patterns we use

1. Bidirectional components — Build cards, forms, and nav with logical properties (margin-inline, text-align: start).
2. Script-aware type scales — Arabic often needs +1 step size and more generous leading vs. Latin.
3. Content parity checks — If Arabic strings are 30% longer, layouts must flex without truncation.

Test with real content early

Use production copy in both languages during wireframes, not placeholder lorem. RTL issues discovered in QA are already too late.