giovedì, settembre 09, 2010

CSS Text Rotation + HTML Tables = Blech

I was attempting to rotate table header text with CSS transforms and ran across a few interesting pages. First, I ended up not actually doing it because of the reason eloquently described here (from Stack Overflow)

“Crucially, transforming an element doesn't change how its content size is calculated (or how its parent's layout is affected by that size). CSS's algorithms for vertical and horizontal sizing are different and difficult enough to get right to being with; there's no real consistent way they could accommodate content with arbitrary rotation. So ‘transform’ is like using ‘position: relative’: it changes where the content is rendered, but not anything to do with layout size.”

However, for text rotation tips in general, there is a great tutorial at snook.ca that illustrates how to do text rotation with CSS:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);    
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);