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>

Result

CSS writing-mode Property

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>

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>

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.

Browser support

chrome edge firefox safari opera
48.0+
8.0 - 47.0
12.0+ 41.0+ 11.0+
5.1 - 10.1 -webkit-
35.0+
15.0 - 34.0 -webkit-

Practice Your Knowledge

writing-mode:vertical-rl means that the content flows

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?