Как создать вертикальный текст заголовка таблицы с помощью html5 canvas?

Question

Кто-нибудь знает, возможно ли создать вертикальный текст на холсте html5, а затем изменить размер холста до содержимого?

Я видел сообщения о добавлении и повороте текста, но не знаю, как впоследствии автоматически изменить размер холста.

Вот ссылка на страницу с одной из таблиц: здесь

Я хочу заменить верхние заголовки вертикальным текстом на разных холстах. Названия команд должны быть динамическими, и я бы предпочел, чтобы они не генерировались как jpg.

Спасибо!

Answer 1

Возможно, см. Краткую справку для этого: http://jsfiddle.net/dev_null_dweller/qyfyb/

Answer 2

В конце концов я переписал его, чтобы он сделал именно то, что хотел, и на http://wncba.co.uk/results/javascript/vertical-text.js, если кто-то захочет его использовать.

Вот страница, показывающая, как она работает: http://wncba.co.uk/results/?action=navigate&season=2012&league_id=2&division_id=7&nav_key=4e16159770efb07ac6e6bae4f86c7dc5

Answer 3

Хотя сложно повернуть текст с помощью CSS3 Transform: http://jsfiddle.net/PhilippeVay/hXnsT/2/
Каждый текст в ячейке заголовка находится в элементе span.Этот промежуток ограничен по ширине, и его родительский элемент (элемент tr, но может быть и родительским элементом) имеет высоту, равную этой ширине.
Текст можно также вращать в IE8 и ниже с помощьюсвойство writing-mode , но текст в большем первом столбце необходимо перемещать специально в IE.

Кроме того, ячейки заголовка были помечены элементами th (с атрибутом scope длялучшая доступность), а не td элементов с классом .heading.