CSS writing-mode Property

Description

The writing-mode property specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

Initial value

horizontal-tb

Applies to

All elements except table row groups, table column groups, table rows, and table columns

Inherited

Yes

Media

Visual

Computed value

Specified value

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.writingMode

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

Desktop
9	12	48	41	35	10.1
Tablets / Mobile
48	48	41	35	10.3	5.0

Last updated by CSSPortal on: 1st November 2019