PDA

View Full Version : How do I turn a table, or the text inside it, sideways?



twentyone
12-10-2003, 05:27 AM
... 90%

Is there any way to do this?

adios
12-10-2003, 06:36 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

table {
width: 200px;
margin: 100px auto;
font: 48px "comic sans ms";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

</style>
</head>
<body>
<table>
<tr>
<td>....like this?</td>
</tr>
</table>
</body>
</html>

MSIE-only, afaik.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/properties/Rotation.asp

twentyone
12-10-2003, 06:46 AM
I tried that, but it just seems to create a normal looking table with the text the normal way...

I am trying to get it on it's side, so that the writing is on it's side....

justame
12-10-2003, 01:35 PM
twe...
just a dependingŪ on howww much 'text' youre wanting to turn just a sidewaysŪ??? you could do it as the ol' image n' rotate thattt thennn put it into your table...

just a notherŪ suggestion...:O)))

Willy Duitt
12-10-2003, 02:05 PM
Here are two more examples.

IE Only:
Note: You must hard code any spaces.
(&#32can use either: &ampnbsp; or &amp#32;&#32)

<html>
<head>
<style>
.myStyle {
color:#315DA5;
font-family: monotype corsiva;
font-size: 35pt;
font-weight: bold;
writing-mode: tb-rl;
filter: flipH() flipV();
}
</style>
</HEAD>

<BODY>
<span class="myStyle">
Vertical&ampnbsp;Text&ampnbsp;Example
</span>

</body>
</html>



Or: using javascript
Note: Add a space between letters and double space between words.


<script type="text/javascript">
var str = "T h i s&amp#32;&amp#32;i s&amp#32;&amp#32;m y&amp#32;&amp#32;v e r t i c a l t e x t".replace(/ /g, '<br>');
document.write(str);
</script>

Note: The forum removes the double spaces.
Which are now represented by: &amp#32;&amp#32;

.....Willy

BTW: Adios's example works as written.
If it did not work for you, you must have done something wrong. :confused:

me'
12-11-2003, 05:42 PM
Images and image-replacement should be the way to go here. You don't want to turn too much text sideways, it's unreadable, so an image should do.

oracleguy
12-12-2003, 12:40 AM
Originally posted by me'
Images and image-replacement should be the way to go here. You don't want to turn too much text sideways, it's unreadable, so an image should do.

And it isn't IE only. :)

adios
12-12-2003, 04:12 AM
This (http://www.masterplumbers.com/plumbviews/images/upside_down.jpg) usually works for me. Cross-browser, too.:thumbsup:

Mhtml
12-12-2003, 06:05 AM
I rember there was a solution to this problem already on these forums. You would have found it by searching either js or html forums.