Blogging Tips

CSS: Vertical text

Have you ever needed to create a vertical text? Something like:

It is very simple and straight forward. We can use CSS to achieve that, the only issue we have to consider is compatibility (ah! that is new, isn't it?).






Let's start creating a simple div with a class ("vt" for our example):


<div class="vt">Vertical Text</div>

As said, the problem is giving full compatibility with the rendered text. To do so, we need to treat Webkit, Mozilla, Opera and IE in different way. This time, Internet Explorer is the easiest: we will use the writing-mode and flip properties. For all other browsers, we are going to use transform with rotate.



Here is our final style:


<style  type="text/css">
.vt {
    color:red;
    border:0px solid red;
    writing-mode:tb-rl;
     filter: flipv fliph;
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    white-space:nowrap;
    width:20px;
    height:20px;
    font-size:24px;
    font-weight:bold;
}
</style>

For Internet Explorer we change the writing mode to top to bottom, right to left, then we flip it vertically and horizontally.

For Webkit, Mozilla and Opera, we use transform and rotate (270deg).

The result will work in Opera 10.5+, IE6+, FF and Webkit based browsers.



Enjoy!