Vertical Text with CSS

I’m working on a new JQuery Plugin that requires the text to be vertical. This can easily be accomplished using CSS, but I found that the vertical text may appear differently in each browser depending upon the element that is used. I was able to display the text vertically in Firefox, IE8 (and IE7), Google Chrome and Safari. I looked at Opera’s CSS support and it doesn’t appear to support vertical text.

To display vertical text:

#right-col {
	background-color:#000;
	color:#ff6600;
	width:390px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	writing-mode: tb-rl;
}
<div id="right-col">FeedBack</div>

-webkit-transform is supported by Webkit-based browsers such as Safari and Google Chrome.

-moz-transform is supported by Mozilla (Gecko)-based browsers such as Firefox.

writing-mode is supported by Internet Explorer (8, 7, not sure about 6). Can also be written as:

-ms-writing-mode: tb-rl;

writing-mode is a W3C draft specification, -ms-writing-mode is an Internet Explorer specific CSS attribute.

The Writing Mode CSS attribute was initially designed for right-to-left languages, so the vertical text rotation is 90 degrees. In order for the text to appear with a -90 degree like the Mozilla and Webkit transforms:

#right-col {
	background-color:#000;
	color:#ff6600;
	width:390px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	writing-mode: tb-rl;
        filter: flipv fliph;
}

Keep in mind that the entire container will be rotated, not just the text. But when you attempt to use CSS to create vertical text on an element within a container, the placement of the text in Firefox, Safari, and Google Chrome is not where you think it would be.

#right-col {
	background-color:#000;
	color:#ff6600;
	width:390px;
}
 
#right-col p {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	writing-mode: tb-rl;
        filter: flipv fliph;
}

The height of the container (#right-col) will not increase to accommodate the new position of the P element. And the P element is displayed below the container, vertically centered. So,

<div id="right-col"><p>FeedBack</p></div>

Will be displayed as:

Vertical Text

I made several attempts to correct the placement of the element, but was unable. It is easier to just apply the CSS vertical text attributes on the container.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks