The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, and the direction in which blocks and lines progress.

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

This is most useful in languages such as Chinese, Japanese or Korean where the text is often set vertically. In the English language, it’s more likely that you’ll want to use this property for aesthetics reasons, such as aligning a heading in a block of text like this:

Syntax

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;
  • Initial: horizontal-tb
  • Applies to: all elements except table row groups, table column groups, table rows, table columns, ruby base containers, ruby annotation containers
  • Inherited: yes
  • Computed value: as specified
  • Animation type: not animatable

Values

writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

Each value combines two parts. The first describes whether text is laid out in horizontal or vertical lines, while the second describes the direction in which those lines and block-level content progress. tb means top-to-bottom, rl means right-to-left, and lr means left-to-right.

  • horizontal-tb: This is the default value. Text is laid out in horizontal lines, with lines and blocks progressing from top to bottom.
  • vertical-rl: Text is laid out in vertical lines, with lines and blocks progressing from right to left. Each new line is placed to the left of the previous one.
  • vertical-lr: Text is laid out in vertical lines, with lines and blocks progressing from left to right. Each new line is placed to the right of the previous one.
  • sideways-rl: Text is laid out in vertical lines that progress from right to left, but uses the typographic conventions of horizontal writing. As a result, the glyphs are rotated sideways, facing toward the right.
  • sideways-lr: Text is laid out in vertical lines that progress from left to right, but uses the typographic conventions of horizontal writing. As a result, the glyphs are rotated sideways, facing toward the left.

Writing modes and CSS layout

The writing-mode property doesn’t just change the orientation of text. More fundamentally, it establishes the block and inline directions that CSS uses to lay out content.

The inline axis follows the direction in which content flows within a line, while the block axis follows the direction in which blocks and lines stack. These axes can be horizontal or vertical depending on the writing mode.

In the default horizontal-tb writing mode, the inline axis runs horizontally and the block axis runs vertically. In a vertical writing mode such as vertical-rl, the inline axis runs vertically and the block axis runs horizontally.

Modern CSS layout is built around these logical axes. Flexbox, Grid, alignment, and logical properties describe relationships in terms of block, inline, start, and end, rather than being permanently tied to physical directions such as top, right, bottom, and left.

This is why logical properties such as inline-size and block-size are useful. Rather than referring to a fixed physical dimension like width and height, they describe the size of an element along its inline or block axis:

.element {
  inline-size: 20rem;
  block-size: 10rem;
}

In a horizontal writing mode, inline-size corresponds to the horizontal dimension and block-size to the vertical dimension. In a vertical writing mode, those relationships are switched.

The same principle applies to flow-relative properties such as margin-inline-start and padding-block-end, which refer to logical directions rather than fixed physical sides of the screen like left and bottom.

In Flexbox, a container with flex-direction set to row lays out items along the inline axis, while column lays them out along the block axis. As a result, a row can be horizontal or vertical depending on the writing mode.

Grid also respects the writing mode when placing and sizing items. Its rows and columns are not permanently tied to the physical horizontal and vertical directions.

Alignment properties such as align-items and justify-items , among others, follow the same principle.

Understanding this model is useful even if you never create a vertical layout. Once you start thinking in terms of block and inline axes, many modern CSS layout features become easier to understand, plus your layouts become less dependent on a particular writing direction or physical screen orientation.

Demo

Use the dropdowns to try different languages, writing-mode values, and direction. Watch how the text, the container, and the inline and block axis indicators change.

The language selector sets the typical values for each script, but you can override them to experiment. Notice that writing-mode changes more than the orientation of the text. It also changes how the entire container and its contents flow.

Browser Support

The writing-mode property is defined in the CSS Writing Modes Level 4 specification and is widely available across modern browsers.

Related articles