What is writing mode in CSS?

Image for post
Image for post
Photo by Maksym Potapenko on Unsplash

This is a CSS property that determines how our text is laid out on the page. Most of the time, we never need to think of this attribute. But we can use it in an aesthetic sense.

I will not cover all of its values but explain three of its values.

1.Horizontal-tb: This is the default values we use. Texts is laid out left to right and we read text from top to bottom.

2.Vertical-lr: It comes into play when we want to layout elements vertically. Let's watch an example.

In this example, we used (writing-mode: “vertical-lr). If we add a new heading it will be added to the right of all the heading.

3.Vertival rl: It is the reverse of the value “vertical-rl”. Every new element will be positioned on to the right leftmost side of the page. Now we use the same HTML code above and only change the writing-mode to “vertical-rl”.Let's see the output

We see that the last header is added to the leftmost side. IF we add more heading or other content, it will be positioned on the leftmost side.

That's all. There are other values but they are limited to some specific browser and specific languages. Thanks a lot for reading.

Follow me for further articles. Thank you.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store