writing-mode

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, let’s say we want to add some text that is read from top to bottom and from right to left, like this:

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

This is most useful in languages such as Chinese, Japanese or Korean where the text is often set vertically. In the English language, it’s more likely that you’ll want to use this property for aesthetics reasons, such as aligning a heading in a block of text like this:

Values

In the examples below I’ve made the first letter of the text red, just so it’s easier to see which direction you need to start reading.

horizontal-tb

This is the default value of the property: text is read from left to right and top to bottom.

vertical-rl

Text is read from right to left and top to bottom:

vertical-lr

Text is read from left to right and top to bottom:

Related links

• Vertical text with CSS3 Writing Modes
• Ahmad Shadeed on writing-mode

Browser support