How to simulate vertical text (writing-mode:tb-rl) in Firefox
Problem displaying vertical text in Firefox
If you want to make your table header thin to conserve space, one of the options is to make text vertical. This is easily done in Internet Explorer using CSS3 write-mode property:
<th style="write-mode: tb-lr">Text will be vertical</th>
Unofortunatelly, Firefox 3 does not support this feature yet.
Javascript FF & IE vertical text solution - split the text with spaces
I have come up with this solution, which works both for IE and Firefox:
- Give your table headers class “vertical”
- Define style for this class as writing-mode: tb-rl; (for IE)
- On document onload call javascript function makeHeadersVertical
- Function will iterate all HTML elements with class=”vertical” and adds extra space after every letter in the text and sets column width to 1pt. This allows firefox to put the letters from top to bottom.
View vertical text in table header example for Firefox and Internet Explorer.
Source code
<html>
<script type="text/javascript">
function makeHeadersVertical(){
if (document.getElementsByClassName) {
var verticalCells = document.getElementsByClassName("vertical");
for (i=0; i<verticalCells.length;i++ ) {
cell = verticalCells[i];
// If writeMode is supported, no need to insert spaces
if (cell.style.writeMode) {
return;
}
cell.width="1pt";
toReplace = cell.innerHTML;
newText = '';
for (p = 0; p<toReplace.length; p++) {
newText += toReplace[p];
if (p<toReplace.length-1) newText += ' ';
}
cell.innerHTML=newText;
}
}
}
</script>
<style type="text/css">
.vertical{
/* Works for IE, not for Firefox */
writing-mode: tb-rl;
}
</style>
<body onload="makeHeadersVertical()">
<table border="1" cellspacing="0">
<tr>
<td class="vertical">Yellow</td>
<td class="vertical">Black</td>
<td class="vertical">Brown</td>
</tr></table>
</body>
</html>
Limitations of the solution
- Text is not rotated as if using tb-lr, letters just go from top to bottom with normal orientation
- Sometimes some thin letters may occur two in one row
Alternative solutions
I have found some alternative solutions, but none of them is lightweight:
- Embed SVG to your page with text rotated 90 degrees using SVG transform
- Generate image of the vertical text using some server-side graphics library
Související články v kategorii SW development
- Jak nakupovat elektroniku šetrnou k přírodě - 7.5. 2009
- Elevator electricity consumption and CO2 calculator - 21.2. 2009
- Jak předejít a řešit bolest v zápěstí - zkušenosti programátora - 17.10. 2008
- Adding Team/SVN commands for existing projects (Eclipse Ganymede) - 17.9. 2008
- TODO list before your interview - 2.4. 2008
Loading ...
Amiable brief and this fill someone in on helped me alot in my college assignement. Say thank you you for your information.