CSS Vertical Text

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

This entry was posted on Monday, March 1st, 2010 at 2:18 am and is filed under CSS, Tech. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.