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:

  1. Give your table headers class “vertical”
  2. Define style for this class as writing-mode: tb-rl; (for IE)
  3. On document onload call javascript function makeHeadersVertical
    1. 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:

  1. Embed SVG to your page with text rotated 90 degrees using SVG transform
  2. Generate image of the vertical text using some server-side graphics library
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

9 Comments so far

  1. WP Themes on Březen 13th, 2010

    Amiable brief and this fill someone in on helped me alot in my college assignement. Say thank you you for your information.

  2. fresh produce recruitment on Březen 30th, 2012

    … [Trackback]…

    [...] Find More Informations here: jetensky.net/blog/2009/07/29/how-to-simulate-vertical-text-writemodetb-rl-in-firefox/ [...]…

  3. LED bulbs on Duben 4th, 2012

    Digg…

    While checking out DIGG today I noticed this…

  4. pattaya condos on Duben 4th, 2012

    Digg…

    While checking out DIGG yesterday I noticed this…

  5. … [Trackback]…

    [...] Read More: jetensky.net/blog/2009/07/29/how-to-simulate-vertical-text-writemodetb-rl-in-firefox/ [...]…

  6. rent in nerja on Duben 14th, 2012

    … [Trackback]…

    [...] Find More Informations here: jetensky.net/blog/2009/07/29/how-to-simulate-vertical-text-writemodetb-rl-in-firefox/ [...]…

  7. viagra on Září 10th, 2012

    remarkably important…

    In accordance together with your pursuit, looking for the in property foreclosure residential might be bought from the actual sale, pretty for your person to nevertheless demand a keeping balance within the bank bank mortgage. There are generally plent…

  8. my computer is slowing down why on Červen 28th, 2013

    A Great Blog Post…

    I saw this really good post today….

  9. recommended you read on Květen 27th, 2014

    recommended you read…

    Jetyho blog ? How to simulate vertical text (writing-mode:tb-rl) in Firefox…