Learn: the web, apps and software projects, explained /
RTL website design for Hebrew and Arabic
A right-to-left (RTL) website is built for languages such as Hebrew and Arabic, where text and layout flow from right to left. Doing it properly means setting the dir attribute, using logical CSS properties instead of left and right, handling numbers and Latin text inside RTL sentences, mirroring only the icons that should mirror, and declaring languages with hreflang.
Start with lang and dir
Set the language and direction on the root element, for example <html lang="he" dir="rtl"> or lang="ar" dir="rtl". The dir attribute is the right tool because it is semantic: browsers, screen readers and assistive tools all read it, while a CSS direction rule alone is only visual.
For a snippet in a different direction, such as an English quote inside a Hebrew page, put dir on that element. For text you do not control, like user-submitted content, dir="auto" lets the browser pick the direction from the first strong character.
Use logical CSS properties, not left and right
Physical properties such as margin-left, padding-right, text-align: left and float: right are fixed to a side, so they break when the direction flips. Logical properties follow the reading direction: margin-inline-start, padding-inline-end, border-inline-start, inset-inline-start and text-align: start.
Flexbox and grid already follow the document direction, so a row simply reverses in RTL without extra rules. Writing the layout once with logical properties means one stylesheet serves Hebrew, Arabic, English and Russian instead of a forked RTL copy that drifts out of date.
Numbers, Latin text and form inputs
RTL text is not simply reversed. The Unicode bidirectional algorithm lays out numbers and Latin words as left-to-right runs inside a right-to-left sentence, which usually works, but punctuation next to them can jump to the wrong side. Phone numbers, email addresses, URLs, prices with symbols and product codes are the usual offenders.
Wrap such fragments in an element with dir="ltr", or use <bdi> for names and values whose direction is unknown, so they keep their own order. For form fields, give email, phone and URL inputs dir="ltr" with text aligned to the start, and leave free-text fields on dir="auto". Always test with real content, not placeholder text.
Icons and fonts
Icons that imply direction should mirror in RTL: back and forward arrows, chevrons, progress and next-step indicators, list indents, reply and send arrows, and sliders. Icons that should not mirror include logos, checkmarks, clocks, media play and pause controls, photographs and anything depicting a real object with a fixed handedness.
Choose fonts with proper Hebrew and Arabic glyphs rather than relying on a fallback. Arabic letters connect, so never add letter-spacing to Arabic text, because it breaks the joins. Give Arabic a little more line height than Latin text, avoid italics for both scripts, and check weight and size visually, since the same font size looks smaller in Arabic.
Multilingual sites and hreflang
If the same page exists in several languages, give each version its own URL and tell search engines how they relate with hreflang. Every version lists all the alternates, including itself, and the references must be reciprocal, so the Hebrew page points to Arabic and English and each of those points back.
Add an x-default for visitors who match none of them, make the hreflang value match the page's lang attribute, and avoid forcing redirects based on browser language alone, which can lock people out of the version they want. We build in Hebrew, Arabic, English and Russian from the start rather than patching RTL on later.
FAQ
How do I make a website right to left?
Set dir="rtl" and the correct lang on the html element, build the layout with logical CSS properties so it flips automatically, use fonts that support Hebrew or Arabic, and test numbers, Latin text, icons and forms with real content.
Should I mirror every icon in RTL?
No. Mirror icons that point or progress in a direction, like arrows and chevrons. Leave logos, checkmarks, clocks, media play controls and photographs as they are.
Why do phone numbers and prices look broken in Hebrew or Arabic text?
Numbers and Latin text run left to right inside an RTL sentence, and surrounding punctuation can attach to the wrong side. Wrapping the fragment in an element with dir="ltr", or in <bdi>, keeps it intact.
What are CSS logical properties?
They describe sides relative to the reading direction instead of the screen, such as margin-inline-start instead of margin-left. In RTL they flip automatically, so one stylesheet works for every language.
How do I use hreflang for Hebrew and Arabic pages?
Give each language its own URL and add link rel="alternate" hreflang tags on every version listing all versions, including itself, plus an x-default. Each language must point back to the others.