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
    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
    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
    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
    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
    me'
    me' is offline
    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
    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
    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
    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
    •