Designing for right-to-left (RTL) languages — Arabic, Hebrew, Persian, Urdu — is not just about flipping a layout. It requires a deep understanding of how users read, how their eyes scan a page, and how cultural context shapes their expectations.
If you’re building a product for the MENA region or a global product that serves Arabic-speaking users, this guide will walk you through the principles that separate amateur RTL design from professional work.
The MENA Opportunity
The Middle East and North Africa region represents over 400 million Arabic speakers with rapidly growing digital adoption:
- Smartphone penetration in Saudi Arabia exceeds 95%
- E-commerce in the GCC is growing at 20%+ annually
- Government digitization initiatives (Vision 2030, UAE 2031) demand RTL-first products
- Arabic content online lags behind demand, creating opportunities
Yet most “Arabic versions” of global products feel like afterthoughts. The interfaces are flipped mechanically, type looks broken, and the experience feels foreign. This is a missed opportunity worth fixing.
Core Principle: Mirror, Don’t Just Flip
The first instinct is to take an LTR design and flip it horizontally. This works for layout direction but fails for many other elements.
Mirror These:
- Navigation menus (logo on the right)
- Sidebars (move to the right)
- Primary action buttons (move to the right)
- Breadcrumbs (right-to-left flow)
- Pagination controls
- Carousel arrows
- Progress bars
- Tabs and step indicators
- Reading flow (F-pattern becomes reverse-F)
Don’t Mirror These:
- Video players (videos play left-to-right regardless)
- Brand logos (unless specifically designed in RTL)
- Number sequences (12345, not 54321)
- Charts and graphs based on time (left = past, right = future is universal)
- Phone numbers and email addresses
- Code snippets
- Music notation
- File icons
Typography: The Heart of Arabic Design
Arabic typography is fundamentally different from Latin typography. It’s not a “translation” of letterforms — it’s a different system.
Key Differences:
1. Connected Letters
Arabic letters connect to form words. There’s no “letter spacing” the way there is in Latin scripts. Adding letter-spacing breaks Arabic words.
2. Letter Shapes
Most Arabic letters have 4 forms (initial, medial, final, isolated). Quality Arabic fonts handle this automatically through OpenType features.
3. Ascenders and Descenders
Arabic letters extend further above and below the baseline than Latin letters. This means you need:
– Larger line-height (1.6-1.8 vs 1.4-1.5 for Latin)
– More vertical padding in containers
– Larger font sizes for equivalent readability
4. Numerical Systems
Arabic uses two number systems:
– Eastern Arabic numerals (٠١٢٣٤٥٦٧٨٩) — common in MENA
– Western Arabic numerals (0123456789) — common in Maghreb and tech contexts
Recommended Arabic Fonts:
| Font | Best For |
|---|---|
| IBM Plex Sans Arabic | Tech products, SaaS, dashboards |
| Cairo | Modern websites, e-commerce |
| Tajawal | Mobile apps, casual interfaces |
| Almarai | Long-form reading, blogs |
| Readex Pro | Educational platforms |
| Noto Sans Arabic | Multi-language apps |
Pro tip: Use one font with multiple weights rather than mixing fonts. The visual coherence is far better.
Typography Rules:
/* Arabic-friendly typography */
.arabic-text {
font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
line-height: 1.7;
letter-spacing: 0; /* Never negative */
font-size: 16px; /* Minimum for body text */
text-align: right; /* Default for RTL */
}
Bidirectional (BiDi) Text Handling
Bidirectional text is when LTR and RTL content mix — for example, an Arabic sentence containing an English brand name or URL.
The Unicode BiDi Algorithm
Modern browsers handle BiDi automatically through the Unicode Bidirectional Algorithm (UBA). Most of the time it works, but edge cases exist.
When to Use Explicit Markers:
<!-- Force LTR for English in Arabic context -->
<p dir="rtl" lang="ar">
تواصل معنا على <span dir="ltr">support@example.com</span>
</p>
<!-- Force RTL for Arabic in English context -->
<p dir="ltr" lang="en">
Our address: <span dir="rtl" lang="ar">شارع الملك فهد</span>
</p>
Common BiDi Pitfalls:
- Phone numbers with country codes:
+966 12 345 6789should remain LTR - Date formats: be consistent (Hijri vs Gregorian)
- Mixed punctuation: Arabic uses ، not , and ؟ not ?
Icons in RTL: A Detailed Guide
Not all icons should be flipped. Here’s the rule of thumb:
Always Mirror:
- Navigation arrows (back, forward, next, previous)
- Reply/Forward in email contexts
- Indent/Outdent in editors
- Tab indicators showing direction
- Slide-in panels
Never Mirror:
- Checkmarks (✓) and X marks (✗)
- Notifications (🔔)
- Settings (⚙)
- Home (🏠)
- Heart/Like (❤)
- Camera, microphone, speaker icons
- Brand logos
- Search (🔍) — debated, but typically not mirrored
- Play/Pause in media players (cultural debate exists)
Use Logical CSS Properties:
/* Old way: physical properties */
.button {
margin-left: 16px;
padding-right: 24px;
}
/* New way: logical properties */
.button {
margin-inline-start: 16px;
padding-inline-end: 24px;
}
Logical properties (margin-inline-start, padding-block-end, etc.) automatically adapt to the writing direction.
Forms in RTL
Layout Rules:
- Labels above fields, right-aligned
- Required asterisk (*) on the right of the label
- Error messages below fields, right-aligned, in red
- Submit button on the right, Cancel on the left
- Tab order flows right-to-left, then top-to-bottom
Input Fields:
input[dir="rtl"] {
text-align: right;
padding-inline-start: 12px;
padding-inline-end: 40px; /* Space for icon if any */
}
Phone Numbers:
Phone numbers should be entered LTR even in RTL forms. Use dir="ltr" on the input or set the input mode appropriately.
Cultural Considerations
Design isn’t just visual — it’s cultural. For MENA audiences:
Colors:
- Green has strong positive associations (growth, Islam, Saudi Arabia)
- Gold signals luxury and quality
- Red is used for warnings and danger (less for “sale” than in Western markets)
- Black is preferred over white in many luxury contexts
Imagery:
- Use diverse representations (not just one stereotype of “Arab”)
- Be mindful of clothing, settings, and contexts
- Avoid imagery that conflicts with religious values
- Family-oriented imagery resonates strongly
Language:
- Modern Standard Arabic (MSA) for formal contexts
- Local dialects (Egyptian, Saudi, Khaleeji) for casual marketing
- Avoid Google Translate for any production copy
Testing Your RTL Design
1. Native Speaker Review
Get an Arabic-speaking designer or user to evaluate your interface. They’ll catch issues you can’t see.
2. Bidirectional Edge Cases
Test interfaces with mixed LTR/RTL content (English brand names, URLs, code snippets in Arabic articles).
3. Mobile Devices
Many RTL bugs only appear on mobile, especially with auto-suggestion keyboards in Arabic.
4. Screen Readers
Test with VoiceOver (iOS), TalkBack (Android), or NVDA (Windows) in Arabic. Verify reading order is correct.
5. Form Validation
Submit forms with Arabic content and verify backend handling. Many systems break with Arabic input.
Tools for RTL Design
Design Tools:
- Figma: Native RTL support since 2023 (Layout Direction setting)
- Adobe XD: Excellent RTL support
- Sketch: Requires plugins for full RTL workflow
- Penpot: Open-source alternative with growing RTL support
Development Frameworks with RTL Support:
- Material UI: First-class RTL support
- Ant Design: Comprehensive RTL components
- Chakra UI: RTL via theme provider
- Tailwind CSS: Use
dir="rtl"and logical properties
Testing Tools:
- Pseudo-localization extensions: Test layouts before translation
- BiDi character generators: Test edge cases
- Real device testing: BrowserStack with Arabic locale
Common Mistakes to Avoid
Mistake 1: Treating RTL as an Afterthought
Adding RTL support after the LTR design is finalized creates friction. Design RTL-first or RTL-parallel.
Mistake 2: Using a Single Font for Both Languages
A font that looks great in English may render poorly in Arabic. Test typography in both directions.
Mistake 3: Hard-coding Direction in CSS
Using margin-left instead of margin-inline-start makes RTL conversion painful.
Mistake 4: Mirroring Brand Elements
Don’t mirror logos, brand colors, or product imagery. Maintain brand consistency.
Mistake 5: Forgetting Numeric Inputs
Phone fields, prices, dates — these need careful handling in RTL contexts.
Mistake 6: Ignoring Voice/Tone in Translation
Direct translation often produces awkward Arabic. Hire copywriters who understand the language and the brand.
Accessibility in RTL
Follow WCAG 2.1 AA at minimum:
– Color contrast ≥ 4.5:1 (Arabic typography needs strong contrast)
– Text resizable to 200% without loss of functionality
– ARIA labels in Arabic for screen readers
– Keyboard navigation that respects RTL flow
For Saudi government platforms, “Nafath” accessibility standards apply — they extend WCAG with specific requirements.
Conclusion
Great RTL design is invisible. When done right, Arabic-speaking users feel the product was made for them, not adapted for them. When done poorly, every interaction reminds them they’re using a “translated” experience.
At Tiny Giants, we specialize in building products that feel native to MENA users — from typography choices to cultural nuance. Our team of Arabic-speaking designers and developers understands the difference between flipping a layout and crafting an authentic experience.
If you’re building for Arabic-speaking audiences, let’s talk:
Read More:
