how to tilt text on table headers with JavaScript?

Question

Somewhat often I have to build tables and assign to the table headers names that cannot be reduced to represent a significant value (i.e. wave solder station where "WSS" wouldn't work) and it's value is a number. The order of greatness of these numbers almost never go above hundreds. They might very seldom reach thousands, but never tenths of thousands or greater. So, the tables may get very weird looking.

I was wondering if there's any JavaScript implementation that would tilt a given text 90º counter clockwise so the header table cell would be higher instead of wider.

I'm pretty sure I could generate an image with the text and then insert it as the table header's value.

Can it be done on a jsp dinamically?

Answer 1

Rotating text can be done with an image (maybe dynamically painted on a <canvas>), or with the CSS3 transform attribute. Pictures can't contain selectable text, yet they are the only possibility to rotate in (older) browsers that don't support 2D-transforms.