Vertical (rotated) text in HTML table

Question

Is there a (portable) way to rotate text in a HTML table cell by 90°?

(I have a table with many columns and much text for the headings, so I'd like to write it vertically to save space.)

Answer 1

Unfortunately not, the closest you are going to get is rendering it in a Canvas, but I suspect that is not exactly as portable as your would like.

Answer 2

I'm afraid you're going to run into even more limitations, and an even more bleak response range, with a table than this person did in asking his similar question:

Vertical Elements in a Div

Answer 3

There is no easy way to accomplish this. This blog article describes a method that uses CSS, but which only works in IE, but it also proposes a workaround using SVG for other browsers. Perhaps you can use this in your application?

Answer 4

Alternate Solution?

Instead of rotating the text, would it work to have it written "top to bottom?"

Like this:

S  
O  
M  
E  

T  
E  
X  
T

I think that would be a lot easier - you can pick a string of text apart and insert a line break after each character.

This could be done via JavaScript or server-side - the latter would be accessible in mobile browsers. (I assume that's what you mean by "portable?")

Also the user doesn't have to turn his/her head sideways to read it. :)

Update

This thread is about doing this with jQuery.

Answer 5

IE filters plus CSS transforms (Safari and Firefox).

IE's support is the oldest, Safari has [at least some?] support in 3.1.2, and Firefox won't have support until 3.1.

Alternatively, I would recommend a mix of Canvas/VML or SVG/VML. (Canvas has wider support.)

Answer 6

Server-Side image creation?

You could use a server script to create an image of the rotated text and display that.

Answer 7

you can use sIFR to make it work. http://wiki.novemberborn.net/sifr3/

Answer 8

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}

Taken from http://css3please.com/