javascript / jQuery / CSS - vertical text ?

Question

Hi

how can I make text draw vertically, like in this site: http://cure.org/help-now/ ? I see that it's done with jQuery + SlideDeck because I see them loaded, but how exactly does the plugin do this?

Firefox has css -moz-transform, but other browsers don't have such properties, and the vertical text from that site shows in all browsers

Answer 1

<dt class="spine spine_1 previous" style="position: absolute; z-index: 3; display: block; left: 0px; width: 330px; height: 50px; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 10px; -webkit-transform: rotate(270deg); -webkit-transform-origin-x: 25px; -webkit-transform-origin-y: 0px; text-align: right; top: 335px; margin-left: -25px; ">
  GIVE
  <div class="index" style="position: absolute; z-index: 2; display: block; width: 50px; height: 50px; text-align: center; bottom: -25px; left: 20px; -webkit-transform: rotate(90deg); -webkit-transform-origin-x: 25px; -webkit-transform-origin-y: 0px; ">
    1
  </div>
</dt>

Looking at the codebehind it would appear they're relying on -webkit-transform: rotate(270deg);

And opening it in IE8 and examining with Developer Tools I see

z-index: 3; position: absolute; text-align: right; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); PADDING-BOTTOM: 0px; padding-left: 10px; width: 330px; padding-right: 20px; display: block; height: 50px; margin-left: 0px; top: 0px; padding-top: 0px; left: 0px; rotation: 270deg; webkittransform: rotate(270deg); WebkitTransformOrigin: 25px 0px; moztransform: rotate(270deg); MozTransformOrigin: 25px 0px; otransform: rotate(270deg); OTransformOrigin: 25px 0px;

Where this jumps out at me: filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Answer 2

It's done with CSS3.

CSS3 comes with a lot of new properties, although not all of them are supported in all browsers. On the webpage they use

/* webkit browsers */
-webkit-transform: rotate(270deg);
-webkit-transform-origin-x: 25px;
-webkit-transform-origin-y: 0px;

/* firefox */
-moz-transform:rotate(270deg);
-moz-transform-origin:25px 0;

/* internet explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

As you can see, they use a filter for internet explorer (it's a bit hacky)

Answer 3

This answer provides a solution that works in IE, Firefox, Opera, and Webkit.

Answer 4

It uses different styles for different browsers:

-moz-transform: rotate(270deg);
-moz-transform-origin: 25px 0px;

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

-webkit-transform: rotate(270deg);
-webkit-transform-origin: 25px 0px;

-o-transform: rotate(270deg);
-o-transform-origin: 25px 0px;