CSS Writing Modes and Logical Properties

Intermediate

CSS Writing Modes defines how inline and block directions are established, how text flows through those directions, and how physical coordinates map to flow-relative concepts. CSS Logical Properties and Values then lets declarations follow that flow instead of hard-coding left, right, top, and bottom.

This lesson owns writing-mode, direction, text-orientation, the block and inline axes, bidi-related directionality controls that belong to CSS Writing Modes, and logical or flow-relative geometry. CSS Text remains the owner of white-space, line breaking, wrapping, justification, and text transformation; CSS Fonts remains the owner of font selection.

Writing mode establishes the two layout axes

Every writing mode establishes an inline axis and a block axis. The inline axis is the direction in which text advances within a line; the block axis is the direction in which successive lines or blocks are laid out. The physical top, right, bottom, and left sides are therefore not always the same as block-start, block-end, inline-start, and inline-end.

1
2
3

.sample {
  writing-mode: vertical-rl;
}

?

The block axis is defined by the writing mode

The block axis is perpendicular to the inline axis for the writing modes covered here. In horizontal writing, blocks normally progress vertically. In vertical writing, blocks progress horizontally, and the direction depends on the selected writing mode.

?

Writing mode is not the same thing as text alignment

Changing writing-mode changes the coordinate system used by text and flow. It does not mean that text-align, justification, or line breaking become a Writing Modes concept. Those remain CSS Text behavior applied within the established writing mode.

<p class="vertical-text">This is still text layout. The line direction is vertical, but wrapping and white-space remain ? behavior.</p>

`direction` affects inline direction

The direction property establishes the base direction of inline content for the element. It is especially important for right-to-left scripts and for bidirectional text. It participates in determining how logical inline-start and inline-end map to physical sides.

.rtl { ?; border: 2px solid currentColor; padding: 1rem; text-align: start; }

`text-orientation` controls glyph orientation in vertical writing

Vertical writing needs a rule for how characters are oriented within the vertical line. `text-orientation` controls that presentation. It is therefore related to writing mode, but it does not replace font selection or text shaping.

.vertical { writing-mode: vertical-rl; ?: mixed; border: 2px solid currentColor; padding: 1rem; block-size: 14rem; }

Logical directions describe flow, not physical sides

Flow-relative terms such as block-start, block-end, inline-start, and inline-end remain meaningful when the writing mode changes. This lets one stylesheet express relationships such as “padding at the start of the inline axis” without deciding that start means left.

article { writing-mode: vertical-rl; ?: 2rem; padding-block-start: 1rem; border: 2px solid currentColor; }

Logical sizes follow the axes

`inline-size` and `block-size` correspond to the logical dimensions of the box. Their physical mapping depends on writing mode. This does not move the general sizing algorithm into Writing Modes: CSS Sizing still owns how preferred, minimum, maximum, automatic, and intrinsic sizes are resolved.

.box { writing-mode: vertical-rl; ?: 10rem; block-size: 7rem; border: 3px solid currentColor; padding: .75rem; }

Logical margins and borders use the same flow mapping

Logical margin and border properties express their edges relative to block and inline flow. They are a mapping mechanism, not a second Box Model. The Box Model remains the owner of what padding, borders, and margins mean for the box.

?

Physical properties and logical properties can coexist

A stylesheet can contain both physical and logical declarations. The CSS Logical Properties specification defines relationships and mapping rules for corresponding property groups. Authors should choose deliberately: flow-relative declarations are useful when the same design should adapt to writing direction or mode, while physical coordinates remain appropriate for genuinely physical effects.

?

Bidi and writing mode are related but not identical

Bidirectional text can contain runs with different directionality inside one line. Writing Modes establishes the overall writing environment, while the Unicode bidirectional processing model and CSS direction-related controls determine how directional text is arranged. Do not reduce bidi to simply “turning the page RTL.”

.rtl { ?; border: 2px solid currentColor; padding: 1rem; text-align: start; }

Vertical writing does not create a new text-layout owner

A vertical line still needs white-space processing, line breaking, justification, and transformation. Those algorithms remain CSS Text behavior, now applied in the writing mode established by Writing Modes.

?

Logical properties are not a replacement for every physical effect

Some visual effects intentionally depend on the physical canvas rather than the writing flow. Logical properties are most useful when the relationship should follow the writing mode. A drop shadow that should always appear toward a physical screen direction is a different design requirement.

?

A practical Writing Modes debugging method

When a layout behaves unexpectedly, first identify the element’s writing-mode and direction. Then name its inline and block axes, map start/end to physical sides, and only then inspect the relevant Text, Box Model, Sizing, or layout-system rule. This prevents debugging from starting with the wrong physical edge.

?

What this lesson deliberately does not own

CSS Text owns white-space processing, line breaking, wrapping, alignment, justification, indentation, spacing, and text transformation. CSS Fonts owns font selection and matching. CSS Text Decoration owns decoration. CSS Sizing owns general dimension resolution. Box Model owns the meaning of margins, padding, and borders. Flexbox and Grid own their layout algorithms. This lesson supplies the writing-mode and flow-relative coordinate system those mechanisms use.

CSS Writing Modes Level 3 is a W3C Recommendation and Level 4 is a Candidate Recommendation Snapshot. CSS Logical Properties and Values Level 1 is current CSSWG work dated 12 December 2025. Developing features are clearly labelled in the curriculum rather than presented as settled requirements.

Quick review

You should now be able to explain the inline and block axes, distinguish writing-mode from text formatting, use logical dimensions and spacing, reason about RTL and vertical writing, and debug a flow-relative declaration without converting everything back to left/right/top/bottom.