The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Rotate text in IE8+ table
Zwired1
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 4 2012, 12:20 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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;
}


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zwired1
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 4 2012, 08:15 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



"text-align: right;" should work then.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 5 2012, 10:18 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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;
}

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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zwired1
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 12:18 AM