RTL (Right-to-Left)
اتجاه النص حيث تتدفق الأحرف من اليمين إلى اليسار. تستخدمه العربية والعبرية والتانا والكتابات الأخرى؛ يتطلب Bidirectional Algorithm للعرض الصحيح.
What is RTL (Right-to-Left)?
RTL stands for Right-to-Left, describing text that is written and read from right to left. Arabic, Hebrew, Persian (Farsi), Urdu, and several other scripts are inherently RTL. This is not a stylistic choice — it is the fundamental direction of these writing systems, as fixed by their orthographic traditions dating back thousands of years. Proper RTL support requires changes at every layer of text technology: from Unicode's bidirectional algorithm to CSS properties to HTML markup.
Unicode Bidirectional Algorithm (Bidi)
The Unicode Bidirectional Algorithm (UAX #9) is the specification for how to display text that mixes LTR and RTL content — called bidirectional or bidi text. Because a single paragraph might contain English, Arabic, and numbers all together, a strict mechanical rule set is needed to determine the display order of each run.
The algorithm assigns every character a bidi category: - L (Left-to-Right): A–Z, Latin digits, most punctuation - R (Right-to-Left): Hebrew characters - AL (Arabic Letter): Arabic, Thaana, Syriac characters - AN (Arabic Number): Arabic-Indic digits - EN (European Number): 0–9 ASCII digits
The algorithm then resolves the visual ordering based on the paragraph's base direction and these per-character categories.
Bidi Control Characters
Unicode provides invisible characters to explicitly override the automatic bidi behavior:
| Character | Unicode | Name | Effect |
|---|---|---|---|
| RLM | U+200F | Right-to-Left Mark | Forces bidi context rightward |
| LRM | U+200E | Left-to-Right Mark | Forces bidi context leftward |
| RLE | U+202B | Right-to-Left Embedding | Start RTL embedding |
| LRE | U+202A | Left-to-Right Embedding | Start LTR embedding |
| RLO | U+202E | Right-to-Left Override | Force all text RTL |
| LRO | U+202D | Left-to-Right Override | Force all text LTR |
| U+202C | Pop Directional Formatting | End an embedding/override | |
| RLI | U+2067 | Right-to-Left Isolate | RTL bidi isolate (modern) |
| LRI | U+2066 | Left-to-Right Isolate | LTR bidi isolate (modern) |
| PDI | U+2069 | Pop Directional Isolate | End isolate |
The RLO character (U+202E) was notoriously abused in filenames to disguise file extensions: Vacationgpj.exe would display as Vacationgpj.exe visually.
RTL in HTML and CSS
<!-- Set paragraph direction -->
<p dir="rtl">مرحبا بالعالم</p>
<!-- HTML attribute on document root -->
<html lang="ar" dir="rtl">
<!-- Use the <bdi> element for user-generated content of unknown direction -->
<p>Posted by <bdi>محمد</bdi> yesterday</p>
/* CSS direction property */
.arabic-text {
direction: rtl;
text-align: right; /* or use text-align: start (logical) */
}
/* CSS logical properties (preferred for bidi) */
.box {
margin-inline-start: 1em; /* left in LTR, right in RTL */
padding-inline-end: 0.5em; /* right in LTR, left in RTL */
border-inline-start: 2px solid; /* left border in LTR */
}
Mirroring in RTL
When a UI is mirrored for RTL, directional icons must also be mirrored: a "forward" arrow in LTR points right (→), but in RTL it should point left (←). Layout elements like sidebars, toolbars, and scrollbars typically mirror position.
Quick Facts
| Property | Value |
|---|---|
| RTL scripts | Arabic, Hebrew, Persian, Urdu, Thaana, Syriac, N'Ko, Tifinagh |
| Unicode bidi spec | UAX #9 (Unicode Standard Annex 9) |
| HTML direction attribute | dir="rtl" or dir="ltr" |
| CSS property | direction: rtl |
| Right-to-Left Mark | U+200F (RLM) |
| Right-to-Left Override | U+202E (RLO) — security risk |
| Modern isolate characters | RLI (U+2067), LRI (U+2066), PDI (U+2069) |
| CSS logical properties | margin-inline-start, padding-inline-end for bidi-aware layout |
المصطلحات ذات الصلة
المزيد في الطباعة الفنية
CSS @font-face descriptor specifying which Unicode code points a font should cover. …
Em: عرض يساوي حجم الخط. En: نصف em. يُستخدم لتحديد عرض em …
The mechanism by which a rendering engine substitutes glyphs from a secondary …
Modern font format developed by Microsoft and Adobe supporting up to 65,535 …
Fonts downloaded by the browser to render text, declared via CSS @font-face. …
ضبط المسافة بين أزواج أحرف معينة للانسجام البصري (مثل AV، To، LT). …
حرفان أو أكثر متصلان في شكل واحد. يمكن أن يكون طباعيًا (fi …
تنفيذ محدد لتصميم خط بحجم ووزن ونمط معينين. في الطباعة الرقمية، ملف …
التمثيل البصري للحرف كما يعرضه الخط. قد يكون للحرف الواحد عدة أشكال …
علامات ترقيم تستخدم لفصل أجزاء الجملة أو الإشارة إلى نطاقات. يحدد Unicode …