1. css
  2. /properties
  3. /writing-mode

writing-mode

Overview

The writing-mode CSS property is used to define the direction of text layout and block progression in various languages and writing systems. It specifies whether the lines of text are laid out horizontally or vertically, as well as the direction in which the block elements progress.

Moreover, it finds usage when working with languages that have different writing systems, such as Chinese, Japanese, Korean, and Arabic, allowing you to create flexible and internationalized web designs.

Examples and Usage

In the example below, we'll showcase the different writing-mode values using a simple text example. We will create three divs, each with a distinct value for the writing-mode property(including the default). This will demonstrate how each value affects the layout of the text within the div.

<div class="horizontal-tb">Horizontal TB (Top-to-Bottom)</div>

<div class="vertical-rl">Vertical RL (Right-to-Left)</div>

<div class="vertical-lr">Vertical LR (Left-to-Right)</div>
.horizontal-tb, .vertical-rl, .vertical-lr {
  border: 1px solid black;
  margin-bottom: 20px;
  padding: 10px;
  width: 200px;
}

.horizontal-tb {
  writing-mode: horizontal-tb;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

The horizontal-tb value represents the default horizontal writing mode, with text flowing from left to right and lines stacking from top to bottom. The vertical-rl and vertical-lr values create vertical writing modes, where the text flows from top to bottom and lines stack from right to left or left to right, respectively.

Please note that there are two more writing-mode values, sideways-rl and sideways-lr, which are experimental and may change in the future. For more information on these experimental values, you can refer to the CSS Writing Modes Level 4 draft.

Syntax and Values

The writing-mode property accepts the following values:

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

Each value has a specific purpose:

ValueDescription
horizontal-tbThe default writing mode, with horizontal text layout.
vertical-rlVertical writing mode, with text flowing from top to bottom and lines stacking from right to left.
vertical-lrVertical writing mode, with text flowing from top to bottom and lines stacking from left to right.
sideways-rlRotates the text sideways, with lines progressing from right to left.
sideways-lrRotates the text sideways, with lines progressing from left to right.

Associated Properties

  • direction
  • unicode-bidi
  • text-orientation
  • text-combine-upright

Tips and Tricks

  • Comprehending writing modes can improve your grasp of CSS Flexbox and CSS Grid.

  • Understanding different writing modes is crucial for working with languages that use vertical writing systems, such as Chinese, Japanese, and Korean, as well as languages that have right-to-left writing systems, like Arabic and Hebrew.

  • Using writing-mode to rotate text or create unique layouts is an exciting way to enhance your designs, even when working solely with English text.

Browser Compatibility

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYesYesYesYesYesPartial

Useful Resources

CSS Writing Modes Module Level 3 - W3C

Can I use... writing-mode

Using CSS Writing Modes for International Layouts - W3C

Writing Modes Test Results - W3C