Wednesday, September 12, 2012

Text rotation using HTML/CSS

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

Sample Text

It is very simple and straight forward. We can use CSS to achieve that, the only issue we have to consider is compatibility.


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

<div class="VerticalText">Sample 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">
.VerticalText {
color: green;
filter: flipv fliph;
-o-transform: rotate(270deg);
width:60px; font-family: calibri;

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.

Happy coding…

No comments:

Post a Comment