writing-mode

Avatar of Robin Rendle
Robin Rendle on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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:

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
8*4111125.1*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1261273*5.0-5.1*