在RaphaelJS中,如何将旋转文本对齐到底部?

时间:2012-10-18 10:23:31

标签: javascript rotation alignment raphael vertical-alignment

使用以下代码,并受到this问题的启发,我设法在HTML表格中使用垂直列标题,与Internet Explorer兼容。现在我需要设置的最后一个细节是标题垂直对齐:我想将标题固定在行的底部。

$(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();
});
});

使用此代码,我可以得到这个结果:

Rotated Headers not aligned http://ompldr.org/vZnhhdw

正如您所看到的,标题已旋转但未与其单元格的底部对齐,我希望它们是。我尝试使用:

vertical-align: bottom;

但这并没有改变任何事情。

并且还要在JS代码中的.rotate指令之后或之前添加它:

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

当放在.rotate指令之前时,这只会使标题消失。当放在.rotate指令之后,我有更好的结果,但仍然不是我想要的,因为标题是根据它们的最后一个字符垂直对齐的:

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

如何将这些标题与第一行的底部对齐,以获得such结果?

谢谢,

雨果

1 个答案:

答案 0 :(得分:1)

而不是

.attr({'text-anchor': 'end'});
在旋转之前

,使用此文本在开始时对齐文本

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

MDN docu for text-anchor