CSS Vertical Text

Share Button

Many people have written about the potential for vertical text in CSS so I wanted to try it out for myself. By using the technique described below I was able to achieve this effect:

*Disclaimer: This doesn’t work in old Opera versions, but does work in Opera 10.5. This also works in IE6+, FF, and Webkit based browsers, so that is pretty encompassing.

Here is the basic markup:

<p>CSS Vertical Text</p>

I wanted to try to do my best to exclude IE browser checks and conditional checks. So this example handles all browsers mentioned previously with a single CSS block:


p.css-vertical-text {
	color:#333;
	border:0px solid red;
	writing-mode:tb-rl;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	white-space:nowrap;
	display:block;
	bottom:0;
	width:20px;
	height:20px;
	font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
	font-size:24px;
	font-weight:normal;
	text-shadow: 0px 0px 1px #333;
}

Also, if I can stay away from IE filters I like too, but it’s worth mentioning that if you have an specific rotation, you have to use the IE filter:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Where 0, 1, 2, 3 correlate to 0, 90, 180, and 270 respectively.

So I tried to keep this one simple, but lining everything up in different browsers can be a pain because of the way each browser interprets the spacing.

Information for this post was pulled from the following places:

http://www.thecssninja.com/css/real-text-rotation-with-css

http://snook.ca/archives/html_and_css/css-text-rotation

Share Button

32 thoughts on “CSS Vertical Text”

  2. PSD to WordPress

    I just wanted to say THANK YOU for this! I have been looking for something like this for a very long time and other solutions I have found work but are very limited.

    This worked like a charm the first time around and with a little playing around with the CSS I got it to do just exactly what I wanted.

    Once again thank you very much.

  5. admin

    Yes that’s true, FireFox 3.0, which makes up <1% of traffic this will not work on. Sometimes you just have to move forward though :-)

  13. Pingback: benjamin.ramey » Vertical text with CSS

  14. Pascal

    I got Firefox 3.0.19 on Mac OS X 10.5.8 and it doenst work. My Safari can show the effect but Firefox cant.

    1. Scott Gale

      Pascal, there were certain older versions of FireFox where this technique does not work, but I choose to look forward as those are very small traffic segments. Thanks for mentioning the specifics.

  15. Marti

    Is there some way to convince such vertical text to NOT be as wide as it is long? I’m trying to make table header cells have vertical text, and quite apart from the atrocious things it does to the borders, Firefox is totally ignoring any width settings.

  19. Pingback: Vertical Text in HTML – Creating dynamic vertical text images in webpages » Technology Articles - Technology And Programming Articles

  20. Pingback: CSS Vertical Text | ScottGale.com | Pixarea

  21. Daniel

    Wow !! Great stuff. Cant’ wait to use it. I wished to be able to get vertical text for years, and today I find your technique :)
    Thanks !

  22. chitra

    can u give a work around for vertical text align that it should work in firefox version2 series. thanks.

  24. Dulion

    Thanx so much man, I’m 2 months bothering with this problem.

    I tried to use Flash to do it (worked) only when printing the page nothing showed up.

    Now it works in IE8 and Firefox 3.6.8 and gives the prpriate results when printing the page!

    Not tested in Chrome/ safari and Opera

  26. Pingback: Questions from class, Friday | Introduction to Web Design and Implementation

  28. Theraisa K

    Is there a way to position the rotated text? Like, lets say I wanted it to appear at a set distance from the left (say 10px) and top (say 250px) on my page?

Comments are closed.