CODEWITHSUNDEEP
htmlcssalignmenttablelayout
greenoldman
greenoldman

Reputation: 21062

How to align rotated text in the table?

I found out how to rotate the text (thanks to SO) by 90°, the problem is the text is rendered vertically, but (I guess) the box is calculated horizontally (as before rotating).

I have table cell which contains such rotated text, and I would like to align the text at top of the cell. As the result I get something like this:

Text before rotation: 

rotated90

Text after rotation (please excuse my ASCII screenshot):

0
9
d
e
t
a
t
o
r

Rotated text aligned to top of the cell:

0
9
d
e
-----------
t
a
t
o
r

So part of the text is above the cell actually, which is bad.

Desired effect:

-----------
0
9
d
e
t
a
t
o
r

QUESTION: how to align text vertically, i.e. how to make browser see the box as after (not before) rotattion?

Upvotes: 4

Views: 570

Answers (1)

jrn.ak
jrn.ak

Reputation: 36619

It doesn't look like this is possible without specifying the height of the cell that the rotated text is in.

Webkit/Mozilla performs the rotation on the element's display, but not its box model.

The CSS3 property writing-mode works properly in IE, rotating the box model. This property should be supported by most browsers, but the article I read said it was only supported by IE at the time.

Upvotes: 1

Related Questions