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; }

See the Pen writing-mode: vertical-rl by CSS-Tricks (@css-tricks) on CodePen.

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:

See the Pen YWBWGA by CSS-Tricks (@css-tricks) on CodePen.

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.

See the Pen writing-mode: horizontal-tb by CSS-Tricks (@css-tricks) on CodePen.

vertical-rl

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

See the Pen writing-mode: vertical-rl by CSS-Tricks (@css-tricks) on CodePen.

vertical-lr

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

See the Pen writing-mode: vertical-rl by CSS-Tricks (@css-tricks) on CodePen.

Related links

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

ChromeOperaFirefoxIEEdgeSafari
8*15*4111125.1*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
5.0-5.1*37No3*5752
This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag