# CSS Writing Modes

The `writing-mode` property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. This is essential for supporting international languages (like Chinese, Japanese, or Mongolian) and for creative vertical layouts.

## 1. Values

*   **`horizontal-tb`** (Default): Content flows horizontally from left to right, vertically from top to bottom.
*   **`vertical-rl`**: Content flows vertically from top to bottom, horizontally from right to left. (Traditional East Asian).
*   **`vertical-lr`**: Content flows vertically from top to bottom, horizontally from left to right.

## 2. Basic Usage

```css
.vertical-text {
  writing-mode: vertical-rl;
}
```

## 3. Impact on Layout

Changing the writing mode rotates the entire layout axis.

*   **Block Flow Direction:** In `vertical-rl`, paragraphs stack from right to left.
*   **Inline Flow Direction:** Text runs from top to bottom.
*   **Logical Properties:** `width` becomes `block-size`, and `height` becomes `inline-size`.

## 4. Text Orientation

The `text-orientation` property defines the orientation of the text characters in a line. It only affects vertical modes.

*   **`mixed`** (Default): Rotates horizontal-only scripts 90°.
*   **`upright`**: Lays out characters of horizontal-only scripts naturally (upright), as well as the glyphs for vertical scripts.
*   **`sideways`**: Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.

```css
h1 {
  writing-mode: vertical-rl;
  text-orientation: upright; /* Letters stand up */
  letter-spacing: 5px;
}
```

## 5. Direction (`direction`)

The `direction` property sets the direction of text, table columns, and horizontal overflow.

*   `ltr`: Left to Right.
*   `rtl`: Right to Left.

This is distinct from `writing-mode`. `writing-mode` handles the block flow (vertical vs horizontal), while `direction` handles the inline flow (left-to-right vs right-to-left).

[[programming/css/css]]
[[programming/css/logical-properties]]
[[programming/css/typography]]