writing-mode property - CSS Reference

Definition and Usage

CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.

A writing mode in CSS is determined by the writing-mode, direction, and text-orientation properties. It applies only to the <text> element, and is ignored by <tspan>, <tref>, <altGlyph>, and <textPath> sub-elements. (Note that the inline-progression-direction can change within a <text> element due to the Unicode bidirectional algorithm and the direction and unicode-bidi properties.) A writing mode is defined primarily in terms of its inline base direction and block flow direction.

The inline base direction is the primary direction in which inline-level content is ordered, and defines which sides of a line are considered to be the "start" and "end". The direction property specifies the inline base direction of an element, and (together with the unicode-bidi property and the inherent directionality of the text content) determines the ordering of inline-level content.

The block flow direction is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus the writing-mode property also determines the ordering of block-level content.

In general, a horizontal writing mode is one with horizontal lines of text and either a downward or upward block flow; a vertical writing mode is one with vertical lines of text and either a leftward or rightward block flow.

Values

The writing-mode property can take the following values.

Value	Effect	Example
`horizontal-tb`	Default value. Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line. `horizontal-tb` is the default value, as this layout is used by most writing systems. For SVG1 documents only, use the deprecated value `lr`, `rl`, or `lr-tb`.	<div style="writing-mode:horizontal-tb"> ... </div>
`rl-tb`	Content flows horizontally from right to left, vertically from top to bottom. The next horizontal line is positioned below the previous line.	<div style="writing-mode:rl-tb"> ... </div>
`vertical-lr`	Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line. For SVG1 documents only, use the deprecated value `tb-lr`.	<div style="writing-mode:vertical-lr"> ... </div>
`vertical-rl`	Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line. For SVG1 documents only, use the deprecated value `tb` or `tb-rl`.	<div style="writing-mode:vertical-rl"> ... </div>
`bt-rl`	Content flows vertically from bottom to top, horizontally right to left. The next vertical line is positioned to the left of the previous line.	<div style="writing-mode:bt-rl"> ... </div>
`bt-lr`	Content flows vertically from bottom to top, horizontally left to right. The next vertical line is positioned to the right of the previous line.	<div style="writing-mode:bt-lr"> ... </div>
`lr-bt`	Content flows horizontally from left to right, vertically from bottom to top. The next horizontal line is positioned above the previous line.	<div style="writing-mode:lr-bt"> ... </div>
`rl-bt`	Content flows horizontally from right to left, vertically from bottom to top. The next horizontal line is positioned above the previous line.	<div style="writing-mode:rl-bt"> ... </div>
`lr`	Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` (default value).	<div style="writing-mode:horizontal-tb"> ... </div>
`lr-tb`	Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` (default value).	<div style="writing-mode:horizontal-tb"> ... </div>
`rl`	Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` (default value).	<div style="writing-mode:horizontal-tb"> ... </div>
`tb`	Deprecated except for SVG1 documents. For CSS, use `vertical-rl`.	<div style="writing-mode:vertical-rl"> ... </div>
`tb-lr`	Deprecated except for SVG1 documents. For CSS, use `vertical-lr`.	<div style="writing-mode:vertical-lr"> ... </div>
`tb-rl`	Deprecated except for SVG1 documents. For CSS, use `vertical-rl`.	<div style="writing-mode:vertical-rl"> ... </div>