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).


.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>


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

And you get the following output.




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. Required fields are marked *