How to draw vertical text with CSS cross-browser?

Question

Hi, i want to rotate a single word of text by 90 degrees cross-browser (>= ie6, >= ff2, webkit).

Answer 1

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... */
}

Answer 2

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: http://www.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.

Answer 3

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]-->

Answer 4

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

-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);