Vertical Text with CSS

First of all, I wish you a very happy new year, a year that brings a lot of happy moments to your life and makes you prosperous in all respects.

For the first post of new year, I will discuss on how to create vertical text with CSS (the post doesn’t necessarily discuss something new like a new year ! ) that works in all browsers including IE6.  You might have seen the solution to this problem in terms of images or even javascript  but let’s see how we can achieve the same effect with just CSS or CSS2. Before we move any further, you might want to check out the simple demo first:

Demo 1: Vertical Text With CSS

After seeing the demo above, you might have already guessed the trick. Anyways, the trick is that you should apply a width of 1em and text-transform set to uppercase to the element you want to make the text of vertical something like this:

 width:1em;
 text-transform:uppercase;
 

There is one more step. The text that you want to appear vertically should be separated by an space or more specifically each letter should be separated by an space character, that is exactly where a width of 1em plays. Here is an example:

H E L L O

Now you might have seen the vertical text often on blogs posts (or other places) where the date information is shown vertically. I have also created a demo page you can check out:

Demo 2: Vertical Text With CSS

So that is all there is to creating vertical text with CSS. I hope you came to know about something useful.

About these ads

7 thoughts on “Vertical Text with CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s