In RaphaelJS, how to align rotated text to the bottom?

Question

Using the following code, and inspired by this question, I managed to have vertical column headers in an HTML table, compatible with Internet Explorer. Now the last detail I need to set is the header vertical alignement : I'd like to have my headers fixed to the bottom of their row.

$(document).ready(function(){
$('tr th div').each(function (index, div){
R = Raphael($(div).attr('id'), 10, 200);
R.text(5, 100, $(div).find('span').text())
.rotate(-90, true);
$(div).find('span').hide();
});
});

With this code, I am able to get this result :

_{(source: ompldr.org)}

As you can see, the headers are rotated but not aligned to the bottom of their cells, I'd like them to be. I tried using :

vertical-align: bottom;

But that didn't change anything.

And also to add this after or before the .rotate instruction in the JS code :

.attr({'text-anchor': 'end'});

When placed before the .rotate instruction, this just made the headers disappear. When placed after the .rotate instruction, I had better results, but still not what I want, as the headers are vertically aligned based on their last character :

Vertical Align Attempt http://ompldr.org/vZnhiOQ

How could I align these headers to the bottom of the first row, in order to get such result ?

Thanks,

Hugo

Answer 1

Instead of

.attr({'text-anchor': 'end'});

before the rotation, use this one to align the text at its start

.attr({'text-anchor': 'start'});

MDN docu for text-anchor