= CSS inline direction
{c}
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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§2.1, direction; §§6.2 and 6.4, logical directions and mappings]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§2, Inline Direction and Bidirectionality; §§2.1–2.2, direction and unicode-bidi]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§2.1, HTML directionality recommendation]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§2.1, normal inline-box limitation; §2.2, bidi scopes]{ref}
Back to article page
