Direction and unicode-bidi
Learn direction and unicode-bidi properties.
The direction property
The direction property sets the horizontal flow of text. ltr goes left to right, rtl goes right to left. Arabic, Hebrew and Persian pages use rtl.
It is not just text: table column order, flex order and logical properties like inline-start follow this value too. One declaration realigns the whole page.
The unicode-bidi property
unicode-bidi controls bidirectional (bidi) text behavior. When a paragraph mixes Turkish and Arabic, the browser resolves it automatically; sometimes you must help.
unicode-bidi: isolate resolves the selected element independent of its surroundings; plaintext picks direction from content. Pair these with direction.
RTL page layout
The shortest way to make a page RTL is html { direction: rtl; }. After that, margin-left still targets the left edge; but margin-inline-start now lands on the right edge.
Prefer logical properties and you can flip the whole layout by changing one line. On multilingual sites that is a big win: the same file works for every direction.
Exercise Set the RTL page root
Write a direction: rtl declaration on the html selector. Add unicode-bidi: isolate in the same block. Only these two declarations belong in the block.
Show example solution
/* page root goes RTL */
html {
direction: rtl;
unicode-bidi: isolate;
}Test yourself
-
What does direction: rtl do?
- Changes the text color
- Text flows right to left
- Makes the text vertical
- Flips the background
Show answer
Text flows right to left — Correct. direction: rtl makes text flow right to left.
-
Arabic page direction
html { ____: rtl; }Show answer
html { direction: rtl; }