CSS writing-mode Property

Description

The CSS writing-mode property specifies how text is laid out, whether horizontally or vertically. It also determines the direction in which blocks progress, meaning the direction in which block-level elements are stacked and inline-level content flows within block containers. This property can be set on any element, but it is most commonly used on the root element (html) to set the writing mode for the entire document.

Initial value
horizontal-tb
Applies to
All elements except table row groups, table column groups, table rows, and table columns
Inherited
Yes
Computed value
Specified value
Animatable
No
JavaScript syntax
object.style.writingMode

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

writing-mode: horizontal-tb | vertical-rl | vertical-lr

Values

  • horizontal-tbTop-to-bottom block flow direction. The writing mode is horizontal.
  • vertical-rlRight-to-left block flow direction. The writing mode is vertical.
  • vertical-lrLeft-to-right block flow direction. The writing mode is vertical.

Example

<table> 
<tbody>
<tr>
<th>horizontal-tb</th>
<th>vertical-rl</th>
<th>vertical-lr</th>
</tr>
<tr>
<td><p class="test1">Sample Text</p></td>
<td><p class="test2">Sample Text</p></td>
<td><p class="test3">Sample Text</p></td>
</tr>
</tbody>
</table>
.test1 {
   writing-mode: horizontal-tb;
}
.test2 {
   writing-mode: vertical-rl;
}
.test3 {
   writing-mode: vertical-lr;
}

Browser Support

The following table will show you the current browser support for the CSS writing-mode property.

Desktop
Edge Chrome Firefox Opera Safari
1248413510.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
48413510.3548

Last updated by CSSPortal on: 31st December 2023