How to simulate vertical text (writing-mode:tb-rl) in Firefox

Posted Červenec 29, 2009

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

Související články v kategorii SW development

Posted in SW development
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

7 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. SEO LA on Březen 28th, 2012

    Just Browsing…

    While I was browsing yesterday I saw a excellent article concerning…

  3. 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/ [...]…

  4. LED bulbs on Duben 4th, 2012

    Digg…

    While checking out DIGG today I noticed this…

  5. pattaya condos on Duben 4th, 2012

    Digg…

    While checking out DIGG yesterday I noticed this…

  6. http://www.dentistinedgecliff.com.au/blog/whitening-your-teeth-10-myths on Duben 10th, 2012

    … [Trackback]…

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

  7. 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/ [...]…

Kontrolní text