CODEWITHSUNDEEP
jqueryhtmlcss
thiswayup
thiswayup

Reputation: 2077

rotate text from a horizontal to a vertical position

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.

Upvotes: 1

Views: 19600

Answers (7)

indago
indago

Reputation: 2101

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>

Upvotes: 5

user191702
user191702

Reputation:

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.

Upvotes: 3

Keith
Keith

Reputation: 155882

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

Upvotes: 0

Georg Sch&#246;lly
Georg Sch&#246;lly

Reputation: 126185

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

Upvotes: 0

darasd
darasd

Reputation: 2997

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

Upvotes: 2

jeroen
jeroen

Reputation: 91792

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.

Upvotes: 0

Mark Pim
Mark Pim

Reputation: 10082

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!

Upvotes: 4

Related Questions