Click to See Complete Forum and Search --> : vertical text
redbeef88
12-13-2007, 08:49 PM
hey all,
at work at the moment- a design for a css table just came in that requires one column of tall, narrow cells to have the text inside typed vertically; that is, rotated anti-clockwise on a 90 degree angle so that the text types 'up' the cell.
is this possible?
Thanks in advance
ShaneRiley
12-13-2007, 09:26 PM
If you don't want to generate an image of the text, the only way to do it using CSS is in IE. Here's what you need for the IE only style
<h1 style="writing-mode: tb-rl"> or <h1 style="writing-mode: tb-rl; filter: FlipH FlipV;"> for the opposite direction
WebJoel
12-14-2007, 12:56 PM
A similar approach:
<style>
p#vert {margin:25px; padding:5px; width:10px; font-weight:bold; border:1px solid black; text-align:center;}
#vert span {display:block;}
</style>
....<body>
<p id="vert">
<span>V</span>
<span>E</span>
<span>R</span>
<span>T</span>
<span>I</span>
<span>C</span>
<span>A</span>
<span>L</span>
<span style="padding-top:23px;">T</span>
<span>E</span>
<span>X</span>
<span>T</span>
</p>
</body>....
redbeef88
12-16-2007, 06:37 PM
thx for the tips- i ended up using images, but both those methods worked well to some extent
cheers