Display text vertically

Question

Is there a way to display text vertically without using CSS3 and will be supported by most browsers. Currently I use image instead, but need to change to actual text.

Perhaps a combo of CSS and jQuery?

Answer 1

My first answer would be

.element {
   -moz-transform: rotate(90deg);
   -webkit-transform: rotate(90deg) ;
   -o-transform: rotate(90deg) ;
   -ms-transform: rotate(90deg) ;
   transform: rotate(90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

but you said you want to avoid css3 (A not so wise choice, in my opinion, as it would do the job well, fast, efficient and if done right across all major browsers down to IE 7... this code should do the trick)

If you really insist on javascript there's jangle ( https://github.com/corydorning/jangle ), with which you can do stuff like

 <script>
   $('.element').jangle(90);
 </script>

Ideally I would recommend doing the css3 trick, and then as a fallback using jangle. you can use http://www.modernizr.com/ for detecting the browser's ability to rotate both in CSS (through a class on the html tag) and in JavaScript.

You can even do the same for animations: CSS 2d transformation + animation if aviable, and if not, fallback to jangle.

Edit to show how selectors work:

.element is just an Example, clearly you can place any valid CSS selector, for example:

 .class {
     background-color: red;
 }
 #ID {
     background-color: green;
 }
 p {
     background-color: blue;
     color:white;
 }

 #ID .class {
     background-color: yellow;
 }

 #ID p.class {
     background-color: grey;
 }

would match elements in

<div id="ID">
    <p class="class">
        Text in a "p" with class "class" inside id "ID"
    </p>
    <p>
        Text in a "p" inside id "ID"
    </p>
    <div class="class">
        Text with class "class" inside id "ID"
    </div>
    Text inside id "ID"
</div>
<p class="class">
   Text in a "p" with class "class"
</p>
<div class="class">
   Text class "class"
</div>
<p>
   Text in a "p" 
</p>

You can see how this looks here: http://jsfiddle.net/ramsesoriginal/nXqJ2/

Answer 2

Here's how to do it:

Vertical text is accomplished easily these days with CSS transforms:

.vertical-text {    
    transform: rotate(90deg);
    transform-origin: left top 0;
}

Depending on which direction you'd like the text to display vertically, the rotation will be different, but it's that rotate value which will make the text vertical. Here's a helpful tip:

.vertical-text {

    float: left;
}

Floating the element will essentially emulate an auto width!

Answer 3

I think you can use this: http://www.w3schools.com/css3/css3_2dtransforms.asp If you put the text in a div.