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;
}
page revision: 47, last edited: 06 Aug 2010 06:40
