¿Cómo crear texto de encabezado de tabla vertical con lienzo HTML5?

Question

¿Alguien sabe si es posible crear texto vertical en un lienzo HTML5 y luego hacer que el lienzo cambie el tamaño del contenido?

He visto publicaciones sobre cómo agregar texto y girarlo, pero no sé cómo hacer que el lienzo cambie de tamaño automáticamente después.

Aquí hay un enlace a una página con una de las tablas: aquí

Básicamente quiero reemplazar los encabezados superiores con texto vertical en diferentes lienzos. Los nombres del equipo deben ser dinámicos y prefiero no tenerlos generados como JPG.

¡Gracias!

Answer 1

En el final, lo reescribí para que hizo exactamente lo que quería y es en http://wncba.co.uk/results/javascript/vertical-text.js Si alguien quiere usarlo.

Aquí hay una página que muestra que funciona: http://wncba.co.uk/results/?action=navigate&season=2012&league_id=2&division_id=7&nav_key=4e16159770efb07ac6e6bae4f86c7dc5

Answer 2

Es posible, ver el violín rápido para esto: http://jsfiddle.net/dev_null_dweller/qyfyb/

Answer 3

Es posible aunque difícil rotar el texto con transformación CSS3: http://jsfiddle.net/philippevay/hxnst/2/
Cada texto en la celda de encabezado está en un span elemento. Este tramo está limitado en el ancho y el abuelo (elemento TR, pero también podría ser el padre) tiene una altura igual a este ancho.
El texto podría rotarse en IE8 y abajo, así como la ayuda del writing-mode propiedad Pero el texto en la primera columna más grande debe moverse específicamente en IE.

Además de esto, las células de encabezado fueron etiquetadas con th elementos (con atributo de alcance para una mejor accesibilidad) en lugar de td elementos con .heading clase.