How can I draw vertical text with CSS cross-browser?

Expanding the writing-mode horizons

The writing-mode property is mighty handy, but occasionally we need to rotate text for a specific visual effect or layout. Here's how:

.vertical-text-rotated {
  transform: rotate(90deg); /* Giving the text a nice spin! */
  transform-origin: 50% 50%;
}


To extend support to older versions of Internet Explorer (yeah, remember them!):

.vertical-text-rotated {
  /* Spin, text, spin! */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}


Check compatibility using the trustworthy caniuse.com, and don't neglect vendor prefixes for all your browser needs:

.vertical-text-rotated {
  -webkit-transform: rotate(90deg); /* All hail WebKit! */
  -moz-transform: rotate(90deg); /* Mozilla FTW! */
  -ms-transform: rotate(90deg); /* Good ol' Microsoft */
  -o-transform: rotate(90deg); /* Because Opera matters too */
  transform: rotate(90deg); /* For the modern adventurers */
}


Precision and compatibility

Text orientation tweaks

Sometimes you simply need to rotate a single word or letter, and for that inline elements make the perfect partners:

<p>Some <span class="rotated">vertical</span> text.</p> /* One word to rule them all! */


.rotated {
  display: inline-block;
  transform: rotate(90deg); /* A little twist never hurt! */
}


SVG for exact positioning

When your design calls for pixel-perfect placement, it's time to break out the big guns: SVG text:

<svg width="100" height="300">
  <text x="10" y="80" transform="rotate(90 10 80)">Your reliable vertical buddy</text>
</svg>


SVG offers text-anchor and alignment-baseline attributes for that much-desired precise control over text alignment and rotation.

Affection for old IE versions

Yes, we did mention those old fellows earlier! For Internet Explorer versions 6-8, conditional comments and the filter property work wonders:

<!--[if lt IE 9]>
<style>
.vertical-text-ie {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* A gentle nudge for IE */
}
</style>
<![endif]-->


Advanced techniques on text rotation

Using writing-mode for layout flow

Toggle writing-mode: vertical-lr; or writing-mode: vertical-rl; for orthogonal flows. Pairing this with text-orientation: upright; ensures your characters stay upright during their vertical journey.

Positioning after rotation

Rotated pieces of text might need a little nudge to behave. Use absolute positioning or flexbox to adjust the location:

.absolute-positioned-text {
  position: absolute; /* It's a bird, it's a plane, no, it's absolutely positioned text! */
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%) rotate(90deg);
}


Catering mobile browsers

Don't forget your mobile audience! Different input methods and screen orientations call for responsive design tactics. Flexbox and grid can help create adapting layouts for vertical text elements.