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?).
The codeLet's start creating a simple div with a class ("vt" for our example):
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.
<div class="vt">Vertical Text</div>
Here is our final style:
For Internet Explorer we change the writing mode to top to bottom, right to left, then we flip it vertically and horizontally.
border:0px solid red;
filter: flipv fliph;
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.