Right-to-left layout patterns and design considerations for Arabic, Hebrew, and other RTL languages.

LTRRTL

Navigation Bar

Social Media Card

John Doe

2 hours ago

This is a sample post content that demonstrates how text flows in different reading directions.

Form Layout

Breadcrumb Navigation

Text Direction Examples

English (LTR)

This text flows from left to right, which is the natural reading direction for English and most Latin-based languages.

Arabic (RTL)

هذا النص يتدفق من اليمين إلى اليسار، وهو الاتجاه الطبيعي للقراءة للعربية والعبرية.

Mirror Layout

Flip horizontal layouts completely, including navigation, content flow, and UI elements.

Text Direction

Use `dir="rtl"` attribute and proper CSS logical properties.

Icon Adaptation

Directional icons (arrows, chevrons) should be flipped for RTL.

TEXT ALIGNMENT

text-align: start;
text-align: end;

MARGINS & PADDING

margin-inline-start: 1rem;
padding-inline-end: 1rem;

POSITIONING

inset-inline-start: 0;
inset-inline-end: auto;

✅ Do

  • • Use CSS logical properties
  • • Test with real RTL content
  • • Mirror directional icons
  • • Consider mixed content

❌ Don't

  • • Hardcode left/right properties
  • • Forget to flip animations
  • • Mirror non-directional icons
  • • Assume automatic translation
Arabicالعربية
Hebrewעברית
Persianفارسی
Urduاردو
← Back to Internationalization