I need to rotate certain cells in an all-text table by 90 degrees in IE8+ only. Stacked non-rotated characters or images won't work for my application. I am sort of able to do what I need using a BasicImage filter but the cell ends up square, as if the width is set by the unrotated text and then the height is set by the rotated text. I need to set the height and width of the cell independently. Here's my code:
<table border="3" WIDTH="300">
<tr>
<td></td>
<td>
<div STYLE= "height:1; background: gray; filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);">
Header number 1. </div>
</td>
<td>
<div STYLE= "filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3); height:1; background: gray;">
Header 2. </div>
</td>
</tr>
<tr>
<td >text</td>
<td >text</td>
<td >text</td>
</tr>
</table>
Full Version: Rotate text in IE8+ table
QUOTE(Zwired1 @ Feb 4 2012, 07:51 AM) 
I need to rotate certain cells in an all-text table by 90 degrees in IE8+ only.
Here's a simple way:
CODE
div {writing-mode: tb-lr;}
Unfortunately the text goes from top to bottom, which may not be what you want.
The "writing-mode" property was part of CSS2, then it was removed from CSS2.1 only to reappear in this CSS3 draft but with different values. Perhaps something like this will keep working in future browsers (not only MSIE):
CODE
div {
writing-mode: tb-lr;
writing-mode: vertical-lr;
}
writing-mode: tb-lr;
writing-mode: vertical-lr;
}
QUOTE
I am sort of able to do what I need using a BasicImage filter but the cell ends up square, as if the width is set by the unrotated text and then the height is set by the rotated text.
This seems to work (just barely):
CODE
<style type="text/css">
#a, #b {
width: 1.5em;
height: 10em;
position: relative;
}
#a div, #b div {
position: absolute;
top: 0;
left: 0;
height: 1.5em;
width: 10em;
background: gray;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<table border="3">
<tr>
<td></td>
<td id="a"><div>Header number 1. </div></td>
<td id="b"><div>Header 2. </div></td>
</tr>
<tr>
<td >text</td>
<td >text</td>
<td >text</td>
</tr>
</table>
#a, #b {
width: 1.5em;
height: 10em;
position: relative;
}
#a div, #b div {
position: absolute;
top: 0;
left: 0;
height: 1.5em;
width: 10em;
background: gray;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<table border="3">
<tr>
<td></td>
<td id="a"><div>Header number 1. </div></td>
<td id="b"><div>Header 2. </div></td>
</tr>
<tr>
<td >text</td>
<td >text</td>
<td >text</td>
</tr>
</table>
To make it rotate in other browsers too you might try the CSS3 transform property:
CODE
#a, #b {
height: 10em;
}
#a div, #b div {
height: 1.5em;
width: 10em;
background: gray;
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
-ms-transform:rotate(270deg);
transform:rotate(270deg);
}
height: 10em;
}
#a div, #b div {
height: 1.5em;
width: 10em;
background: gray;
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
-ms-transform:rotate(270deg);
transform:rotate(270deg);
}
but it's still experimental, and I couldn't make the sizes behave.
Thanks, I think I can make the "just barely" code do what I need. As a bonus question, is there an easy way to achieve bottom-justified with rotation=1?
"text-align: right;" should work then.
QUOTE(Christian J @ Feb 4 2012, 06:20 PM)
Here's a simple way:
CODE
div {writing-mode: tb-lr;}
Actually it would be better to remove the DIV and style the table cells directly.
QUOTE
The "writing-mode" property was part of CSS2, then it was removed from CSS2.1 only to reappear in this CSS3 draft but with different values. Perhaps something like this will keep working in future browsers (not only MSIE):
CODE
div {
writing-mode: tb-lr;
writing-mode: vertical-lr;
}
writing-mode: tb-lr;
writing-mode: vertical-lr;
}
Seems MSIE also supports a -ms-writing-mode extension, which should be a better choice for MSIE than writing-mode at this time. It also offers more possible values, see http://msdn.microsoft.com/en-us/library/ms535153.aspx
Thank you. I think I'm set now.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.