Vertical text inside table headers using a JavaScript-based SVG library

Question

I use jqGrid with many columns containing boolean information, which are displayed as checkboxes inside the table (see http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO

Answer 1

Here's a working jsfiddle that does it. It should work in IE 6, I only used jquery and raphael js. I made static sizes for the raphael drawing area and the text, but you can certainly do a little math to figure out dynamic sizes:

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

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:

    

        

            
heading one
            
heading two
        
    
    

        

            
1
            
2
        
        

            
4
            
5
        
    

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