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....
now i could quite easily achieve this using:
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
