CSS: Place vertical text

For a html report I needed the Excel functionality to put text vertical. I didn't know that this was possible but it is.
Put the following code in your page (style in the style section of the head or style sheet of course).

[code:html]

.verticalTextBottomTop {
writing-mode: tb-rl;
filter: flipv fliph;
}
 
.verticalTextTopBottom {
writing-mode: tb-rl;
filter: fliph fliph;
}

<div class="verticalTextBottomTop" style="height: 200px;">Text verticalTextBottomTop</div>
<div class="verticalTextTopBottom" style="height: 200px;">Text verticalTextBottomTop</div>

[/code] 

To prevent word wrap you need to set the height property of the container.

And you get the following output.

IE7

FireFox

 

So as you can see It doesn't work for firefox. I can use it because my project is running under a controlled environment, where all users can only use IE.

Leave a Reply

Your email address will not be published.