Vertical Text?? 2

colep · May 12, 2003

Is there any way to have text displayed vertically (instead of writing left to right, it would write bottom to top) on a page through style sheets or tabling?? I am trying to recreate an excel spreadsheet online. I'm not sure that this can be done, so I'm asking the experts!!!

Thanks for your help in advance,
Cole

grtfercho · May 12, 2003

check this thread..
thread215-537169

grtfercho çB^]\..

Boomerang · May 13, 2003

Try this:

<html>
<head>
<style>
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td><div class="verticaltext">This is Vertical Text</div></td>
<td><div class="verticaltext">This is another Vertical Text</div></td>
<td>This is NOT Vertical Text</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>

Hope this helps,
Erik

<-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->

colep · May 14, 2003

Thanks for the help guys!!!!! Now if only this would work in all browsers!!!

Cole

cian · May 16, 2003

It does, you just need to define "all browsers=IE"

http://www.endamcg.com

http://www.endamcg.com/finland-gaa/

http://www.endamcg.com/macaonghusa/

colep · May 16, 2003

cian,
Could you elaborate on that a little more??? I've never heard of it... is that a javascript thing???

thanks much,
Cole

grtfercho · May 16, 2003

don't get confused colep.
see the smiley at the end on the previous reply.? that's nothing but a joke, if a command like that actually existed the world would be a happier place.

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein

judgementday · Sep 4, 2003

I got the vertical text to work one a web page. Then I found that when I printed it out it would be inverted on an inkjet and not there at all on a laser printer. By using another flipv I got it to print correctly BUT NOT ALWAYS. About a 3rd of the time it does something like this: It makes "WORD WORD" look like "RDWORD WO". Some strings of text come out, and others don't. I haven't been able to figure out what they have in common. Anyone have a clue.
Thanks
judgementday

dolphyn · Sep 9, 2003

Hi
Another way to get vertical text is by embedding a table within a table cell. This works fine in IE5.5 and Mozilla. It really is just basic HTML so it should work in any browser.

i.e.
...
<TD> 

<table> 
<tr><td>W</td></tr>
<tr><td>O</td></tr>
<tr><td>R</td></tr>
<tr><td>D</td></tr>
</table>

</TD> 

dolphyn

Wullie · Sep 9, 2003

dolphyn,

That only displays the text but doesn't actually rotate it.

The way you have it above would just as easily be recreated by using line breaks between the letters.

Hope this helps

Wullie

http://www.necomputers.org.uk

http://www.freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.whiland.co.uk

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell

EdwardMartinIII · Sep 9, 2003

Here's a novel solution:

Rearrange your data such that the short headers describe columns and the long headers describe rows. Then, don't worry about vertical text.

Oooh, I have an idea, but I want to code it, then I'll post it. Hang on a bit...

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

EdwardMartinIII · Sep 9, 2003

Here. Consider how you display your data. Have fun!

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD  X HTML 1.0 Transitional//EN&quot;
     &quot;DTD/ X html1-transitional.dtd&quot;>
<html>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;te X t/html; charset=utf-8&quot;></meta>
    <title>Sample Table Squeezer</title>
  </head>
  <body>
    <p>Behold a table of valuable data:</p>
    <table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
      <tr>
        <td colspan=&quot;10&quot; bgcolor=&quot;#bb6611&quot;>Christine Chapel</td>
      </tr>
      <tr>
        <td colspan=&quot;9&quot; bgcolor=&quot;#bb9911&quot;>Pavel Andreievich Checkov</td>
        <td bgcolor=&quot;#bb6611&quot;></td>
      </tr>
      <tr>
        <td colspan=&quot;8&quot; bgcolor=&quot;#bbcc11&quot;>James Tiberius Kirk</td>
        <td bgcolor=&quot;#bb9911&quot;></td>
        <td bgcolor=&quot;#bb6611&quot;></td>
      </tr>
      <tr>
        <td colspan=&quot;7&quot; bgcolor=&quot;#bbff11&quot;>Leonard H. McCoy</td>
        <td bgcolor=&quot;#bbcc11&quot;></td>
        <td bgcolor=&quot;#bb9911&quot;></td>
        <td bgcolor=&quot;#bb6611&quot;></td>
      </tr>
      <tr>
        <td colspan=&quot;6&quot; bgcolor=&quot;#ee2211&quot;>Janice Rand</td>
        <td bgcolor=&quot;#bbff11&quot;></td>
        <td bgcolor=&quot;#bbcc11&quot;></td>
        <td bgcolor=&quot;#bb9911&quot;></td>
        <td bgcolor=&quot;#bb6611&quot;></td>
      </tr>
      <tr>
        <td colspan=&quot;5&quot; bgcolor=&quot;#ee5511&quot;>Montgomery Scott</td>
        <td bgcolor=&quot;#ee2211&quot;></td>
        <td bgcolor=&quot;#bbff11&quot;></td>
        <td bgcolor=&quot;#bbcc11&quot;></td>
        <td bgcolor=&quot;#bb9911&quot;></td>
        <td bgcolor=&quot;#bb6611&quot;></td>
      </tr>
      <tr>
        <td colspan=&quot;4&quot; bgcolor=&quot;#ee8811&quot;>Spock</td>
        <td bgcolor=&quot;#ee5511&quot;></td>
        <td bgcolor=&quot;#ee2211&quot;></td>
        <td bgcolor=&quot;#bbff11&quot;></td>
        <td bgcolor=&quot;#bbcc11&quot;></td>
        <td bgcolor=&quot;#bb9911&quot;></td>
        <td bgcolor=&quot;#bb6611&quot;></td>
      </tr>
      <tr>
        <td colspan=&quot;3&quot; bgcolor=&quot;#eebb11&quot;>Hikaru Sulu</td>
        <td bgcolor=&quot;#ee8811&quot;></td>
        <td bgcolor=&quot;#ee5511&quot;></td>
        <td bgcolor=&quot;#ee2211&quot;></td>
        <td bgcolor=&quot;#bbff11&quot;></td>
        <td bgcolor=&quot;#bbcc11&quot;></td>
        <td bgcolor=&quot;#bb9911&quot;></td>
        <td bgcolor=&quot;#bb6611&quot;></td>
      </tr>
      <tr>
        <td colspan=&quot;2&quot; bgcolor=&quot;#eeee11&quot;>Nyota Uhuru</td>
        <td bgcolor=&quot;#eebb11&quot;></td>
        <td bgcolor=&quot;#ee8811&quot;></td>
        <td bgcolor=&quot;#ee5511&quot;></td>
        <td bgcolor=&quot;#ee2211&quot;></td>
        <td bgcolor=&quot;#bbff11&quot;></td>
        <td bgcolor=&quot;#bbcc11&quot;></td>
        <td bgcolor=&quot;#bb9911&quot;></td>
        <td bgcolor=&quot;#bb6611&quot;></td>
      </tr>
      <tr>
        <td>Known to wear skirts</td>
        <td bgcolor=&quot;#eeee11&quot;> X </td>
        <td bgcolor=&quot;#eebb11&quot;> -- </td>
        <td bgcolor=&quot;#ee8811&quot;> -- </td>
        <td bgcolor=&quot;#ee5511&quot;> X </td>
        <td bgcolor=&quot;#ee2211&quot;> X </td>
        <td bgcolor=&quot;#bbff11&quot;> -- </td>
        <td bgcolor=&quot;#bbcc11&quot;> -- </td>
        <td bgcolor=&quot;#bb9911&quot;> -- </td>
        <td bgcolor=&quot;#bb6611&quot;> X </td>
      </tr>
      <tr>
        <td>Known to chase skirts</td>
        <td bgcolor=&quot;#eeee11&quot;> -- </td>
        <td bgcolor=&quot;#eebb11&quot;> -- </td>
        <td bgcolor=&quot;#ee8811&quot;> -- </td>
        <td bgcolor=&quot;#ee5511&quot;> X </td>
        <td bgcolor=&quot;#ee2211&quot;> -- </td>
        <td bgcolor=&quot;#bbff11&quot;> -- </td>
        <td bgcolor=&quot;#bbcc11&quot;> X </td>
        <td bgcolor=&quot;#bb9911&quot;> -- </td>
        <td bgcolor=&quot;#bb6611&quot;> -- </td>
      </tr>
      <tr>
        <td>Known to chase after folks with a sword/dagger</td>
        <td bgcolor=&quot;#eeee11&quot;> -- </td>
        <td bgcolor=&quot;#eebb11&quot;> X </td>
        <td bgcolor=&quot;#ee8811&quot;> -- </td>
        <td bgcolor=&quot;#ee5511&quot;> X </td>
        <td bgcolor=&quot;#ee2211&quot;> -- </td>
        <td bgcolor=&quot;#bbff11&quot;> -- </td>
        <td bgcolor=&quot;#bbcc11&quot;> -- </td>
        <td bgcolor=&quot;#bb9911&quot;> -- </td>
        <td bgcolor=&quot;#bb6611&quot;> -- </td>
      </tr>
      <tr>
        <td>Known to fan dance</td>
        <td bgcolor=&quot;#eeee11&quot;> X </td>
        <td bgcolor=&quot;#eebb11&quot;> -- </td>
        <td bgcolor=&quot;#ee8811&quot;> -- </td>
        <td bgcolor=&quot;#ee5511&quot;> -- </td>
        <td bgcolor=&quot;#ee2211&quot;> -- </td>
        <td bgcolor=&quot;#bbff11&quot;> -- </td>
        <td bgcolor=&quot;#bbcc11&quot;> -- </td>
        <td bgcolor=&quot;#bb9911&quot;> -- </td>
        <td bgcolor=&quot;#bb6611&quot;> -- </td>
      </tr>
      <tr>
        <td>Occasionally too wide</td>
        <td bgcolor=&quot;#eeee11&quot;> -- </td>
        <td bgcolor=&quot;#eebb11&quot;> -- </td>
        <td bgcolor=&quot;#ee8811&quot;> -- </td>
        <td bgcolor=&quot;#ee5511&quot;> X </td>
        <td bgcolor=&quot;#ee2211&quot;> -- </td>
        <td bgcolor=&quot;#bbff11&quot;> -- </td>
        <td bgcolor=&quot;#bbcc11&quot;> X </td>
        <td bgcolor=&quot;#bb9911&quot;> -- </td>
        <td bgcolor=&quot;#bb6611&quot;> -- </td>
      </tr>
      <tr>
        <td>Known to have big hair</td>
        <td bgcolor=&quot;#eeee11&quot;> X </td>
        <td bgcolor=&quot;#eebb11&quot;> -- </td>
        <td bgcolor=&quot;#ee8811&quot;> X </td>
        <td bgcolor=&quot;#ee5511&quot;> -- </td>
        <td bgcolor=&quot;#ee2211&quot;> X </td>
        <td bgcolor=&quot;#bbff11&quot;> -- </td>
        <td bgcolor=&quot;#bbcc11&quot;> -- </td>
        <td bgcolor=&quot;#bb9911&quot;> -- </td>
        <td bgcolor=&quot;#bb6611&quot;> X </td>
      </tr>
      <tr>
        <td>Known to have touched a whale</td>
        <td bgcolor=&quot;#eeee11&quot;> -- </td>
        <td bgcolor=&quot;#eebb11&quot;> -- </td>
        <td bgcolor=&quot;#ee8811&quot;> X </td>
        <td bgcolor=&quot;#ee5511&quot;> -- </td>
        <td bgcolor=&quot;#ee2211&quot;> -- </td>
        <td bgcolor=&quot;#bbff11&quot;> -- </td>
        <td bgcolor=&quot;#bbcc11&quot;> -- </td>
        <td bgcolor=&quot;#bb9911&quot;> -- </td>
        <td bgcolor=&quot;#bb6611&quot;> -- </td>
      </tr>
    </table>
  </body>
</html>

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

Wullie · Sep 9, 2003

NOOOOOO! You're not a Trekkie, are you? [noevil]

Wullie

http://www.necomputers.org.uk

http://www.freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.whiland.co.uk

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell

EdwardMartinIII · Sep 9, 2003

Man, I bust hump to come up with a neat and attractive example of a unique solution to this problem and you jack me on my dataset. [tongue]

No one called me a "guvvie" when I used Justices of the U. S. Supreme Court in my examples... [lol]

Besides, I thought the wears-skirt/chases skirt counterpart was funny. [lol]

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Vertical Text?? 2

colep

Programmer

grtfercho

Programmer

Boomerang

Programmer

colep

Programmer

cian

Technical User

colep

Programmer

grtfercho

Programmer

judgementday

MIS

dolphyn

Programmer

Wullie

Programmer

EdwardMartinIII

Technical User

EdwardMartinIII

Technical User

Wullie

Programmer

EdwardMartinIII

Technical User

Similar threads

Part and Inventory Search

Sponsor