Wednesday, 7 September 2011

CSS: Vertical text

   


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








Vertical Text


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 code
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!

4 comments:

  1. Doesn't work (correctly) in IE though - text is flipped 90 degrees (runs from top left to bottom)

    ReplyDelete
  2. nice and best solution....thank you for this text sharing

    ReplyDelete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.