Vertical Text (CSS Transform)

Vertical Text

CSS3 browsers only although the writing mode property has been around for IE since 5.5. More info at http://www.thecssninja.com/css/real-text-rotation-with-css

Community discussion on this at http://community.wikidot.com/forum/t-257194/vertical-text-in-a-table

IE:
p { writing-mode: tb-rl; }

Safari, Opera and Firefox:

p {
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}

[[module css]]
table.wiki-content-table th { writing-mode: tb-rl; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); width: -moz-fit-content; width: fit-content; }
[[/module]]

But the result is weird when used with a table because it rotates the whole cell. It looks bad in IE as well. Not sure how to fix that.

Country City
Scotland Inverness
Norway Bergen

html table with header set to 45 degrees

[[html]]
<style>
th { background-color: #001640; color: white; height:50px;padding-bottom: 10px;writing-mode: tb-rl; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); width: -moz-fit-content; width: fit-content; }
</style>
<table border="1">
  <tr>
    <th>Position</th>
    <th>Country</th>
    <th>City</th>
  </tr>
  <tr>
    <td>1</th>
    <td>UK</td>
    <td>Inverness</td>
  </tr>
  <tr>
    <td >2</th>
    <td>Norway</td>
    <td>Bergen</td>
  </tr>
</table>
[[/html]]

The vertical text at the top of the page was in a div using the following CSS:

.css-vertical-text {
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    border:0px solid red;
    color:#333;
    display:block;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:24px;
    font-weight:normal;
    height:20px;
    text-shadow: 0px 0px 1px #333;
    white-space:nowrap;
    width:20px;
}
css
Site Design and Content by Strathview © 2012