Rotate text in IE8+ table |
Rotate text in IE8+ table |
Zwired1 |
Feb 4 2012, 01:51 AM
Post
#1
|
Group: Members Posts: 3 Joined: 4-February 12 Member No.: 16,395 |
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> |
Christian J |
Feb 4 2012, 12:20 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
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; } 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 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); } but it's still experimental, and I couldn't make the sizes behave. |
Zwired1 |
Feb 4 2012, 07:05 PM
Post
#3
|
Group: Members Posts: 3 Joined: 4-February 12 Member No.: 16,395 |
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?
This post has been edited by Zwired1: Feb 4 2012, 07:06 PM |
Christian J |
Feb 4 2012, 08:15 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
"text-align: right;" should work then.
|
Christian J |
Feb 5 2012, 10:18 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
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; } 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 |
Zwired1 |
Feb 6 2012, 01:06 AM
Post
#6
|
Group: Members Posts: 3 Joined: 4-February 12 Member No.: 16,395 |
Thank you. I think I'm set now.
|
Lo-Fi Version | Time is now: 19th April 2024 - 06:47 AM |