The direction Property

The CSS direction property is essential for internationalization, as it controls the base direction of block-level content and the direction of inline text, table columns, and horizontal overflow.

This property is most important for handling languages that are read from Right-to-Left (RTL), such as Arabic, Hebrew, and Persian.

Syntax and Values

The direction property accepts two main keyword values, representing the dominant writing system flow.

Value	Description	Use Case
ltr	Left-to-Right	The default reading direction for Latin, English, and most European languages.
rtl	Right-to-Left	Required for languages like Arabic, Hebrew, and Farsi.

Example

To set an entire page for a right-to-left language, you would typically apply the property to the body element:

styles.css

/* Sets the base direction for the entire page */
body {
  direction: rtl;
}

/* Specific elements can override the base direction */
.code-block {
  direction: ltr; /* Ensures code blocks are still read LTR */
}

What the direction Property Affects

Changing the direction property does more than just reverse the words; it fundamentally changes the structure of the element:

1. Text Flow: Text starts on the right and flows to the left.
2. Horizontal Alignment: The default alignment for text and inline elements becomes right-aligned.
3. Layout: Items in a flex or grid layout will typically start from the right side of the container.
4. Scroll Bars: In some cases, the scroll bar position or scroll direction may be reversed.

The Role of unicode-bidi

When dealing with mixed directional text (like an English URL or number inserted into an Arabic sentence), the browser needs a rule to handle the conflict. This is where the unicode-bidi property comes in.

It is used in conjunction with direction to implement the Unicode bidirectional algorithm, which manages text that contains both LTR and RTL characters.

Common unicode-bidi Values

Value	Description
normal	The default setting. The browser uses the standard Unicode algorithm to figure out the direction automatically.
embed	Explicitly overrides the text direction for the element and forces the text flow defined by the direction property.
bidi-override	Completely ignores the intrinsic directionality of the characters and forces the text to flow according to the direction property.

In most modern contexts, the default unicode-bidi: normal works well, but if you are forcing a direction, you might use:

styles.css

.rtl-text {
  direction: rtl;
  unicode-bidi: embed; 
}

Interactive direction Demo

Use the live editor to change the direction value between ltr and rtl. Observe how the text flow, the position of the scrollbar (if visible), and the alignment of the text are affected.

Challenge: Set direction: rtl; in the CSS. Then, observe how the text still flows RTL, even if you explicitly set text-align: left;. The direction property is more structural than simple text alignment.