How to add RTL support to your website: Arabic, Hebrew, and more (2026)
Arabic and Hebrew together represent hundreds of millions of internet users. Adding right-to-left support is one of the higher-leverage internationalisation decisions a web team can make — and it's more tractable than most developers expect.
What RTL means for web development
The foundational mechanism for RTL in HTML is the dir attribute. Setting dir="rtl" on the <html> element tells the browser to apply right-to-left rendering to the entire document.
In practice, this changes several browser behaviors simultaneously:
- →Text alignment defaults to the right rather than the left.
- →Flex direction is mirrored — items that flow left-to-right in LTR now flow right-to-left.
- →Margin and paddingphysical values don't flip — only logical property equivalents do.
- →Scroll position starts from the right edge.
The languages that require RTL rendering include: Arabic, Hebrew, Persian (Farsi), Urdu, and Kurdish (Sorani). Thaana (Maldivian) and a few other scripts are also RTL but have much smaller web audiences.
The two approaches: logical CSS vs physical CSS
CSS has two ways to express spacing and alignment: physical (tied to screen edges) and logical (tied to text direction). Understanding this distinction is the core of RTL development.
| Physical property | Logical equivalent | RTL behavior |
|---|---|---|
margin-left | margin-inline-start | Flips to right in RTL |
margin-right | margin-inline-end | Flips to left in RTL |
padding-left | padding-inline-start | Flips to right in RTL |
padding-right | padding-inline-end | Flips to left in RTL |
text-align: left | text-align: start | Aligns to right in RTL |
border-left | border-inline-start | Moves to right in RTL |
Scroll horizontally to view every column.
Tailwind CSS provides logical utility equivalents: ms-* / me-* for margin-inline, ps-* / pe-* for padding-inline, and text-start / text-end for alignment. Using these instead of their physical counterparts means your layout flips correctly in RTL without any additional CSS.
Common RTL pitfalls
Even with logical properties in place, several UI patterns require specific attention:
Directional icons
Icons that imply direction — arrows, chevrons, progress indicators, breadcrumb separators, play/forward buttons — should be mirrored in RTL. A right-pointing arrow that means “next” should become a left-pointing arrow in Arabic. SVG icons can be mirrored with transform: scaleX(-1) applied under a [dir="rtl"] selector. Icons with no directional meaning (a checkmark, a star, a phone) should not be mirrored.
Mixed Arabic/English content (bidirectional text)
The Unicode bidirectional algorithm handles mixed-script content automatically, but it can produce unexpected results when Arabic and Latin text appear in the same paragraph. Inline LTR content (like an English product name within an Arabic sentence) is handled by the browser, but punctuation adjacent to mixed-direction text may appear in the wrong position. Test your specific content patterns, not just the layout.
Numbers are always LTR
Even in an RTL document, numerals (1, 2, 3…) always render left-to-right. Phone numbers, prices, and dates follow LTR ordering within the RTL flow. Arabic-Indic numerals (٠١٢٣٤٥٦٧٨٩) are an exception used in some regional contexts, but Western Arabic numerals in RTL text are always left-to-right.
Code blocks should stay LTR
Code, terminal output, and programming syntax must always be rendered LTR regardless of the surrounding document direction. Apply dir="ltr" explicitly on <pre> and <code> elements, or use a CSS rule like [dir="rtl"] code { direction: ltr; }.
How to test RTL locally
The fastest way to test RTL rendering is directly in browser DevTools — no language switching or server changes required.
- 1Open DevTools (F12 or Cmd+Option+I), select the Console tab, and run:
document.documentElement.dir = "rtl". The page immediately flips to RTL without a reload. - 2Alternatively, select the
<html>element in the Elements panel and add thedir="rtl"attribute directly. - 3Scroll through every page and interactive state. Pay specific attention to: navigation menus, modals and drawers, form layouts, tables, and any component with absolute or fixed positioning.
Both Firefox and Chrome render RTL correctly and are reliable for this kind of testing. Safari on macOS is also useful for verifying system-level font rendering for Arabic text.
Serving RTL to users automatically
When you use Lingvit for translation, RTL layout switching is handled automatically. When a visitor switches to Arabic, Hebrew, Persian, or Urdu, Lingvit sets:
When the visitor switches back to an LTR language, it sets dir="ltr" again. Your LTR visitors are completely unaffected — the attribute is only toggled for users who select an RTL language.
For most sites built with logical CSS properties and Tailwind logical utilities, this single attribute change is sufficient for a correct RTL layout without any additional CSS rules.
What you still need to review
Even with automatic RTL switching, some patterns don't flip correctly from a single attribute change and need explicit review:
- ✗Absolutely positioned elements — components using
left: 0orright: 0(physical) don't flip. Replace withinset-inline-start/inset-inline-end. - ✗Directional SVG icons — arrows and chevrons with directional meaning need explicit
[dir="rtl"]mirror rules. - ✗CSS gradients and shadows with physical direction — e.g., a left-to-right gradient that creates a visual reading-direction indicator.
- ✗Third-party component libraries — chart libraries, date pickers, and rich text editors may have their own RTL support settings that need enabling separately.
Frequently asked questions
- Which languages require RTL?
- The main RTL languages with significant web audiences are Arabic, Hebrew, Persian (Farsi), and Urdu. Kurdish Sorani is also RTL. Thaana (Dhivehi/Maldivian) is RTL but has a smaller web presence. All other widely-used languages — including all European, East Asian, and South Asian scripts — are LTR.
- Does RTL switching affect LTR visitors?
- No. The dir attribute is set to 'rtl' only when a visitor actively selects an RTL language. LTR visitors see dir='ltr' (or the default, which is LTR). Language preference is stored per-browser-session, so there is no cross-contamination between users.
- How do I test RTL on a production site without affecting users?
- Open the page in a private/incognito window, open DevTools, and run document.documentElement.dir = 'rtl' in the Console. This only affects your session. You can also set the Lingvit language switcher to Arabic in your own browser to see the full translation + RTL experience.
Related guides
Add Arabic and Hebrew to your site
Lingvit handles RTL layout switching automatically. No CSS changes required.