CSS vertical text

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

CSS vertical text

Post 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....
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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.
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 :(
Gambler
Forum Contributor
Posts: 246
Joined: Thu Dec 08, 2005 7:10 pm

Post by Gambler »

Code: Select all

<div style="width:0px;">
t e x t
</div>
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 ;)
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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 :)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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:
Post Reply