17 January, 2011

Vertical text

I would keep this blog post short enough which explains a way to display text vertical on any browser.
So the problem which I tried to address is that I had to display some text vertically for some website project I did.
With HTML 5, CSS 3 this is no problem at all, but it has to look the same in IE as well.

Alright this is my HTML.

<span class="time"><span>January 17, 2011</span></span>

So for CSS3 supported browsers, (which are running on Gecko and Webkit) I used this.

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

For IE I had to use a separate CSS which is intentionally works to render text vertically, I could use the features
of filters. The BasicImage filter which is capable of rotating any DOM element which has a layout solved the issue.
This was my CSS for IE.

<!--[if IE ]>
<style type="text/css">
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
</style>
<![endif]-->

the rotation param works like 1,2,3 with respective to 90, 180, 270 degrees.

This solved my problem.

5 comments:

Kishantha Nanayakkara said...

Good stuff Nivanka. Keep it up.

Nadine86 said...

hey hi thank u for the date code!!!great work i love to have some html tips to work on my blogg. xoxoxo

Nadine86 said...

hey hi thank u for the code for the dates it totaly works thxxx

Nivanka said...

Hi nadine

Good to know you liked it, cheers. Will be able yo give you some heads up on HTML, email pls.

sathya said...

Great article.Great content.It is very informative.It is helpful to me.please update it .Thanks for sharing.Hire web developers