RTL is more than `direction: rtl`

Most Arabic interfaces that feel wrong are not wrong because of the Arabic. They are wrong because someone set the direction and assumed the job was done. The browser does mirror a great deal for you — and the set of things it does not mirror is exactly the set of things people notice.

What the browser mirrors for you

Set dir="rtl" and you get text flow, inline box order, and — if you wrote them — every logical CSS property. That last part is the one worth changing your habits for.

What it does not mirror — and what people notice

This is the real list. Every item here has to be decided by a person.

• Directional icons. A back arrow, a “next” chevron, a send icon and an undo arrow all carry direction. A checkmark, a search glass and a trash can do not. Mirroring everything is as wrong as mirroring nothing.
• Carousels and sliders. The track direction, the drag direction, the dot order and the “next” button all have to agree with each other and with the reading direction.
• Progress rails and steppers. A checkout that progresses left-to-right in an Arabic layout reads as going backwards.
• Shadows and light. A shadow offset to the right implies a light source. Mirroring the layout without the light makes the depth model incoherent.
• Numbers and Latin fragments. Prices, model numbers, code, URLs and brand names stay left-to-right inside a right-to-left sentence. This is bidirectional text, and it is where most visible bugs live.
• Tables. The first column moves to the right, but numeric columns often should stay aligned as numbers. That is a content decision, not a CSS one.
• Scroll position. A horizontally scrollable container starts at the right in RTL, and browsers have historically disagreed about what scrollLeft means there.

The bidirectional text problem

An Arabic sentence containing a Latin product name, a version number or a URL is not one direction. The Unicode bidirectional algorithm resolves most of it correctly, and then fails visibly on the edges — usually around trailing punctuation, parentheses and mixed-script strings.

Bidi isolation

Wrapping a foreign-direction fragment so the surrounding text cannot be reordered by it. In HTML that is <bdi>; in CSS it is unicode-bidi: isolate. Use it for any value you did not author — user names, product titles, anything from a database.

<!-- The product name reorders the sentence around it -->
<p>وصل المنتج Galaxy S24 Ultra إلى المخزون.</p>

<!-- Isolated: the sentence stays stable whatever the value is -->
<p>وصل المنتج <bdi>Galaxy S24 Ultra</bdi> إلى المخزون.</p>

The review checklist