CodeClarityLab / Glossary
Ctrl K
← CodeClarityLab Home
Browse by Category
+ added · ✎ updated 7d
⚖ Terms of Use
← Back to glossary

Right-to-Left Language Support

i18n HTML5 Intermediate

Also Known As

RTL Arabic Hebrew bidi bidirectional

TL;DR

Design and implementation considerations for RTL languages (Arabic, Hebrew, Persian, Urdu) — text direction, mirrored layouts, and bidirectional text handling.

Explanation

RTL languages require: dir='rtl' on the HTML element or specific containers, CSS logical properties (margin-inline-start instead of margin-left) for automatic mirroring, CSS writing-mode adjustments, and bidirectional text handling for mixed LTR/RTL content. Libraries like Bootstrap support RTL via separate RTL stylesheets. PHP string functions work on bytes and are unaware of text direction — PHP processes RTL text correctly as long as encoding is handled. The main work is in HTML/CSS presentation.

Common Misconception

✗ RTL support is just flipping the text direction — it requires mirroring the entire layout (navigation, icons, padding, margins), handling bidirectional text, and updating UI components.

Why It Matters

350 million Arabic speakers and 9 million Hebrew speakers represent significant markets — RTL support often requires architectural decisions made early in CSS structure.

Common Mistakes

  • Using directional CSS properties (margin-left, padding-right) instead of logical properties — they don't flip with text direction.
  • Not testing with actual RTL content — placeholder lorem ipsum doesn't reveal RTL layout issues.
  • Hardcoded left/right icons that need mirroring — arrows, navigation chevrons should flip in RTL.
  • Not handling bidi text — numbers in Arabic text read left-to-right; Unicode bidi algorithm handles this if direction attributes are correct.

Code Examples

✗ Vulnerable 
/* Directional properties — don't work with RTL:
.nav { padding-left: 20px; }   /* Need padding-right in RTL */
.card { margin-right: 10px; }  /* Need margin-left in RTL */
.btn-icon { float: left; }     /* Need float: right in RTL */
✓ Fixed 
/* CSS logical properties — automatically mirror in RTL:
.nav  { padding-inline-start: 20px; } /* 'start' = left in LTR, right in RTL */
.card { margin-inline-end: 10px; }    /* 'end' = right in LTR, left in RTL */

<!-- HTML attribute for direction: -->
<html lang="ar" dir="rtl">
<!-- Or per-element: -->
<p dir="rtl">مرحبا بالعالم</p>
Added 15 Mar 2026
Edited 22 Mar 2026
Views 47

Curated in Warsaw under one editorial standard. 1,445 terms, single voice.  About this reference →

Rate this term
No ratings yet
🤖 AI Guestbook educational data only
| |
Last 30 days
0 pings F 0 pings S 1 ping S 0 pings M 0 pings T 1 ping W 0 pings T 0 pings F 0 pings S 1 ping S 0 pings M 0 pings T 1 ping W 0 pings T 0 pings F 0 pings S 0 pings S 0 pings M 0 pings T 2 pings W 0 pings T 1 ping F 0 pings S 0 pings S 0 pings M 0 pings T 0 pings W 1 ping T 0 pings F 0 pings S
Agents 0
No pings yet today
No pings yesterday
Amazonbot 7 Perplexity 7 Google 3 Ahrefs 2 ChatGPT 2 Unknown AI 2
Also referenced
Unicode Fundamentals 39 Semantic HTML 29 Locale-Aware Formatting 23 CSS Logical Properties 23
How they use it
crawler 21 crawler_json 1 pre-tracking 1
Related categories
frontend 891 i18n 346
⚡ DEV INTEL Tools & Severity
🟡 Medium ⚙ Fix effort: High
⚡ Quick Fix
Add dir='rtl' to the html element for RTL locales and use CSS logical properties (margin-inline-start instead of margin-left) — they flip automatically with direction
📦 Applies To
any HTML5 web
🔗 Prerequisites
🔍 Detection Hints
Fixed left/right CSS properties not switching for RTL languages; no dir=rtl on html element; RTL text rendering incorrectly in LTR layout
Auto-detectable: ✗ No axe browserstack
⚠ Related Problems
🤖 AI Agent
Confidence: Medium False Positives: Medium ✗ Manual fix Fix: Medium Context: File Tests: Update
✓ schema.org compliant