Hacking CSS writing mode
The writing-mode CSS property sets horizontal and vertical text direction. While meant for multilingual purposes, it can be exploited for design.
The writing-mode CSS property sets the direction of content, both horizontally and vertically.
The values are:
Content flows horizontally from left to right, vertically from top to bottom. The default value.
Content flows vertically from top to bottom, horizontally from right to left.
Content flows vertically from top to bottom, horizontally from left to right.
A simple, minimalist example to start.
v-block div, the
writing-mode property has a value of
Another minimalist example.
Again, two divs, but note how the text flows in
v-block from right to left. The CSS is the same as above.
And now we add transform
We're using a basic flexbox
container to hold things together.
transform property in
w-block-2 has a
rotate value, along with big padding.
Writing-mode works with Edge 12+, Chrome 48+, Firefox 41+, Safari 11+, iOS Safari 11+, Chrome for Android 70+, Android browser 67+, Firefox for Android 63 and Opera 35+.