Recently, while editing some CSS in Opera inspector, I noticed a CSS property called
writing-mode, that was the first time I knew of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it with English, we can create a vertical text very easily.
The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress. As of MDN
The default writing mode
Browser agents that support this propery will have
horizontal-tb as the default value. This works for horizontal language scripts like: English, French, Arabic.. etc
We will explore the value of
vertical-lr, lr stands for (Left to right).
In the above design, we have a section title that is rotated 90deg around the top left of it’s origin. If you want to do this without CSS
writing-mode, we need to do the following:
- Create a positioning context for the wrapper element by adding
- Position the title absolutely by adding
- Change the transform origin based on how we want to rotate it. In our case we want to change it to the top left corner, so we add
transform-origin: left top.
- Rotate the title by adding
- Finally, we need to add some padding on the left side of the wrapper element in order to prevent the overlap between the section title and grid items.
A lot of work to do for such design, right? Lets explore how this could be done using CSS
We’re done! :D As you see, there is no need to position anything or add padding as we did. Checkout the demo below:
With the above design, we have a sharing widget that is placed vertically beside the content. It’s true that we can make this easily without CSS
writing-mode, but the interseting thing is that when using it with the social widget, we will get the ability to vertically center it (left, center or right).
As in the example, the social widget is vertically aligned to the top of its parent. By changing CSS
text-align propery, we can change the position of it. For example:
This will align it to the bottom of it’s parent! Easy, right? In the next example, it will be centered vertically.
And here is the demo for the social widget:
Disclaimer: I stopped using icon fonts and switched to SVG, I’m using the icon fonts for the sake of the demo only.
The global support is 84.65% and this is really good. You can use the property today in order to get benefit like we did in our examples.
Look at that green! :)
Demos from our awesome Front-End Community
- Floated title with writing-mode by Julian Lengfelder.
- Clever Idea to center content horizontally and vertically By Sheffield.
Thank you for reading.