CSS for Vertical Text

Hi folks,

The following code provides you with vertical text but it only works in IE.

<style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style>

<div class="verticaltext">Text Like So, ya know!</div>

HTML:

The output of the above code is:


Does anyone know if there is a method to do vertical text in Firefox/Opera/All other browsers?

 

"Visual Filters" only work in IE and thats it.

I suggest you use an image. If it needs to be text, try something like this http://www.cssplay.co.uk/menus/vertical.html . Not exactly lightweight though.

 

Vertical text is extremely hard to read, and not as good from usability standpoint.

 

CSS specification support vertical text, but all browsers except IE do not work with this. If you can, try to solve the problem via Javascript.

 

Another option: if you are using PHP take a look at GD library, it allows to generate graphic files. Vertical text shouldn't be hard to implement with GD -- you will just have to set rotation angle.