Page 1 of 1

CSS vertical text

Posted: Wed Dec 21, 2005 4:21 pm
by malcolmboston
simple question, how can you get vertical text using CSS, im pretty sure ive done this before but i cant seem to find any documentation on such a function and from what i've searched they're only cheap hacks

basically i want the output like so....

Code: Select all

L
O
G
I
N
now i could quite easily achieve this using:

Code: Select all

L<br>
O<br>
G<br>
I<br>
N
but thats pretty lame, does anyone know a fully cross-browser method of accomplishing this....

Posted: Wed Dec 21, 2005 4:38 pm
by John Cartwright
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}

This is the closest thing I could find. This will actually rotate the actual chacters aswell.
Unfortunantly this is IE only, I believe.

Posted: Wed Dec 21, 2005 4:44 pm
by malcolmboston
hmmm, so, in hindsight of that what would you do if you had to display vertical text...

1. the <br> method
2. the IE only method
3. use images

Posted: Wed Dec 21, 2005 6:28 pm
by John Cartwright
Greatly depends on the situation..

Of course the simplest scenario is to simply use the <br />'s.. which isn't really bad at all. You could even just wrap each character inside a div if your worried about making it look nicer ;). More likely than not I'd go with the easiest solution, especially on a simple problem such as this.

You could perhaps look into the generation of images on the fly in combination with caching, which isn't ideal but pretty effective.

Posted: Wed Dec 21, 2005 6:56 pm
by Chris Corbyn
We're using images at work (using a dead simple GD script). Something like the direction the text goes in being different on different browsers wouldn't satisfy me.

I wish I knew of a way to do real vertical text in other browsers since I really need it for my graph class :(

Posted: Wed Dec 21, 2005 7:04 pm
by Gambler

Code: Select all

<div style="width:0px;">
t e x t
</div>

Posted: Wed Dec 21, 2005 7:10 pm
by Chris Corbyn
Gambler wrote:

Code: Select all

<div style="width:0px;">
t e x t
</div>
You'll probably need overflow: visible for that to work in all browsers but that's a very clean and clever idea. Beats using <br /> any day. Good thinking ;)

Posted: Fri Dec 23, 2005 11:51 pm
by n00b Saibot
d11wtq wrote:
Gambler wrote:

Code: Select all

<div style="width:0px;">
t e x t
</div>
You'll probably need overflow: visible for that to work in all browsers but that's a very clean and clever idea. Beats using <br /> any day. Good thinking ;)
That was what came to my mind as soon as I read the OP, honest :)

Posted: Sat Dec 24, 2005 12:19 pm
by Chris Corbyn
n00b Saibot wrote:
d11wtq wrote:
Gambler wrote:

Code: Select all

<div style="width:0px;">
t e x t
</div>
You'll probably need overflow: visible for that to work in all browsers but that's a very clean and clever idea. Beats using <br /> any day. Good thinking ;)
That was what came to my mind as soon as I read the OP, honest :)
/me pats n00b on the back :wink: