dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: vertical text?

  1. #1
    Join Date
    Jan 2007
    Posts
    85

    vertical text?

    Is there a CSS style to make text run vertically instead of horizontally?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    No, but it will be part of W3C css3-text. Wait a few years ...

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    And if you don't want to wait for the maybe 10-years that this is going to be, -you can 'do' vertical now (from a certain point of view...)

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">
    * {border:0; padding:0; margin:0;}/* Set everything to "zero" */

    html, body {min-height:100%; height:101%; font-size:100.1%;
    padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so this */
    font:x-small Arial, Verdana, sans-serif;
    voice-family: "\"}\"";voice-family:inherit;
    font-size:small;/*for IE 5.5 */}
    html>body {font-size:small; height:auto;}/* Assist IE6 and earlier, 100% height */
    font-size: small; voice-family: "\"}\"";
    voice-family: inherit; font-size: medium} /* Assist IE rendering height, keyword-font sizes, etc. */

    p {font-size:0; font-size:1.0em; line-height:1.0em; margin:16px 0 12px 0;}

    h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica, sans-serif; background-color:none;
    font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
    h1 {font-size: 1.5em;}
    h2 {font-size: 1.4em;}
    h3 {font-size: 1.3em;}
    h4 {font-size: 1.2em;}
    h5 {font-size: 1.1em;}
    h6 {font-size: 1.0em;}
    </style>

    <style>
    p#vert {margin:25px; padding:5px; width:10px; font-weight:bold; border:1px solid black; text-align:center;}
    #vert span {display:block;}
    </style>

    <script type="text/javascript"><!--
    // -->
    </script>
    <link rel="shortcut icon" href="favicon.ico" /><!-- path to your favicon -->
    </head>
    <body>

    <p id="vert">
    <span>V</span>
    <span>E</span>
    <span>R</span>
    <span>T</span>
    <span>I</span>
    <span>C</span>
    <span>A</span>
    <span>L</span>
    <span style="padding-top:23px;">T</span>
    <span>E</span>
    <span>X</span>
    <span>T</span>
    </p>


    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles