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!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

rotate title of grid/table 3

Status
Not open for further replies.

prophete

Technical User
Apr 21, 2003
7
IL
Hi,

I need to build a table in when the titles of the table are rotated, from horizontal to vertical (as if i rotate a string in powerpoint)

Thanks
 
There doesn't appear to be any kind of CSS property that will do this (though if there were, you could be sure that many browsers wouldn't support it!). I think you'll have to use an image of the rotated text instead.

-- Chris Hunt
Extra Connections Ltd
 
Hi

The problem is that the text is dynamic and retrive in run-time...

 
this may sound crazy but if the tittles are generated dynamically can't you have a set of small images representing each letter, then go through the String and depending of each of the letters build your dynamic image of letters rotated?...

Similar to the images you have with some wep page counters, they are actually built from individual digits.


You can have a process where you send the title string and the process will return the code for a small table having each cell one of the letters (rotated) from the string in graphical format.
 
not that crazy after all. It actually works.


<html>
<script>
function createVert(txttitle){
var txttable;
txttable=&quot;<table cellpadding='0' cellpadding='0' border='0' bgcolor='FFFFFF'>&quot;;
for(var i=0;i<txttitle.length;i++){
txttable=txttable+&quot;<tr><td><img src='&quot;;
txttable=txttable+txttitle.charAt(i)+&quot;.gif'>&quot;;
txttable=txttable+&quot;</td></tr>&quot;;
}
txttable=txttable+&quot;</table>&quot;;
return txttable;
}
</script>

<body>
<script>
document.write(createVert(&quot;AABRACADABRABBA&quot;));
</script>
</body>
</html>


just insert the call to the function inside the cells that make up the header tittles and you are done..
make sure you have a small graphic for every letter named the same way.
ie a.gif, j.gif.


goodluck .
 
prophete,

Try this:

<html>
<head>
<style>
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
</style>
</head>
<body>
<table border=&quot;1&quot;>
<tr>
<td><div class=&quot;verticaltext&quot;>This is Vertical Text</div></td>
<td><div class=&quot;verticaltext&quot;>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 !! -->
 
it works great but only in IE,any similar solution for Netscape?

Where can you get a list of all the filters IE can make use of??
 
boomerang...
css work not correct when u print vertical text from IE...
printed text is mirrored... it's problem
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top