CSS writing-mode Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

writing-mode: horizontal-tb;

writing-mode: vertical-lr;

writing-mode: vertical-rl;

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

HTML

<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>

CSS

.test1 {
   writing-mode: horizontal-tb;
}
.test2 {
   writing-mode: vertical-rl;
}
.test3 {
   writing-mode: vertical-lr;
}

Result

Editor

Browser Support

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

Desktop

12	48	41	35	10.1

Tablets / Mobile

48	41	35	10.3	5	48

Last updated by CSSPortal on: 31st December 2023

Support Us