SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict bkennedy's Avatar
    Join Date
    Aug 2004
    Location
    michigan
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can CSS Rotate Text?

    Hi,
    I'd imagine that if anything like this was possible, everyone would be doing it, but can CSS or any thing else rotate text (say, a title for my page) so that it reads vertically, if you tilt your head sideways... I know there are ways to split it so there's a letter per line, but I want it to be actual vertical text.
    Any ideas?
    Thanks
    -bob
    ----------------
    bob.kennedy
    ----------------

  2. #2
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use CSS to render text vertically, but only in IE (as far as I know):
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    <style>
    .verticaltext {
    writing-mode: tb-rl;
    filter: flipv fliph;
    }
    </style> 
    </head>
    <body>
    <div class="verticaltext">This text should read vertically</div> 
    </body>
    </html>
    I think images are the only cross-browser alternative.
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is propriteary Ie code so it won't validate and doesn't work on other browsers but does what you asked (sort of)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #vert {
    writing-mode: tb-rl;
    filter: flipv fliph;
    width:20px;
    height:350px;
    }
    </style>
    </head>
    <body>
    <div id="vert"> This is some vertical text : This is some vertical text</div>
    </body>
    </html>
    I don't think it'll be much use other than for curiosity

    Paul


Bookmarks

Posting Permissions

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