Vertical text

windows · Jan 10, 2008

Hi all, 
 
I need to add some text to a html page that is aligned vertically down the page. Its going to be at the left hand side of the page so I intend to create a table and put the vertical text in the first column. Can anyone give me a few pointers on how this would be done or even some links where I could read some information on how to do it. I am a very inexperienced web designer so I suppose the simplest way of doing it would be the best. 
 
Regards, 
BBdo you mean justify your text in the table column? 
 
you using any sort of program or are you coding it yourself?there is a visual filter that will give you vertical text but is IE specific, in other words only works in internet explorer. For vertical text make it in an image editor and then insert it where you want it to go in the page

please post back if you are actually talking about vertically aligning text.if you use a tble jsu tdo it. 
 
<table width="10"> 
<tr> 
<td>T</td> 
</tr> 
<tr> 
<td>E</td> 
</tr> 
<tr> 
<td>X</td> 
</tr> 
<tr> 
<td>T</td> 
</tr> 
</table>dang, i keep forgetting that way, for some reason i always think the person wants the text to be sideways

<table> 
<tr> 
 
<td style="width:10px;text-align:left;border-style:solid;"> 
V E R T I C A L T E X T 
</td> 
 
<td style="width:300px;"> 
Content goes here..... 
</td> 
</tr> 
</table>theres also this one 
 
<a class="postlink" href="http://www.snippetlibrary.com/viewhtml.php?id=4&kid=27&siteid=94">http://www.snippetlibrary.com/viewhtml. ... &siteid=94</a>Try this: 
 
<script type="text/javascript"> 
var str = "T,h,i,s, ,i,s, ,m,y, ,v,e,r,t,i,c,a,l, ,t,e,x,t".replace(/\,/g, ' '); 
document.write(str); 
</script> 
 
 
.....Willy 
 
Edit: Or to save the hassle of adding commas. 
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, ' '); 
document.write(str); 
</script> 
 
Note: The forum removed the double spaces. 
Which are now represented by: &amp#32;&amp#32;Make the text into an image using Photoshop or something (that way, you can use whatever font you like) and then just: 
<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
<tr> 
<td width="10%" valign="top"> 
<img border="0" src=http://www.htmlforums.com/archive/index.php/"yourimage.gif" width="50" height="500"></td> 
<td width="90%" valign="top">Rest of the page content goes here.</td> 
</tr> 
</table>

Originally posted by leoo24 
dang, i keep forgetting that way, for some reason i always think the person wants the text to be sideways

Hi Guys, 
Thanks for all the suggestions. I should have made myself clearer but I do in fact want the text to be sideways up the left hand side of the page. Is creating an image the only way to do it?? 
 
If there was another way it would be preferable as the text may be dynamic so Im not sure if a gif would do...... 
 
Cheers, 
BBThis is what you want, right? CLICK HERE (<a class="postlink" href="http://www.glanby.se/example/test.htm">http://www.glanby.se/example/test.htm</a>) 
 
If you want to, I can create the image for you in Photoshop.

Originally posted by God Zilla 
This is what you want, right? CLICK HERE (<a class="postlink" href="http://www.glanby.se/example/test.htm">http://www.glanby.se/example/test.htm</a>) 
 
If you want to, I can create the image for you in Photoshop.

Yes thats it exactly. I appreciate the offer but I think I need to investigate other alternatives before I decide on using an image. I am going to be getting the text content from another department here so I had planned on just loading it in from a file. That way if the business guys decide that they want to put somthing different in the text they just send me a new text file. 
 
BBthen there are only two ways of doing that, with an image or using the ie specific filter, which you can see an example of here (<a class="postlink" href="http://www.ssi-developer.net/css/vertical-text.shtml">http://www.ssi-developer.net/css/vertical-text.shtml</a>)Originally posted by beagleboy 
Is creating an image the only way to do it?? 
we have shown you a couple of ways that don't involve an image. if the text is going to be dynamic then teh best one is the link I showed you. tha tis using an object tag, not an img, it just appearts that way. if you want it dynamic you can always use serverside coding like php. with php you can use the GD library and creat an on the fly image. also read these. 
 
<a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=10135">http://www.htmlforums.com/showthread.ph ... adid=10135</a> 
<a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=9462">http://www.htmlforums.com/showthread.ph ... eadid=9462</a> 
<a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=9494">http://www.htmlforums.com/showthread.ph ... eadid=9494</a>Originally posted by scoutt 
we have shown you a couple of ways that don't involve an image. if the text is going to be dynamic then teh best one is the link I showed you. tha tis using an object tag, not an img, it just appearts that way. if you want it dynamic you can always use serverside coding like php. with php you can use the GD library and creat an on the fly image. also read these. 
 
<a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=10135">http://www.htmlforums.com/showthread.ph ... adid=10135</a> 
<a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=9462">http://www.htmlforums.com/showthread.ph ... eadid=9462</a> 
<a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=9494">http://www.htmlforums.com/showthread.ph ... eadid=9494</a> 
 
Hi Scoutt, 
 
When I tried an example using the Object tag I just get an error on my page because the object cannot be displayed. I persume I need to enable some options. I have turned on the ActiveX permissions but that didnt make any difference. The only problem with the Object tag is that my code will only run in IE. The same is true for the IE specific filter mentioned by leoo24. However I probably can put up with this as far as I know all the users of our system should be using IE6. 
 
I need to look at eveything more closely now to try take it all in. I also came across some Microsoft support for vertical layout using a CSS attribute called writing-mode. However this only supports two types of text flow: top-to-bottom, right-to-left and left-to-right, top-to-bottom (the typical horizontal flow for text). Neither of these will do what I want because I need a bottom-to-top, left-to-right flow. 
 
Thanks for all your help, 
BBthe object tag should work in all browsers, but that particular one might just be IE only as it uses the label control and I have no idea what browsers support it.Oh; 
 
You meant Vertical-Sideways text

Try this: 
 
<html> 
<head> 
<a class="postlink" href="http://www.js-examples.com">http://www.js-examples.com</a> 
1000s of free ready to use scripts, tutorials, forums. 
Author: Miahsoft - <a class="postlink" href="http://www.convea.com/">http://www.convea.com/</a> 
--> 
 
<style> 
.myStyle { 
color:#315DA5; 
font-family: monotype corsiva; 
font-size: 35pt; 
font-weight: bold; 
writing-mode: tb-rl; 
filter: flipH() flipV(); 
} 
</style> 
</HEAD> 
 
<BODY> 
 
 
Vertical&ampnbsp;Text&ampnbsp;Example 
 
 
 
</body> 
</html> 
 
.....WillyCheers Willy, 
 
Seems like the simplest solution so far............. 
BBThe filter is IE5+ only. 
But, you had said everyone was using IE6 
So, that should do it for you.

.....WillyOriginally posted by scoutt 
the object tag should work in all browsers, but that particular one might just be IE only as it uses the label control and I have no idea what browsers support it. 
 
Ive been messing around with this code snippet and cannot get it to work. I have got the Label control installed and registered on my pc but the example still does not work. I have even been able to test the Control using an "ActiveX Control Test Container". Does anybody have any idea if there is anything wrong with the label control code snippet or if its possible I am missing some libraries required to use this snippet. 
 
BB

Vertical text

windows

Guest