1

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 :

Rotated Headers not aligned
(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

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
pistache
  • 5,782
  • 1
  • 29
  • 50

1 Answers1

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

Sirko
  • 72,589
  • 19
  • 149
  • 183
  • If put before the rotation, this makes the header disappear. If put after the rotation, it works, thank you :) Don't know why I didn't try this combination. – pistache Oct 18 '12 at 10:32
  • 2
    @pistache The disappearing in my opinion is caused by the center of rotation. you basically just rotate the text to outside the viewport. You could adjust the center and have it work the other way around. – Sirko Oct 18 '12 at 10:37