I need to rotate text for column headings in a table. I've done so with SVG text, but am having formatting issues. I'd like the text to be "logically flush-left", which means with the -90 rotation, vertical-alignment: bottom, but it's always centered. Can you suggest anything?

My XHTML looks like this:


My td class looks like this:

td.s2res {    /*Responses for S2 table*/
  width: .25in;
  font: 9pt serif;
  border: solid medium;
}

Adding x= and y= settings to the text statement, or horizontal or vertical alignment to the css, doesn't seem to matter.

Any suggestions would be greatly appreciated.

David Smith

David

Probably a good place to start would be to put a border on the table cell and another border on the SVG element, so that you can see exactly how big they are and in what way they are currently aligned.

Thanks, Mike. Didn't have the wit to get a border around the text, but with enough fiddling about was able to get the result I wanted (vertical text starting at the bottom of the cell). If there's a more elegant solution I'd love to hear about it, but for the interim changing the svg code did the job:

<td class="s2hdr"><svg height="45"><g><text x="0" y="0" transform="rotate(-90)">1-2 days</text></g></svg></td>

All I changed for the table cell style was to add "vertical-align: bottom;".

Tweaking the svg statement's "height=" value for varying lengths of text does the equivalent of adjusting the font size.

David

Hi David,

I am doing the same thing as you were right now. I have to rotate the text for the top table cells. I have tried your approach but it seems not working for me. Is there anything else I need to do for it to work? Thanks in advance!

Peter