makes text display vertically in browsers

v-test.html

<div class="container">
    <div class="rotated-text">
        <span class="rotated-text__inner">Normal</span>
    </div>
</div>

vertical-text.css

/** 
* Works everywere ( IE7+, FF, Chrome, Safari, Opera )
* Example: http://jsfiddle.net/MTyFP/66/embedded/result/ 
*/

.rotated-text {
    display: inline-block;
    overflow: hidden;
    width: 1.5em;
}
.rotated-text__inner {
    display: inline-block;
    white-space: nowrap;
    -webkit-transform: translate(50%,0) rotate(90deg);
       -moz-transform: translate(50%,0) rotate(90deg);
         -o-transform: translate(50%,0) rotate(90deg);
            transform: translate(50%,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
   /* IE 9+ */
   -ms-transform: none;
   -ms-transform-origin: none;
   /* IE 8+ */
   -ms-writing-mode: tb-rl;
   /* IE7 and below */
   *writing-mode: tb-rl; 
}
/* This element stretches the parent to be square
   by using the mechanics of vertical margins  */
.rotated-text__inner:before {
    content: "";
    float: left;
    margin-top: 100%;
}