CSS writing-mode Property

The CSS writing-mode property specifies whether the text should be laid out vertically or horizontally.

This property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language. For example, East Asian languages such as Chinese or Japanese `are written horizontally, or some languages are written vertically.

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

For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions) are used with this property.

Initial Value	horizontal-tb
Applies to	All elements except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.writingMode = "vertical-lr";

Syntax

writing-mode: horizontal-tb | vertical-rl | vertical-lr | initial | inherit;

Example of the writing-mode property with the "horizontal-tb" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 20px;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
      }
      p::first-letter {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Writing-mode property example</h2>
    <p>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Try it Yourself »

Result

Another example where the content flows vertically from top to bottom and right to left.

Example of the writing-mode property with the "vertical-rl" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
        font-size: 20px;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
      }
      p::first-letter {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Writing-mode property example</h2>
    <p>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Try it Yourself »

In the following example, the content flows vertically from top to bottom and left to right.

Example of the writing-mode property with the "vertical-lr" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
        font-size: 20px;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
      }
      p::first-letter {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Writing-mode property example</h2>
    <p>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Try it Yourself »

Values

Value	Description
horizontal-tb	The content flows horizontally from left to right and vertically from top to bottom.
vertical-rl	The content flows vertically from top to bottom and horizontally from right to left.
vertical-lr	The content flows vertically from top to bottom and horizontally from left to right.
sideway-rl	The content flows vertically from top to bottom and all the glyphs are set sideways toward the right.
sideway-lr	The content flows vertically from top to bottom and all the glyphs are set sideways toward the left.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.