A few days ago I discovered the writing-mode
CSS property for the first time. It allows you to change the display of text from horizontal to vertical display:
.headline {
writing-mode: vertical-lr;
}
The browser support for this is pretty good, you only need to add a few prefixes for a couple browsers. Have a look at the support table on CanIUse: http://caniuse.com/#search=writing-mode
While this is pretty cool and easy to use it doesn't have an option to let the text flow from bottom to top, which somehow is the way I would expect it to behave or at least that's what I like more.
If you want to achieve this, you have to use the CSS transform
property and rotate the text like that:
.headline {
display: inline-block;
transform: rotate(-90deg);
/**
* The transform-origin will probably depend on
* the rest of your layout
*/
transform-origin: top left;
}
It's not as comfortable to use because of the positioning of the rotated text but it's the only way I know of to get vertical text from bottom to top.
See the Pen Vertical writing by Martin Wolf (@martinwolf) on CodePen.
Update
Daniel Diekmeier has a brilliant idea to achieve the 'bottom to top' layout. It's much easier to work with than my rotate solution. Thanks, Daniel!
@_martinwolf Life hack: pic.twitter.com/c7AWEA8e5G
— Daniel Diekmeier (@danjel) November 5, 2015
.headline {
writing-mode: vertical-lr;
transform: rotate(180deg);
}