Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2003
    Location
    Originally from Melbourne, but travelling
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I turn a table, or the text inside it, sideways?

    ... 90%

    Is there any way to do this?

  2. #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    table {
           width: 200px;
           margin: 100px auto;
           font: 48px "comic sans ms";
           filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
          }
    
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td>....like this?</td>
    </tr>
    </table>
    </body>
    </html>
    MSIE-only, afaik.

    http://msdn.microsoft.com/library/de...s/Rotation.asp

  3. #3
    New to the CF scene
    Join Date
    Dec 2003
    Location
    Originally from Melbourne, but travelling
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that, but it just seems to create a normal looking table with the text the normal way...

    I am trying to get it on it's side, so that the writing is on it's side....

  4. #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts
    twe...
    just a dependingŪ on howww much 'text' youre wanting to turn just a sidewaysŪ??? you could do it as the ol' image n' rotate thattt thennn put it into your table...

    just a notherŪ suggestion...:O)))

  5. #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here are two more examples.

    IE Only:
    Note: You must hard code any spaces.
    (&#32can use either: &ampnbsp; or &amp#32;&#32)
    Code:
    <html>
    <head>
    <style>
    .myStyle {
    color:#315DA5;
    font-family: monotype corsiva;
    font-size: 35pt;
    font-weight: bold;
    writing-mode: tb-rl;
    filter: flipH() flipV();
    }
    </style>
    </HEAD>
    
    <BODY>
    <span class="myStyle">
    Vertical&ampnbsp;Text&ampnbsp;Example
    </span>
    
    </body>
    </html>


    Or: using javascript
    Note: Add a space between letters and double space between words.

    Code:
    <script type="text/javascript">
    var str = "T h i s&amp#32;&amp#32;i s&amp#32;&amp#32;m y&amp#32;&amp#32;v e r t i c a l  t e x t".replace(/ /g, '<br>');
    document.write(str);
    </script>
    Note: The forum removes the double spaces.
    Which are now represented by: &amp#32;&amp#32;

    .....Willy

    BTW: Adios's example works as written.
    If it did not work for you, you must have done something wrong.

  6. #6
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Images and image-replacement should be the way to go here. You don't want to turn too much text sideways, it's unreadable, so an image should do.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  7. #7
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Originally posted by me'
    Images and image-replacement should be the way to go here. You don't want to turn too much text sideways, it's unreadable, so an image should do.
    And it isn't IE only.
    OracleGuy

  8. #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    This usually works for me. Cross-browser, too.

  9. #9
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    I rember there was a solution to this problem already on these forums. You would have found it by searching either js or html forums.
    Omnis mico antequam dominus Spookster!


 

Posting Permissions

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