Cross browser headers with vertical rotated text

You've probably come across the problem of displaying these kind of tables:

• many columns
• header column at the top
• content cells display narrow data - flags (yes/no, true/false, y/n, on/off, finite states like yes/no/maybe etc.) or just icons that denote some sort of state as in feature list tables where each cell displays either a check-mark or nothing or green and empty cirles or similar...
• header cells contain much wider data than content cells - more words that take much valuable horizontal space

If you had to display these kind of tables you've probably been thinking how could you make header cells narrower but not clip their content so headers still make sense... The idea is to display header cells as tall cells with vertically displayed text so columns can stay narrow as their content cells need. This way our tables get horizontally usable and don't take much space. It's true that header row becomes higher (depending on the amount fo text that you'd like to display, but hey there's just one header row in the whole table.

Anyway. So if you did struggle with this and also wanted it to display approximately the same on all three major nowadays browsers than you did spend some time solving it. If you didn't but you think you may in the future, then just use the code I'll provide here and off you go.

Why is it such a problem?

As always the main problem lies in the fact that Internet Explorer has to work completely differently compared to other browsers. Even though developers ranted about this fact for years Microsoft never really managed to completely catch up to specification or competition. It's kind of like the Achilles and the tortoise paradox really but unfortunately in reality they really seem to always stay behind. The same is still true with their latest version 9 (latest as of August 2011). Their CSS3 support is still missing. They should at least implement what competition did, because no browser is perfect. But it's still better to be as good as your competition than worse. Because in the end you'll just be worse.

Why is rotation not enough?

CSS3 defines transform property which is nicely supported in Mozilla (Firefox) and Webkit (Chrome and Safari) browsers. You can set transform rotation and your element will render rotated as you desire. But that is not just as simple as you may think it is. No. Element's space will still be determined as if it wasn't rotated at all so it will seemingly still take just one line height (or 1em). If you're rotating more than 1em wide amount of text your rotated element will be rendered above your other content. That's why it's best to contain your rotated element within another container that is sized in the correct (vertical) dimensions. So it will be height as much as you need it to be and wide 1em (or more if you need it to be wider). Visually your rotated element will take just as much space as it needs because it's container sets its dimensions so other content will correctly flow around as per definition.

But there's more problems with Internet Explorer that doesn't work as nicely as other browsers. IE version 9 supports CSS3 transforms all right, but I'm not as lucky with my users so I have to support version 8 as well. Hence I rather provide a solution for IE that works equally well in both versions than a separate solution for each. That's why I have to resort to filters for IE.

Resulting HTML and stylesheet

Let's write a simple example that we can reuse whenever we need to display vertical text in your markup. This is our HTML with two vertical headers and some text before and after:

   1:  Some text before

   2:  <div class="container">

   3:      <div class="head">

   4:          <div class="vert">Vertical text example</div>

   5:      </div>

   6:      <div class="head">

   7:          <div class="vert">Vertical text example</div>

   8:      </div>

   9:  </div>

  10:  Some text after

CSS settings have to be this way (I've put extensinve comments inside so you will now what to change to suit your needs):

   1:  .container

   2:  {

   3:      /* this will give container dimension, because floated child nodes don't give any */

   4:      /* if your child nodes are inline-blocked, then you don't have to set it */

   5:      overflow: auto;

   6:  }

   7:      .container .head

   8:      {

   9:          /* float your elements or inline-block them to display side by side */

  10:          float: left;

  11:          /* these are height and width dimensions of your header */

  12:          height: 10em;

  13:          width: 1.5em;

  14:          /* set to hidden so when there's too much vertical text it will be clipped. */

  15:          overflow: hidden;

  16:          

  17:          /* these are not relevant and are here to better see the elements */

  18:          background: #eee;

  19:          margin-right: 1px;

  20:      }

  21:          .container .head .vert

  22:          {

  23:              /* line height should be equal to header width so text will be middle aligned */

  24:              line-height: 1.5em;

  25:              /* setting background may yield better results in IE text clear type rendering */

  26:              background: #eee;

  27:              display: block;

  28:              

  29:              /* this will prevent it from wrapping too much text */

  30:              white-space: nowrap;

  31:              /* so it stays off the edge */

  32:              padding-left: 3px;

  33:   

  34:              /* IE specific rotation code */

  35:              writing-mode: tb-rl;

  36:              filter: flipv fliph;

  37:              

  38:              /* CSS3 specific totation code */

  39:              /* translate should have the same negative dimension as head height */

  40:              transform: rotate(270deg) translate(-10em,0);

  41:              transform-origin: 0 0;

  42:              -moz-transform: rotate(270deg) translate(-10em,0);

  43:              -moz-transform-origin: 0 0;

  44:              -webkit-transform: rotate(270deg) translate(-10em,0);

  45:              -webkit-transform-origin: 0 0;

  46:          }

Example based on upper code

Lets see how it works:

Vertical text

Vertical text

Reuse at your own will and please suggest better alternatives

It took me some time to make this a browser wide solution (that also works in IE8) but here it is. If you need it, just copy the code and do whatever you please with it. If you have any suggestion of how to do the same thing better and easier (and maybe even more browser wide) then please leave a comment so I'll learn new things.