Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Rotate text in IE8+ table

Posted by: Zwired1 Feb 4 2012, 01:51 AM

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>

Posted by: Christian J Feb 4 2012, 12:20 PM

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 http://dev.w3.org/csswg/css3-writing-modes/#writing-mode 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;
}


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>


To make it rotate in other browsers too you might try the http://www.w3.org/TR/css3-2d-transforms/ 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);
}

but it's still experimental, and I couldn't make the sizes behave.

Posted by: Zwired1 Feb 4 2012, 07:05 PM

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?

Posted by: Christian J Feb 4 2012, 08:15 PM

"text-align: right;" should work then.

Posted by: Christian J Feb 5 2012, 10:18 PM

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 http://dev.w3.org/csswg/css3-writing-modes/#writing-mode 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;
}

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


Posted by: Zwired1 Feb 6 2012, 01:06 AM

Thank you. I think I'm set now.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)