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; }

Next lesson: Summary - Multi-direction card

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies