...

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



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

Is there any way to do this?

adios
12-10-2003, 07: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, 07: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, 02: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, 03: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, 06: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, 01: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, 05:12 AM
This (http://www.masterplumbers.com/plumbviews/images/upside_down.jpg) usually works for me. Cross-browser, too.:thumbsup:

Mhtml
12-12-2003, 07: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum