SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross Browser Vertical Text?

    Does anyone know of a cross browser way in CSS to achieve vertical text?

    I've attached a screenshot of a report below, as you can see each column contains one or two characters, the column only needs to contain one or two characters, so I'd like to be able to display the heading vertically to save a little space.

    I'd thought about writing a PHP script to produce images of the text, but I thought I should look into a CSS solution before implementing that.

    Cheers
    Attached Images Attached Images
    Rick

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

    There is no way to do this with css at the moment cross-browser. You can do something for IE only but its not valid.

    Code:
    <style type="text/css">
    .verticaltext {
        writing-mode: tb-rl;
        filter: flipv fliph;
        height:100px
    }
    
    </style>
    </head>
    <body>
    <p class="verticaltext"> This is some text </p>
    </body>
    http://msdn.microsoft.com/workshop/a...ritingmode.asp

  3. #3
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul - I'd seen alot of IE only stuff but was wondering it there was a Moz equiv.

    We have alot of users who are Mac based using Safari and FireFox, so I guess the images are they way to go with this.
    Rick

  4. #4
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A little experimenting in PHP and the results look quite good... (attached)
    Attached Images Attached Images
    Rick

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

    That looks good

    Are those images dynamically produced via PHP?

  6. #6
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers
    Quote Originally Posted by Paul O'B View Post
    Are those images dynamically produced via PHP?
    Yeah the vertical text is transparent gifs made with a little PHP script - I found one on the web for making PNG image replacements for headings and adapted it to produce transparent, vertical gifs. Each unique font/color/size etc combination is cached after its first created, so there shouldn't be too much extra demand on the server either.
    Rick


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
  •