SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Shiver me timbers!! anthony_irl's Avatar
    Join Date
    Aug 1999
    Location
    Dublin, Ireland
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical text in CSS

    Hi guys,

    One of my mates is working on a design layout given to him by our graphics team and one of the pages requires text that runs vertically. You can see an example in the pic attached. I'm just wondering if there is a way to do this in CSS as we can't seem to find any other way. Thanks a lot.
    Attached Images Attached Images
    Anthony - How's tings?

    24 hours in a day, 24 beers in a case. Coincidence? I think not.
    Contact me by: PM Email NEW! Carrier Pigeon

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good question! My immediate reaction was "No chance." but the very first Googled Result revealed this:

    SSI-Developer.Net


    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid that's an IE only effect, but it degrades well enough (in other browsers it simply displays the text horizontally).

    What you could do was use that for IE and have an image for other browsers or something, using an image-replacement technique.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ucahg
    I'm afraid that's an IE only effect
    Oh when will the rest of the browsers catch up <sigh>

    Andy
    From the English nation to a US location.

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This is a really ugly hack that worked:
    HTML 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">
    	<!--
    	h1 span {
    	  display: block;
    	}
    	-->
    </style>
    </head>
    
    <body>
    <h1><span>v</span><span>e</span><span>r</span><span>t</span><span>i</span><span>c</span><span>a</span><span>l</span></h1>
    </body>
    </html>
    You can also just output a <br /> after each letter I guess. There's really no good way to flip the axis of your type.

  6. #6
    Shiver me timbers!! anthony_irl's Avatar
    Join Date
    Aug 1999
    Location
    Dublin, Ireland
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys.

    vgarcia, the only problem with that is the letters are not sideways. You have to read it from the top down and not from left to right with your head turned to the left. If that makes sense.
    Anthony - How's tings?

    24 hours in a day, 24 beers in a case. Coincidence? I think not.
    Contact me by: PM Email NEW! Carrier Pigeon

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by anthony_irl
    Thanks for the help guys.

    vgarcia, the only problem with that is the letters are not sideways. You have to read it from the top down and not from left to right with your head turned to the left. If that makes sense.
    Ah, you want the whole thing flipped then huh? In that case, I suggest you use a graphic and a good image/text replacement technique to remain accessible .

  8. #8
    Shiver me timbers!! anthony_irl's Avatar
    Join Date
    Aug 1999
    Location
    Dublin, Ireland
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks vinnie and all those who contributed.
    Anthony - How's tings?

    24 hours in a day, 24 beers in a case. Coincidence? I think not.
    Contact me by: PM Email NEW! Carrier Pigeon


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
  •