how to create vertical table heading text with html5 canvas?

Question

Does anyone know if it's possible to create vertical text in a html5 canvas and then have the canvas resize to the content?

I've seen posts about adding text and rotating it but don't know how to have the canvas resize automatically to it afterwards.

Here is a link to a page with one of the tables: here

I basically want to replace the top headings with vertical text in different canvases. The team names need to be dynamic and I'd rather not have them generated as jpg's.

Thanks!

Answer 1

In then end I re-wrote it so it did exactly what I wanted and it's at http://wncba.co.uk/results/javascript/vertical-text.js if anyone wants to use it.

Here is a page that shows it working: http://wncba.co.uk/results/?action=navigate&season=2012&league_id=2&division_id=7&nav_key=4e16159770efb07ac6e6bae4f86c7dc5

Answer 2

It is possible, see quick fiddle for this: http://jsfiddle.net/dev_null_dweller/qyfyb/

Answer 3

It's possible though tricky to rotate text with CSS3 Transform : http://jsfiddle.net/PhilippeVay/hXnsT/2/
Each text in header cell is in a span element. This span is constrained in width and the grand-parent (tr element, but it could be the th parent as well) has an height equal to this width.
Text could be rotated in IE8 and below as well with the help of the writing-mode property but the text in the larger first column needs to be moved specifically in IE.

Beside this, header cells were tagged with th elements (with scope attribute for better accessibility) rather than td elements with .heading class.