W3docs
en
Log in

CSS writing-mode Property

Use the writing-mode CSS property to define the direction of the text in which content flows. Read about property values and try examples.

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

This property changes the text flow direction so that content can be read horizontally (left to right or right to left) or vertically (top to bottom), depending on the value. For example, it is commonly used to support traditional vertical East Asian scripts or modern horizontal layouts. Note: When using vertical values, you typically need the text-orientation property to control how individual characters are rotated.

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.

Info

Modern browsers fully support the writing-mode property without vendor prefixes.

Initial Valuehorizontal-tb
Applies toAll elements except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container.
InheritedYes.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.writingMode = "vertical-lr";

Syntax

CSS writing-mode values

writing-mode: horizontal-tb | vertical-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;

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

CSS writing-mode code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 20px;
        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

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:

CSS writing-mode vertical-rl example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
        font-size: 20px;
        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:

CSS writing-mode vertical-lr example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
        font-size: 20px;
        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

ValueDescription
horizontal-tbThe content flows horizontally from left to right and vertically from top to bottom.
vertical-tbA modern alias for horizontal-tb. The content flows horizontally from left to right and vertically from top to bottom.
vertical-rlThe content flows vertically from top to bottom and horizontally from right to left.
vertical-lrThe content flows vertically from top to bottom and horizontally from left to right.
sideways-rlDeprecated in CSS Writing Modes Level 3. The content flows vertically from top to bottom and all the glyphs are set sideways toward the right.
sideways-lrDeprecated in CSS Writing Modes Level 3. The content flows vertically from top to bottom and all the glyphs are set sideways toward the left.
initialMakes the property use its default value.
inheritInherits the property from its parent element.

Practice

Practice

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