CSS inline direction

The CSS inline direction is the base directionality used for text within a line and for related direction-dependent layout. The direction property selects ltr or rtl; together with CSS writing mode, this establishes the mapping of logical inline-start and inline-end to physical directions.^[ref]

For a horizontal example with ordinary start-aligned text, direction: ltr places inline-start at the left edge, while direction: rtl places it at the right. A label aligned to inline-start can consequently change sides without changing its source text. In vertical writing, interpreting inline-start requires the writing-mode mapping too; it is not always a physical left or right edge.

Base direction is not an instruction to reverse every letter. The Unicode Bidirectional Algorithm considers the directional properties of text and the surrounding embedding or isolation context. A left-to-right sequence such as ABC can retain its internal order inside a right-to-left paragraph. CSS uses that algorithm rather than treating a string as an undifferentiated list to reverse.^[ref]

For HTML, the specification recommends expressing a document's directional semantics with markup such as <p dir="rtl">ABC</p> instead of depending solely on a CSS override. That example establishes a right-to-left paragraph base; it does not promise the visible sequence CBA. Keeping the directional information in the document also preserves it when styling is unavailable.^[ref]

CSS block flow direction remains a separate choice. A right-to-left horizontal paragraph still participates in a top-to-bottom block flow under horizontal-tb. Conversely, vertical lines can progress across a page under the block rules while their inline base direction follows its own mapping.

The scope of an override matters as well. A direction declaration on an ordinary inline box with unicode-bidi: normal does not by itself open a new embedding level for reordering. Diagnose the box's direction, its writing mode and the relevant bidirectional scope together.^[ref]