Read more

How to use CSS to rotate text by 90° in IE8 (and modern IEs)

Arne Hartherz
March 28, 2015Software engineer at makandra GmbH

Microsoft does not support IE8 anymore, and neither do we.

If you want to rotate text, you can use CSS transforms in somewhat modern browsers to rotate the container element.
However, if you need to support IE8, transform is unavailable (if need only IE9 support, ignore the following and use -ms-transform).

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

Here is a solution that worked for me:

<div class="my-element">Hi!</div>

^

.my-element {
  display: inline-block;
  transform: rotate(90deg);
  -ms-writing-mode: tb-rl;
  -ms-transform: none;
}

This way, browsers will use CSS transforms when available -- which is on basically all but IE. [1]

To achieve a rotation on IE8 and IE9, we can use writing-mode. Since other browsers understand that as well, we use the vendor-prefixed -ms-writing-mode to target only IE.

However, IEs that do support transform (IE10+) would combine both styles into a 180° rotation which we do not want.
So we reset our transform definition for IEs -- and only them -- by using the -ms- prefix again. That way, IEs will always use -ms-writing-mode.

There is a jsFiddle demo Show archive.org snapshot if you want to see it in action.


[1] You may want to use autoprefixer Show archive.org snapshot to fill in vendor prefixes automatically.

Posted by Arne Hartherz to makandra dev (2015-03-28 10:05)