X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS writing-mode Property

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

The writing-mode 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

<!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>
    </div>
  </body>
</html>

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

Example

<!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>
    </div>
  </body>
</html>

An example where the content flows vertically from top to bottom and left to right:

Example

<!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>
    </div>
  </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

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



Do you find this helpful?

Related articles