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
.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:
widthbecomesblock-size, andheightbecomesinline-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.
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