RTL (Right-to-Left) in the browser refers to layout and text direction where content flows from the right side of the screen to the left, used for languages like Arabic, Hebrew, Persian, and Urdu.
🌍 Why RTL Is Needed
Some languages are read and written from right to left, so the browser must:
- Start text from the right
- Align content to the right
- Reverse layout direction (menus, icons, scroll)
🧭 How Browsers Handle RTL
1️⃣ dir Attribute (Core of RTL)
<html dir="rtl">
or on a specific element:
<div dir="rtl">
✔ Changes text direction
✔ Affects alignment, scrolling, cursor movement
2️⃣ CSS direction Property
body {
direction: rtl;
}
Controls:
- Text flow
- Scrollbar position
- Inline element order
3️⃣ unicode-bidi (Advanced Control)
span {
unicode-bidi: bidi-override;
}
Used for mixed LTR + RTL text (rare but important).
🧪 Example
<div dir="rtl">
<p>مرحبا بالعالم</p>
</div>
➡ Text starts from the right, punctuation and cursor behave correctly.
🔄 How Layout Changes in RTL
| LTR | RTL |
|---|---|
| Left → Right | Right → Left |
| Margin-left | Margin-right |
| Padding-left | Padding-right |
| Flex row start = left | Flex row start = right |
🧠 Modern CSS for RTL (Best Practice)
Use logical properties instead of physical ones.
❌ Old:
margin-left: 20px;
✅ RTL-safe:
margin-inline-start: 20px;
Works for both LTR & RTL automatically.
📦 RTL with Flexbox
.container {
display: flex;
flex-direction: row;
}
In RTL:
- Items flow from right to left automatically.
🎯 Accessibility & UX Impact
✔ Correct reading order
✔ Natural navigation for RTL users
✔ Better global user experience
🎯 Short Interview Answer
RTL in browsers is used to support languages that read from right to left. It is handled using the
dir="rtl"attribute or CSSdirection: rtl, which reverses text flow, alignment, and layout behavior to match RTL language expectations.
⭐ One-line summary
RTL ensures the browser layout and text flow match right-to-left languages naturally.
