Vertical font

@karibaMar 14.2003

Hello,

I wonder how to set vertical font. Is it possible or do I need to purchase special font for that?

Thanks for any help,

Mike

to post a comment

@toicontienMar 14.2003 — #After reading the CSS2 reference at www.w3schools.com, there doesn't seem to be a way to write text vertically on the screen. You can set the text to be displayed left to right, or right to left, though.

If there is a font out there that displays letters vertically, or at least rotated 90 degrees, that would work, but then you'd have to get into downloadable fonts.

Your best bet is to create that text in a graphics program like Photoshop or Paint Shop Pro. You may even be able to do text vertically in Flash.

@karibaauthorMar 14.2003 — #Yes,

I was kind of hoping that I could do it with CSS, but if not, I will just make gif's in Photoshop.

Thanks for your reply.

Mike

@hamsterbacke82May 13.2007 — #you could make a div which is so narrow that the single characters have to line up vertically. Quite a hack and not tested with many browsers, but it worked for me and some Japanese characters..

@cootheadMay 13.2007 — #Hi there kariba,

here is a javascript solution...

[color=navy]&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 
 &lt;style type="text/css"&gt;
 #vertical {
 width:40px;
 padding:10px 0;
 background-color:#000;
 font-family:verdana,arial,helvetica,sans-serif;
 font-size:16px;
 color:#fff;
 text-align:center;
 }
 .hide {
 display:none;
 }
 &lt;/style&gt;
 
 &lt;script type="text/javascript"&gt;
 window.onload=function() {
 verticalText();
 }
 function verticalText(){
 userString='This string will be vertically rendered';
 
 for(c=0;c&lt;userString.length;c++) {
 document.getElementById('vertical').innerHTML+=userString.charAt(c)+'&lt;br/&gt;';
 }
 document.getElementById('vertical').className='';  <br/>
 }
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="vertical" class="hide"&gt;&lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;[/color]

[i]coothead[/i]

@WebJoelMay 13.2007 — #I could have thought that I read a page that idealized the notion that using the charset-iso of "traditional chinese" (vertical text) could be used, but with English letters, and achieve this. I didn't bookmark or give it much interest though... It sounds like a "cssplay" thing but I cannot say for sure... ?

Vertical font

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Vertical font

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴