The CSS 4 writing mode property is explained with examples

The CSS 4 writing mode property is explained in this article.These properties are used to change the alignment of the text. The text then could be read from top to bottom and right to left.

Writing mode properties

According to MDN this is the syntax for the writing mode property and its values:

/* Keyword values */

writing-mode: horizontal-tb; // horizontal direction from top to bottom

writing-mode: vertical-rl; // vertical direction from right to left

writing-mode: vertical-lr; // vertical direction from left to right

/* Global values */

writing-mode: inherit;

writing-mode: initial;

writing-mode: unset;

Writing mode horizontal tb value

Actually this is the default value for the writing mode property. Text flow direction is from top to bottom and left to right. Check out this pen for how it works:

Writing mode vertical lr value

Expectedly this is the second value for writing mode property. It changes the flow of the content from the default horizontal to vertical but keeps the reading direction to left to right.This is a pen to show how this value works:

Writing mode vertical rl value

Finally this is the third value of the writing mode property. However this is the interesting one. Because it changes the flow of the content horizontally from right to left. Normally this is great for languages like Chinese or Korean or Japanese where the flow of the text is normally vertical.

Check out this pen to get a better idea around this writing mode value:

Side note around writing mode property

The SVG element has a writing-mode as an attribute. The writing-mode attribute specifies whether the initial inline-progression-direction for a text element shall be left-to-right, right-to-left, or top-to-bottom. The writing-mode attribute applies only to text elements.

Because of various type of writing in different languages and importance of visual design the writing mode property can be useful and essential in different types of designs. Therefor it is good to be aware of it. Thanks for reading.

© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.