www.webdeveloper.com
Results 1 to 6 of 6

Thread: Vertical font

  1. #1
    Join Date
    Jan 2003
    Posts
    45

    Vertical font

    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

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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.

  3. #3
    Join Date
    Jan 2003
    Posts
    45
    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

  4. #4
    Join Date
    May 2007
    Posts
    1

    vertical css

    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..

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there kariba,

    here is a javascript solution...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #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;
     }
    </style>
    
    <script type="text/javascript">
    window.onload=function() {
       verticalText();
     }
    function verticalText(){
       userString='This string will be vertically rendered';
    
    for(c=0;c<userString.length;c++) {
       document.getElementById('vertical').innerHTML+=userString.charAt(c)+'<br\/>';
     }
       document.getElementById('vertical').className='';  
     }
    </script>
    
    </head>
    <body>
    
    <div id="vertical" class="hide"></div>
    
    </body>
    </html>
    coothead

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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...
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles