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

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

Syntax

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

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

The writing-mode  property is specified as one of the values listed below.

Values

horizontal-tb
Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line.
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.
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.
sideways-rl
Content flows vertically from top to bottom and all the glyphs, even those in vertical scripts, are set sideways toward the right.
sideways-lr
Content flows vertically from top to bottom and all the glyphs, even those in vertical scripts, are set sideways toward the left.
lr
Deprecated except for SVG1 documents. For CSS, use horizontal-tb instead.
lr-tb
Deprecated except for SVG1 documents. For CSS, use horizontal-tb instead.
rl
Deprecated except for SVG1 documents. For CSS, use horizontal-tb instead.
tb
Deprecated except for SVG1 documents. For CSS, use vertical-lr instead.
tb-rl
Deprecated except for SVG1 documents. For CSS, use vertical-rl instead.

Formal syntax

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Example

This example demonstrates all of the writing modes, showing each with text in various languages.

HTML

The HTML is simply a <table> with each writing mode in a row with a column showing text in various scripts using that writing mode.

<table>
  <tr>
    <th>Value</th>
    <th>Vertical script</th>
    <th>Horizontal script</th>
    <th>Mixed script</th>
  </tr>
  <tr>
    <td>horizontal-tb</td>
    <td class="example Text1"><span>我家没有电脑。</span></td>
    <td class="example Text1"><span>Example text</span></td>
    <td class="example Text1"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-lr</td>
    <td class="example Text2"><span>我家没有电脑。</span></td>
    <td class="example Text2"><span>Example text</span></td>
    <td class="example Text2"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-rl</td>
    <td class="example Text3"><span>我家没有电脑。</span></td>
    <td class="example Text3"><span>Example text</span></td>
    <td class="example Text3"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-lr</td>
    <td class="example Text4"><span>我家没有电脑。</span></td>
    <td class="example Text4"><span>Example text</span></td>
    <td class="example Text4"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-rl</td>
    <td class="example Text5"><span>我家没有电脑。</span></td>
    <td class="example Text5"><span>Example text</span></td>
    <td class="example Text5"><span>1994年に至っては</span></td>
  </tr>
</table>

CSS

The CSS that adjusts the directionality of the content looks like this:

.example.Text1 span, .example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}

.example.Text2 span, .example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.example.Text3 span, .example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}

.example.Text4 span, .example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}

.example.Text5 span, .example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}

Result

This image shows what the output should look like, in case your browser's support for writing-mode is incomplete:

Specification

Specification Status Comment
CSS Writing Modes Module Level 3
The definition of 'writing-mode' in that specification.
Candidate Recommendation Initial definition
CSS Writing Modes Level 4
The definition of 'writing-mode' in that specification.
Candidate Recommendation Add sideways-lr and sideways-rl

Initial valuehorizontal-tb
Applies toall elements except table row groups, table column groups, table rows, and table columns
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support Yes
Full support Yes
Full support 8
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 41
Notes
Full support 41
Notes
Notes Firefox 42 added support for bidirectional and RTL scripts in vertical modes.
No support 36 — 51
Disabled
Disabled From version 36 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 9
Prefixed Notes
Full support 9
Prefixed Notes
Prefixed Requires the vendor prefix: -ms-
Notes Internet Explorer's implementation differs from the specification.
Opera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari Full support 5.1
Prefixed
Full support 5.1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support Yes
Full support Yes
Full support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support Yes
Full support Yes
Full support 47
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android Full support 41
Notes
Full support 41
Notes
Notes Firefox 42 added support for bidirectional and RTL scripts in vertical modes.
No support 36 — 51
Disabled
Disabled From version 36 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Full support 5.1
Prefixed
Full support 5.1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
Full support Yes
Full support 5.0
Prefixed
Prefixed Requires the vendor prefix: -webkit-
lr, lr-tb, rl, rl-tb, tb, and tb-rl
Deprecated
Chrome Full support 48Edge Full support 12Firefox Full support 43IE Full support 9
Prefixed
Full support 9
Prefixed
Prefixed Requires the vendor prefix: -ms-
Opera Full support YesSafari ? WebView Android Full support 48Chrome Android Full support 48Edge Mobile Full support YesFirefox Android Full support 43Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
horizontal-tb, vertical-lr, and vertical-rlChrome Full support YesEdge No support NoFirefox Full support 43IE No support NoOpera Full support YesSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No
sideways-lr and sideways-rl
Experimental
Chrome No support NoEdge ? Firefox Full support 43IE No support NoOpera No support NoSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also