/blog/articles/

Vertical Writing with CSS

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:

Screen-Shot-2015-11-05-at-08.55.53
.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.

Screen Shot 2015-11-05 at 08.56.51

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!

.headline {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
Martin Wolf

Hi, I’m Martin Wolf, a Freelance Frontend Web Developer from Germany.
I believe in hard work and sharing what I know.

Contact me

Interested in working with me? Fantastic! The best way to get in touch is by email (hello@martinwolf.org). I’m looking forward to hearing from you.