none
Rotate text 90 degrees in an HTML table (IE8+ only)

    Question

  • need to rotate certain cells in an all-text table by 90 degrees in IE8+ only. Stacked characters or images won't work for my application.  I am sort of able to do what I need using a BasicImage filter but I can't make rhyme or reason about how the cell heights/widths work within the <td>.  The cell ends up clipping the text in weird ways and I try to adjust the heights and widths and get unpredictable results.   Here's my code:

    <table border=3>
     <tr >
      <td>  </td>

      <td class="rotation" style="height:100px; width:100px; font:20pt; background: gray; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);">
    text to rotate   </td>
     </tr>

     <tr >
      <td> not rotated </td>
      <td> not rotated </td>
     </tr>
    </table>

     

    I tried putting a <div> inside the <td> but I get a rectangular cell whenever the width is less than the length of the string (the cell width and height are both driven to fit the length of the string).

     

     

    Saturday, February 04, 2012 11:34 PM

Answers

  • If you are rotating elements just in IE8+, you'll still need a cross-browser approach. That's because the IE filters are deprecated as of IE9, with IE9 now supporting the CSS3 -ms-transform property. However, for IE8 and earlier, a filter such as BasicImage will be necessary to achieve the effect. So to cater for versions in current use, plus future variations, a prudent approach might be to feed the filter to IE8 and earlier through Conditional Comments, but otherwise use a transform set to cater for current browsers.

    The following example shows a couple of table headings rotated 90 degrees clockwise, but the cells underneath are displayed normally. It seems to work OK in IE7 to 9, and current versions of other browsers.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Test Rotating TH Headings 90deg</title>
    <style type="text/css">
    table      { width: 200px; margin: 30px auto;
                 border-collapse: collapse; }
    th, td     { border: 1px solid black; }
    .normal    { height: 20px; width: 100px;
                 font-size: 14px; }
    .rotation  { height: 100px; width: 100px;          
                 font-size: 16px;
                 background: gray; /* need a color for filter */
                 -moz-transform: rotate(90deg);
                 -webkit-transform: rotate(90deg);
                 -o-transform: rotate(90deg);
                 -ms-transform: rotate(90deg);
                 transform: rotate(90deg); }
    </style>
    <!--[if lte IE 8]>
    <style type="text/css">
    .rotation {
       -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)";
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    }
    </style>
    <![endif]-->
    </head>
    <body>
    
    <table>
      <caption>Vertical Headings</caption>
      <tbody>
        <tr>
          <th class="rotation">text to rotate</th>
          <th class="rotation">text to rotate</th>
        </tr>
        <tr>
          <td class="normal"> not rotated </td>
          <td class="normal"> not rotated </td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>
    

    Saturday, February 11, 2012 12:13 PM

All replies

  • Hi wired,

    learn about document type declarations here http://w3schools.com/doctype.asp

    please provide a link to your site as we need to know what DTD you are using (if any) and which x-ua meta data you are using (if any).

    this link

    http://css-tricks.com/snippets/css/text-rotation/

    shows how to implement a cross-browser solution.

    Note: a table cell is not the same as text. rotating a container does not rotate its contents.... I don't think so...

    there is no font-family called 20 (obviously you meant font-size). the font attribute is depreciated and should not be used.

    you can validate your markup at validator.w3.org

    you can validate your style rules at jigsaw.w3.org

     


    Rob^_^
    Sunday, February 05, 2012 3:12 AM
  • No idea what DTD or x-ua meta data is so ....

    I'm trying to create, one time, a spreadsheet-looking form for an office.  I'm creating it using text operations in LabVIEW, FWIW (long story).  Any rate, I need to (in LabVIEW) fill in the headers of the mostly-blank chart and then the users will fill in the rest by hand.  I'm printing from LabVIEW using IE without opening the IE window so the (LabVIEW program) user never sees the browser and I don't ever need to worry about other browser support. 

    I've seen the W3Schools and css-tricks sites but I'm clearly not an HTML/CSS programmer so I'm having trouble taking all of the bits of info and figuring out how to build a coherent page.

    Hadn't seen validator or jigsaw -- I'll try them out.  Thanks.

     

     

    Monday, February 06, 2012 6:21 AM
  • Monday, February 06, 2012 6:35 AM
  • I know how to use Labview, it's piecing together all of the disjointed bits of information I get about CSS and HTML that is the issue.  I find ways to rotate on CSS sites or by using BasicImage in HTML but exactly how to affect a single cell in a table is rather specific and not generally found in the general help sites. 
    Friday, February 10, 2012 4:38 PM
  • Hi,

    put your cell contents in a <p> or <span> element

    <td><p class="rotate">this is text not a html element I cant apply style rules to non html content</p></td>


    Rob^_^

    Friday, February 10, 2012 9:18 PM
  • If you are rotating elements just in IE8+, you'll still need a cross-browser approach. That's because the IE filters are deprecated as of IE9, with IE9 now supporting the CSS3 -ms-transform property. However, for IE8 and earlier, a filter such as BasicImage will be necessary to achieve the effect. So to cater for versions in current use, plus future variations, a prudent approach might be to feed the filter to IE8 and earlier through Conditional Comments, but otherwise use a transform set to cater for current browsers.

    The following example shows a couple of table headings rotated 90 degrees clockwise, but the cells underneath are displayed normally. It seems to work OK in IE7 to 9, and current versions of other browsers.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Test Rotating TH Headings 90deg</title>
    <style type="text/css">
    table      { width: 200px; margin: 30px auto;
                 border-collapse: collapse; }
    th, td     { border: 1px solid black; }
    .normal    { height: 20px; width: 100px;
                 font-size: 14px; }
    .rotation  { height: 100px; width: 100px;          
                 font-size: 16px;
                 background: gray; /* need a color for filter */
                 -moz-transform: rotate(90deg);
                 -webkit-transform: rotate(90deg);
                 -o-transform: rotate(90deg);
                 -ms-transform: rotate(90deg);
                 transform: rotate(90deg); }
    </style>
    <!--[if lte IE 8]>
    <style type="text/css">
    .rotation {
       -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)";
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    }
    </style>
    <![endif]-->
    </head>
    <body>
    
    <table>
      <caption>Vertical Headings</caption>
      <tbody>
        <tr>
          <th class="rotation">text to rotate</th>
          <th class="rotation">text to rotate</th>
        </tr>
        <tr>
          <td class="normal"> not rotated </td>
          <td class="normal"> not rotated </td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>
    

    Saturday, February 11, 2012 12:13 PM
  • Just a correction to that example (I couldn't get in to edit it for some reason) - the filter values for BasicImage rotation need to be 1, not 0. That's in the Conditional Comments:

    .rotation {
       -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }

    Sunday, February 12, 2012 12:45 AM