writing-mode: tb-rl broken in IE8

Vertical text in a web page can be pretty damn handy. I’ve used it in our documenter for Metastorm BPM procedures where we have some grids with columns which would become too wide if the column headers used horizontal text. OK, it only ever worked in Internet Explorer, but given the add-on is for an application that only runs in IE on Windows, I wasn’t too concerned by that.

Now, along comes IE8 and vertical text no longer works properly. Grids are incorrectly sized when they contain vertical text. Try this in a HTML page.

  what the...
  <table border="2px">
    <tr>
      <td style="writing-mode:tb-rl">Some text</td>
      <td style="writing-mode:tb-rl">Some more text</td>
    </tr>
  </table>
  .. is going on in that grid?

And this is what that will look like (obviously view in IE8 to see the problem)

what the...

Some text

Some more text

.. is going on in that grid?

Which is disappointing… Ah but you’re not here to see the problem are you? You want to know how to solve it I guess. The only solution I’ve found is to add the following to your head element, which forces IE8 to render the page in IE7 emulation, which means you miss out on all the new rendering goodness in IE8.

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Update – You’ll probably need to manually force IE to switch to IE8 standards mode to see the problem, seems that MS has decided BlogSpot sites are not ready for IE8, so this is running in compatibility mode.