Google Answers Logo
View Question
 
Q: HTML question about table cells and text ( Answered,   4 Comments )
Question  
Subject: HTML question about table cells and text
Category: Computers > Programming
Asked by: lampware-ga
List Price: $2.00		 Posted: 24 Jan 2005 19:06 PST
Expires: 23 Feb 2005 19:06 PST
Question ID: 462780 
Can text be written vertically in a html table cell instead of horizontally?

Say the cell contained "hello world".  Instead of seeing it
horizontally it should be displayed vertically with the "h" at the
bottom and the "d" at the top.
Answer  
Subject: Re: HTML question about table cells and text
Answered By: googleexpert-ga on 25 Jan 2005 21:27 PST
 
Hi lampware-ga,

Here is the an example of the flip function using example table cells (td):

<script language="JavaScript">
function flip()
{

var t= document.getElementsByTagName("td");

///~->for different tags, change as necessary
//var t = document.getElementsByTagName("h2");
//

for(var j = 0; j < t.length; j++)
{
if(t[j].id == "vert")
{

text = t.item(j).innerHTML;

len = text.length;
verttext = new Array(len);
for(var i = 0; i < len; i++)
{
verttext[i] = text[i]+"<br />";
}

t.item(j).innerHTML = verttext.join("\n");
}}
}
</script>
<body onload=flip();>

<h2 id="vert">hello world</h2>
<hr>
<h2 id="vert">hello world: the sequel</h2>
<hr>

<table>
<tr><th>One</th><th>Two</th></tr>
<tr><td colspan=2 id="vert">hello world</td></tr>
<tr><td>&nbsp;</td><td id="vert">hello world: the sequel</td></tr>
</table>
</body>


Please let me know if you have any questions.
Thanks.

-googleexpert
Clarification of Answer by googleexpert-ga on 25 Jan 2005 21:39 PST 
Please ignore the first answer.
This clarification with corrections (charAt function) 
should work in all browsers.
I have only tested Internet Explorer, Safari, and Firefox

<script language="JavaScript">

function flip()
{

var t= document.getElementsByTagName("td");

///~->for different tags, change as necessary
//var t = document.getElementsByTagName("h2");
//

for(var j = 0; j < t.length; j++)
{
if(t[j].id == "vert")
{

text = t.item(j).innerHTML;

len = text.length;
verttext = new Array(len);
for(var i = 0; i < len; i++)
{

verttext[i] = text.charAt(i)+"<br />";
}

t.item(j).innerHTML = verttext.join("\n");
}}
}
</script>
<body onload=flip();>

<h2 id="vert">hello world</h2>
<hr>
<h2 id="vert">hello world: the sequel</h2>
<hr>

<table>
<tr><th>One</th><th>Two</th></tr>
<tr><td colspan=2 id="vert">hello world</td></tr>
<tr><td>&nbsp;</td><td id="vert">hello world: the sequel</td></tr>
</table>
</body>
Request for Answer Clarification by lampware-ga on 26 Jan 2005 06:01 PST 
I could have done this with lrulrick-ga recommendation.  I want the
font actually rotated 90 degrees so it is in landscape mode/look.
Request for Answer Clarification by lampware-ga on 26 Jan 2005 08:44 PST 
I just tried in Firefox on Linux and the font is not rotated 90 degrees.
Clarification of Answer by googleexpert-ga on 26 Jan 2005 23:18 PST 
I am a bit confused right now...

As you said: 
"I could have done this with lrulrick-ga recommendation.  I want the
font actually rotated 90 degrees so it is in landscape mode/look."

I have emulated the same effect (automatically) with the javascript code
I provided.

I don't have Linux to test this code, but I am confident it should work
without any problems.

Can you post any edits to the code I posted?

Thank you.


-googleexpert
Comments  
Subject: Re: HTML question about table cells and text
From: lrulrick-ga on 24 Jan 2005 21:01 PST		  
Yes,
if after every letter you add the <br> code you may then have what
appears to be a vertical word instead of horizontal

end code would look like this:

<table  summary="">
	<tr>
<td>
h<br>
e<br>
l<br>
l<br>
o<br>
<br>
w<br>
o<br>
r<br>
l<br>
d<br>
</td>
		
	</tr>
	
		
</table>

for a single celled table.
Subject: Re: HTML question about table cells and text
From: pratap_r-ga on 25 Jan 2005 04:39 PST		  
try this, 

<TABLE>
<TR>
	<TD STYLE="writing-mode: tb-rl;filter: flipv() fliph(); ">hello world</TD>
</TR>
</TABLE>

the styles will take care of making the text vertical :-)

Have Fun!
Pratap
Subject: Re: HTML question about table cells and text
From: lampware-ga on 25 Jan 2005 08:18 PST		  
Pratap's answer only works on IE 5.5 & 6.0

http://www.corecss.com/properties/property.php?Name=writing-mode

I need an answer that works with all browsers!
Subject: Re: HTML question about table cells and text
From: ipreferpi314-ga on 25 Jan 2005 19:46 PST		  
I know that there is a special code you can write in CSS that tilts
the text 90° so that it's vertical.

Here is the code:


<!-- Place this code between your <HEAD> and </HEAD> tags -->
<style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style>

then while doing the table, write....
<td class=verticaltext>yada yada yada</td>
Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy