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 Chriss Miller 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
- Thread starter prophete
- Start date
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
-- Chris Hunt
Extra Connections Ltd
- Thread starter
- #3
-
1
- #4
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.
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="<table cellpadding='0' cellpadding='0' border='0' bgcolor='FFFFFF'>";
for(var i=0;i<txttitle.length;i++){
txttable=txttable+"<tr><td><img src='";
txttable=txttable+txttitle.charAt(i)+".gif'>";
txttable=txttable+"</td></tr>";
}
txttable=txttable+"</table>";
return txttable;
}
</script>
<body>
<script>
document.write(createVert("AABRACADABRABBA"
);
</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 .
<html>
<script>
function createVert(txttitle){
var txttable;
txttable="<table cellpadding='0' cellpadding='0' border='0' bgcolor='FFFFFF'>";
for(var i=0;i<txttitle.length;i++){
txttable=txttable+"<tr><td><img src='";
txttable=txttable+txttitle.charAt(i)+".gif'>";
txttable=txttable+"</td></tr>";
}
txttable=txttable+"</table>";
return txttable;
}
</script>
<body>
<script>
document.write(createVert("AABRACADABRABBA"
);</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 .
- Thread starter
- #6
cian
Technical User
- Oct 11, 2001
- 1,383
You can do it with CSS filters but it's IE only.
-
2
- #8
prophete,
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 !! -->
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 !! -->
cian
Technical User
- Oct 11, 2001
- 1,383
You could start here: faq215-3207
bonumtibor
Programmer
boomerang...
css work not correct when u print vertical text from IE...
printed text is mirrored... it's problem
css work not correct when u print vertical text from IE...
printed text is mirrored... it's problem
- Status
Similar threads
- Locked
- Question