direction

Values

• ltr: left to right. This is the initial value.
• rtl: right to left.

In vertical writing (writing-mode: vertical-rl and so on), ltr means top to bottom and rtl means bottom to top.

What changes

Each character's own direction comes from its script: Latin letters and Japanese run left to right, Arabic and Hebrew run right to left. direction sets the base direction of the paragraph. It decides the order of runs that go in different directions, and characters with no direction of their own, such as !, follow the characters around them when both sides agree and follow direction where they do not (for example at the end of a sentence).

Set the preview to rtl and the English and Japanese lines move to the right, with the final ! and ！ jumping to the left end. In the Arabic line, the ! that sat at the right end with ltr moves to the left end, where the sentence ends.

Everything else tied to the line direction changes too. The initial text-align value start aligns right, text-indent indents from the right, flexbox row, grid columns and table columns run from the right, and content that overflows sideways overflows to the left. direction is inherited by child elements.

Use the dir attribute in HTML

The spec recommends the dir attribute (such as <html dir="rtl">) instead of direction in HTML, so the text keeps its direction even when CSS does not load. Browsers set direction on elements that have a dir attribute.

On an inline element, direction does not change the order of characters while unicode-bidi is left at its initial normal. Also, all, which resets every property, does not reset direction or unicode-bidi.