Vertical text inside table headers using JavaScript-based SVG library

Question

I use jqGrid with many columns containing logical information that appear as checkboxes inside the table (see http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm for an example). For a more compact display of information, I use vertical column headers. It works very well and works in jqGrid in all browsers (see My discussion with Tony Tomov on the jqGrid forum http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation / ), but in the vertical text, IE is blurry and doesn't look good enough (open the link above in IE, and you'll see exactly what I mean). I asked users why the text looks so weird. So I'm thinking of using a JavaScript-based SVG library such as SVG Web ( http://code.google.com/p/svgweb/ ) or Raphaël ( http://raphaeljs.com/ ). SVG is very powerful and hard to find a good example. I only need to display vertical text (-90 grad, from bottom to top) and use, if possible, without working in absolute positioning mode.

So, again, my question is: I need to be able to display vertical text (- 90 grad rotation ) inside the <td> of the table title elements. I want to use a JavaScript-based SVG library such as SVG Web or Raphaël. The solution should support IE6 . Does anyone have a good reference example that could help me? If someone sends a whole solution to the problem, I would be happy.

To be precise, this is my current solution: I define

 .rotate { -webkit-transform: rotate(-90deg); /* Safari 3.1+, Chrome */ -moz-transform: rotate(-90deg); /* Firefox 3.5+ */ -o-transform: rotate(-90deg); /* Opera starting with 10.50 */ /* Internet Explorer: */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */; } 

define the RotateCheckboxColumnHeaders function

 var RotateCheckboxColumnHeaders = function (grid, headerHeight) { // we use grid as context (if one have more as one table on tnhe page) var trHead = $("thead:first tr", grid.hdiv); var cm = grid.getGridParam("colModel"); $("thead:first tr th").height(headerHeight); headerHeight = $("thead:first tr th").height(); for (var iCol = 0; iCol < cm.length; iCol++) { var cmi = cm[iCol]; if (cmi.formatter === 'checkbox') { // we must set width of column header div BEFOR adding class "rotate" to // prevent text cutting based on the current column width var headDiv = $("th:eq(" + iCol + ") div", trHead); headDiv.width(headerHeight).addClass("rotate"); if (!$.browser.msie) { if ($.browser.mozilla) { headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7); } else { headDiv.css("left", (cmi.width - headerHeight) / 2); } } else { var ieVer = jQuery.browser.version.substr(0, 3); // Internet Explorer if (ieVer !== "6.0" && ieVer !== "7.0") { headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2); $("span", headDiv).css("left", 0); } else { headDiv.css("left", 3); } } } } }; 

And include a call like RotateCheckboxColumnHeaders(grid, 110); after creating jqGrid.

Answer 1

Here is a working jsfiddle that does this. It should work in IE 6, I used only jquery and raphael js. I made static dimensions for the raphael drawing area and text, but of course you can calculate the dynamic sizes a bit:

http://jsfiddle.net/UYj58/9/

The code looks like this if you include jquery and raphael:

 $(document).ready(function(){ var font = {font: '12px Helvetica, Arial'}; var fill = {fill: "hsb(120deg, .5, 1)"} $('tr th div').each(function (index, div){ R = Raphael($(div).attr('id'), 20, 100); R.text(4, 50, $(div).find('span').text()) .attr(font) .attr(fill) .rotate(-90, true); $(div).find('span').hide(); }); }); 

And the HTML looks like this:

 <table> <thead> <tr> <th><div id="columnOne"><span>heading one</span></div></th> <th><div id="columnTwo"><span>heading two</span></div></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>4</td> <td>5</td> </tr> </tbody> </table> 

Oh, and I used this as an example: http://raphaeljs.com/text-rotation.html

Answer 2

Canvas text conversion example

  <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]--> <script type="text/javascript" src="../canvas.text.js"></script> <script type="text/javascript" src="../faces/dejavu_sans-normal-normal.js"></script> <script type="text/javascript" src="../faces/dejavu_sans-bold-normal.js"></script> </head> <body> <canvas width="500" height="300" id="test-canvas" style="font-size: 16px;"></canvas> <script type="text/javascript"> function initCanvas(canvas) { if (window.G_vmlCanvasManager && window.attachEvent && !window.opera) { canvas = window.G_vmlCanvasManager.initElement(canvas); } return canvas; } window.onload = function() { var canvas = initCanvas(document.getElementById("test-canvas")), ctx = canvas.getContext('2d'); ctx.strokeStyle = "rgba(255,0,0,1)"; ctx.fillStyle = "rgba(0,0,0,1)"; ctx.lineWidth = 1; ctx.font = "20pt Verdana, sans-serif"; ctx.strokeStyle = "#000"; ctx.rotate(Math.PI / 2); ctx.fillText('Vertical', 0, 0); ctx.restore(); } </script> </body>