Vertical Text In Firefox

Question

I want to have a vertical text (going from top to bottom instead of from left to right). I used:

.vertical {
    writing-mode: tb-rl;
}

But that doesn't work in Firefox. Is there any cross-browser compatible way to achieve vertical text?

Answer 1

Maybe this will help for the firefox case: http://bytes.com/topic/javascript/answers/721811-solution-display-text-rotated-90-vertically-firefox-css

Answer 2

check this article: cssplay.co.uk/menus/vertical.html

Answer 3

This is a MSIE proprietary CSS3 property. It will take a long time (maybe never) that the w3c will adopt it in the standard so that other browsers will follow. Best solution as far may be to use Flash. There are tools for that: sIFR and swfIR. Alternatives are Javascript and/or images.

I however question the value of vertical text in usability context.

Answer 4

Put each line in its own div and insert a <br> element between each character.

Answer 5

There was a very similar question not long ago with a possible solution.

Answer 6

You can do it in css only, take a look at my answer to this very similar question.