Writing modes & logical

writing-mode

Sets whether lines of text run horizontally or vertically, and which way successive lines (and blocks) stack. It defines the block axis and the inline axis that every logical property on this page is measured along.

The two sideways-* values arrived later: Chrome 132 · Firefox 43 · Safari 18.4.

writing-mode: vertical-rl;

direction

The base direction of text in the inline axis: left to right or right to left. It decides where inline-start and inline-end fall, the order of table columns, and which side text aligned to start sits on. In HTML, set it with the dir attribute rather than CSS, because direction belongs to the content, not its styling.

unicode-bidi

Controls how an element's text takes part in the Unicode bidirectional algorithm when left-to-right and right-to-left text are mixed. Like direction, it is usually better set from markup (dir, <bdi>, <bdo>).

isolate, isolate-override and plaintext arrived later: Chrome 48 · Firefox 50 · Safari 11.

text-orientation

Sets how characters are turned in vertical writing modes. It has no effect in horizontal-tb.

text-combine-upright

In vertical text, squeezes a short run of characters, such as the two digits of a date, into the space of a single upright character so they read horizontally. Japanese typesetting calls this tate-chū-yoko.

.tcy { text-combine-upright: all; }

glyph-orientation-vertical Deprecated

A legacy SVG property for turning glyphs in vertical text. It has no behaviour of its own: its values map onto text-orientation (auto to mixed, 0deg to upright, 90deg to sideways). Use text-orientation instead.

inline-size, block-size

The preferred size of the box along the inline axis and the block axis. In horizontal writing modes they are width and height; in vertical ones, the other way round.

min-inline-size, min-block-size

A lower limit on the box's size along the inline or block axis: the logical forms of min-width and min-height.

max-inline-size, max-block-size

An upper limit on the box's size along the inline or block axis: the logical forms of max-width and max-height.

max-inline-size: 65ch;

margin-block, margin-inline

Shorthands for the two margins in one axis. One value sets both the start and end margin; two values set start then end.

margin-inline: auto;

margin-block-start, margin-block-end, margin-inline-start, margin-inline-end

The margin on one flow-relative side. Each one maps to a physical margin according to the writing mode and direction, as in the table above.

padding-block, padding-inline

Shorthands for the two paddings in one axis. One value sets both the start and end padding; two values set start then end.

padding-block: 0.5rem;
padding-inline: 1rem;

padding-block-start, padding-block-end, padding-inline-start, padding-inline-end

The padding on one flow-relative side. Each one maps to a physical padding according to the writing mode and direction.

inset-block, inset-inline

Shorthands for the two insets of a positioned box in one axis. One value sets both start and end; two values set start then end. The physical top, right, bottom, left and inset are under Positioning, floats & columns.

inset-block-start, inset-block-end, inset-inline-start, inset-inline-end

The distance of a positioned box's edge from the matching edge of its containing block, on one flow-relative side.

position: absolute;
inset-block-start: 0;
inset-inline-end: 0;

overflow-block, overflow-inline

Overflow handling along the block axis or the inline axis: the logical forms of overflow-y and overflow-x in horizontal writing modes. The values mean the same as for overflow.