Vertical text in IE7, IE8, IE9, and IE10 with CSS only

Question

Does anyone know how to successfully implement vertical text in IE7, IE8, IE9, and IE10 with CSS only? (by vertical text, I\'m referring to text being rotated counterclockwise

Answer 1

Having the same problem, but with additional bad readability of the rotated text, I would advice not to use the:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

for IE9 or IE 8.

That's, what worked for me:

p.css-vertical-text {
    color:#333;
    border:0px solid red;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:24px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
}

from http://scottgale.com/css-vertical-text/2010/03/01/