Question

I’m trying to layout a control that requires a text label to be rotated 270 degrees. The width of the text label is variable, within reason (say, 100px to 500px).

I have tried to get this working in a jsFiddle

http://jsfiddle.net/ericjohannsen/LhjNq/3/

but have run into a few problems I can’t resolve:

1. Text in the non-rotated area (yellow and orange in the jsFiddle) is displaced to the right by the length of the text that is rotated.
2. The rotated text extends far below the bottom of the associated non-rotated area, overwriting other parts of the page.
3. In order to keep the label on the screen, I had to apply a translate transform with values hard-coded based on the length of the rotated text.

Is it possible to solve these problems using CSS transformations?

UPDATE

This jsFiddle makes problem 2. more apparent

http://jsfiddle.net/ericjohannsen/LhjNq/47/

Answer 1

I ended up solving this problem using SVG generated by a little jQuery wrapper called mbFlipText to manage IE support

http://jsfiddle.net/ericjohannsen/cgtu5/7/