rotate text from a horizontal to a vertical position

Question

Is it possible to rotate text from a horizontal position to a vertical on a single point without using something like flash? So I would read the same text normally by tilting my head.

I was thinking you can do this in jquery but couldn't find a plug in.

Answer 1

I remember looking into this myself and discovering that it was either really hack-y or just not possible.

IE allows

<div STYLE="writing-mode: tb-rl">Content rendered vertically</div>

But AFAIK it doesn't work anywhere else (certainly doesn't on FF 3).

The best solution seems to be to use images (possibly dynamically generated). Sorry to not be more help!

Answer 2

I don´t know if it´s any help, but you can do it in two steps:

• Use a server-side solution like php to convert your text into an image
• Rotate the image using a jquery plugin (for example jquery-rotate)

The problem is that the result is an image, and not a text any more.

Answer 3

You may have to use SVG instead of HTML - of course, not all browsers support SVG, and some do it better than others.

Answer 4

There are some new CSS specifications proposed by webkit. They are currently only implemented in their nightlies and Apple's Safari 4 Developer Preview.

Answer 5

I've asked a couple of questions on this theme myself...

You can do this with a dynamic image - although that has its problems (C# example).

You can also do this with with CSS in IE.

The new CSS transforms in the latest Safari, Chrome and FX don't quite work either (includes example).

Answer 6

CSS will allow...

-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The element must also be display:block.

Answer 7

i used pure CSS and it worked very fine for me,here is the code:

<div style="-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); z-index:inherit; float:left">Not at all</div>