rotated text using css

see http://erraticdev.blogspot.com/2011/08/cross-browser-vertical-text.html

by hrabinowitz

HTML

Some text before
<div class="container">
    <div class="head">
        <div class="vert">Vertical text example</div>
    </div>
    <div class="head">
        <div class="vert">Vertical text example</div>
    </div>
</div>
Some text after

CSS

.container
    {
        /* this will give container dimension, because floated child nodes don't give any */
        /* if your child nodes are inline-blocked, then you don't have to set it */
        overflow: auto;
        height:200px;
    }

    .container .head
    {
        /* float your elements or inline-block them to display side by side */
        /*float: left;*/
        display: inline-block;
        /* these are height and width dimensions of your header */
        height: 8em;
        width: 1.5em;
        /* set to hidden so when there's too much vertical text it will be clipped. */
        overflow: hidden;
        /* these are not relevant and are here to better see the elements */
        background: beige;
        margin: 1px;
        outline: 1px solid black;
    }

    .container .head .vert
    {
        /* line height should be equal to header width so text will be middle aligned */
        line-height: 1.5em;   
        /* setting background may yield better results in IE text clear type rendering */
        /*background: #eee;*/
        background: blue;
        /*display: block;*/
        /* this will prevent it from wrapping too much text */
        white-space: nowrap;
        /* so it stays off the edge */
        padding-left: 3px;
        /* IE specific rotation code */      
        writing-mode: tb-rl;       
        filter: flipv fliph;
        /* CSS3 specific totation code */
        /* translate should have the same negative dimension as head height */       
        transform: rotate(270deg) translate(-10em,0);      
        transform-origin: 0 0;
        -moz-transform: rotate(270deg) translate(-10em,0);
        -moz-transform-origin: 0 0;
        -webkit-transform: rotate(270deg) translate(-10em,0);
        -webkit-transform-origin: 0 0;
    }