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

Question

I want to rotate a single word of text by 90 degrees, with cross-browser (>= IE6, >= Firefox 2, any version of Chrome, Safari, or Opera) support. How can this be done?

Solution 1

Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Old answer:

For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I'm not certain how to use it. Opera has no transformation capabilities yet.

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  /* IE support too convoluted for the time I've got on my hands... */
}

Solution 2

I am using the following code to write vertical text in a page. Firefox 3.5+, webkit, opera 10.5+ and IE

.rot-neg-90 {
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

Solution 3

Another solution is to use an SVG text node which is supported by most browsers.

<svg width="50" height="300">
    <text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text>
</svg>

Demo: https://jsfiddle.net/bkymb5kr/

More on SVG text: http://tutorials.jenkov.com/svg/text-element.html

Solution 4

The CSS Writing Modes module introduces orthogonal flows with vertical text.

Just use the writing-mode property with the desired value.

span { margin: 20px; }
#vertical-lr { writing-mode: vertical-lr; }
#vertical-rl { writing-mode: vertical-rl; }
#sideways-lr { writing-mode: sideways-lr; }
#sideways-rl { writing-mode: sideways-rl; }

<span id="vertical-lr">
  ↑ (1) vertical-lr 至<br />
  ↑ (2) vertical-lr 至<br />
  ↑ (3) vertical-lr 至
</span>
<span id="vertical-rl">
  ↓ (1) vertical-rl 至<br />
  ↓ (2) vertical-rl 至<br />
  ↓ (3) vertical-rl 至
</span>
<span id="sideways-lr">
  ↓ (1) sideways-lr 至<br />
  ↓ (2) sideways-lr 至<br />
  ↓ (3) sideways-lr 至
</span>
<span id="sideways-rl">
  ↓ (1) sideways-rl 至<br />
  ↓ (2) sideways-rl 至<br />
  ↓ (3) sideways-rl 至
</span>

Solution 5

I adapted this from http://snook.ca/archives/html_and_css/css-text-rotation :

<style>
    .Rotate-90
    {
        display: block;
        position: absolute;
        right: -5px;
        top: 15px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
    }
</style>
<!--[if IE]>
    <style>
        .Rotate-90 {
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            right:-15px; top:5px;
        }
    </style>
    <![endif]-->

View more solutions

Comments

[Robert K]

There is no pure CSS you can use with cross compatibility. What I've got is all there is. You're better off with an image.

[Admin]

Vertical text crossbrowser is not so difficult. On the dns4.nl there is a solution that works even in opera. I tested it with all versions ie, mozilla and safari (also crown). the link is: dns4.nl/pagina/html_code/vertikale_tekst.html. comment for xkcd150: > Problem is, that's relying on the canvas element. – xkcd150 Sep 20 at 10:13 No, the procedure isn't relying on the canvas element.

[Juanma Guerrero]

Here's a tutorial that explain how to do all kind of text transformations even in IE (including the solution to your problem) :) useragentman.com/blog/2010/03/09/… Hope it helps!

[Admin]

Here is a breakdown of the technique I used: scottgale.com/blog/css-vertical-text/2010/03/01

[Nahuel]

I could rotate successfully following the instructions giving on this page but i couldn't print the page. The text get printed backwards. This website was very useful to me: sevenwires.com/play/UpsideDownLetters.html

[Fernando Silva]

There's a good answer to this here, just posting since I happened to bump into this post and didn't really find what I was looking for. code.tutsplus.com/tutorials/…

[RMorrisey]

+1 for the ghost bear icon ;) I had a good deal of trouble making this work, I ended up having to change my DOM structure and fudging with a negative margin. An IE version that's simpler to use but doesn't look right when the page is printed out: writing-mode: tb-rl; filter: flipv fliph;

[Asaf Bartov]

Works on Chrome 5. Doesn't work on IE 8 "quirks" mode; does work on "IE8 Standards mode".

[Shivender Khajuria]

Thanks for letting me know. Please post it here, if you find a way to have vertical Text in IE under quirks mode.

[Matt]

Microsoft "filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);"

[ClarkeyBoy]

Loving the differentiation between IE6+ and all modern browsers - it reads as if you're saying any version of IE is not modern :)

[Douglas H. M.]

I suggest: .rotate { /* Safari / -webkit-transform: rotate(-90deg); / Firefox / -moz-transform: rotate(-90deg); / IE / -ms-transform: rotate(-90deg); / Opera / -o-transform: rotate(-90deg); / Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } Source: css-tricks.com/snippets/css/text-rotation

[Romløk]

Unfortunately, IE9 (in standards mode!) applies both the -ms-transform-* styles, and the filter. In compatibility view, it only applies the filter.

[Robert K]

@Raumkraut Your mileage may vary, but I heard that IE6-8 will properly interpret values with a \9 at the end, and IE9 will reject them. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)\9; But I haven't tested it and I'm not so sure it's wise.

[skmasq]

@ClarkeyBoy I would say only IE10 is almost up to speed with other browsers, and only because forced gpu rendering and grid layout. You can't really cal IE a modern browser, because it updates x3-x10 times slower then every other browser.

[James Westgate]

Make sure your text is a block element ie use display:inline-block or similar

[Justin Grant]

Here's some filters for IE8 and IE9 goodness. The first is IE8, second is IE8 standards mode, and #3 removes the filter for IE9+. Arrrgh, I can't get stackoverflow comments to stop filtering out my CSS hacks, so look at jsfiddle.net/GrPyj/9

[Picard]

great solution, much better than the previous ones - no problems with text positioning after rotate

[yishaiz]

Still works, but notice that: All vendor mixins are deprecated as of v3.2.0 due to the introduction of Autoprefixer in our Gruntfile. They will be removed in v4.

[b01]

Best bet is to use an SVG file or this JS, as you may find that using the CSS transform property may not be compatible with your responsively designed pages.

[godblessstrawberry]

sideways-rl as of now is not supported widely, I would recommend vertical-rl and rotating to 180 deg