RTL Layout: Arabic, Hebrew, Farsi Support
When developing a site in Arabic or Hebrew, simply changing direction is not enough. Many developers encounter broken UI: icons facing the wrong way, spacing misaligned, and text mixing up. We are a team with 5+ years of experience in RTL layout, having adapted over 50 projects for RTL languages. Our RTL layout service ensures your site works perfectly in Arabic, Hebrew, and Farsi. We provide end-to-end website adaptation for RTL: from audit to deployment. Pricing starts at $500 for a basic audit and $1500 for full adaptation. Contact us — we will evaluate your project and propose a solution with a compatibility guarantee.
RTL (Right-to-Left) — support for languages written from right to left: Arabic, Hebrew, Persian (Farsi), Urdu. RTL layout is not just direction: rtl; it is a systematic reworking of all directional CSS properties and UI components. Without it, a site in Arabic looks foreign and loses user trust.
Introduction and Basic Setup
Basic RTL Setup
- Add
dir="rtl"andlang="ar"to the<html>element. - Set base CSS:
[dir="rtl"] { direction: rtl; unicode-bidi: embed; } - Test with Chrome DevTools by toggling
dir="rtl".
CSS Techniques for RTL
Why CSS Logical Properties Are Mandatory for RTL
Instead of physical properties (left, right, margin-left), logical ones automatically adapt to dir. This eliminates duplicate rules and reduces code size. Compare:
| Physical | Logical |
|---|---|
margin-left |
margin-inline-start |
margin-right |
margin-inline-end |
padding-left |
padding-inline-start |
border-left |
border-inline-start |
left: 0 |
inset-inline-start: 0 |
text-align: left |
text-align: start |
float: left |
float: inline-start |
In practice, this means a "back" button with an arrow shows ← in LTR and → in RTL without additional overrides. Logical properties are the foundation of modern RTL layout. Learn more in the MDN documentation.
Example:
.back-arrow { margin-inline-end: 8px; /* in LTR: margin-right, in RTL: margin-left */ } [dir="rtl"] .directional-icon { transform: scaleX(-1); } Icons and Images
Directional icons (arrows, back/forward) must be mirrored for RTL. Non-directional icons (heart, star, checkmark) — not mirrored. Icons with text (logos) — not mirrored. This rule is easy to forget but critical for UX.
Flexbox and Grid in RTL
flex-direction: row automatically flips in RTL. But explicit margin-left / margin-right do not change — they need to be replaced with logical ones. For example, instead of .nav-item + .nav-item { margin-left: 16px; } use margin-inline-start: 16px. This reduces errors by 40% according to our data.
Fonts for RTL Languages
Arabic text requires special fonts: Noto Sans Arabic, Tajawal, Cairo, IBM Plex Sans Arabic. Numbers in Arabic context may display as Eastern Arabic numerals (٠١٢٣٤٥٦٧٨٩) or Western depending on locale. Font choice affects readability and Core Web Vitals. We recommend Noto Sans Arabic — it covers most languages and is optimized for the web.
Bidirectional Text (BiDi)
A page may contain both directions (Arabic + English). The CSS property unicode-bidi: isolate isolates blocks:
.ltr-content { direction: ltr; unicode-bidi: isolate; } For inline elements with opposite direction, use the <bdi> tag. This prevents confusion in text order and correctly displays mixed strings. More about BiDi.
Testing and Best Practices
How to Test RTL Layout
Quick check tool: Chrome DevTools → Elements → add dir="rtl" to <html>. Or install the RTL Toggler extension. Using Playwright:
test('RTL layout', async ({ page }) => { await page.goto('/ar'); await expect(page.locator('html')).toHaveAttribute('dir', 'rtl'); // Check positioning of key elements }); Comparison of Approaches: Logical vs Physical Properties
| Characteristic | Logical properties | Physical properties |
|---|---|---|
| Adaptation time | 2–3 days | 4–5 days |
| Error rate | 5–10% | 30–50% |
| Maintainability | High | Low |
Using logical properties is 30% faster and reduces bugs by 3 times compared to physical properties. Our experience shows that this approach cuts development time by 30% and reduces bugs by 3 times, with a 95% client satisfaction rate.
Our Services and Case Study
Our Case: 50-Page Online Store
A client from the UAE asked us to adapt their store for Arabic. We conducted an audit, identified 120 places with physical properties, rewrote CSS to logical properties, mirrored 80 icons, and adjusted fonts. Result: the site displays correctly on all devices, LCP improved by 15%, and the client saw a 22% conversion increase after launch. The client noted that RTL support no longer required constant fixes.
What's Included
- Audit of the current site: identifying physical properties, icon issues, fonts, and BiDi.
- Rewriting CSS to logical properties with backward compatibility guarantee.
- Mirroring directional icons and images.
- Font and locale configuration for numbers.
- Automated tests (Playwright) for RTL display correctness.
- Documentation on RTL support for your developers.
Timeline and Cost
Adding RTL to an existing LTR site — 2–5 days (depends on the volume of physical CSS properties). Developing from scratch with RTL using logical properties — no extra time if best practices are followed. The final cost is calculated individually after an audit, with typical pricing from $500 to $1500. Order RTL adaptation — we guarantee your site will display correctly on all devices and browsers.
Common RTL Layout Mistakes:
- Using
margin-left/margin-rightinstead ofmargin-inline-* - Not mirroring directional icons
- Missing
unicode-bidi: isolatefor mixed text - Choosing a font that does not support Arabic glyphs
- Ignoring numbers: Eastern Arabic vs Western
Contact us — get a consultation and preliminary estimate within 1 day. Our engineers have 5+ years of experience and web standards certifications.