Luego de mucho trabajar ya dimos con el resultado de este dilema que muchos usuarios de nuestro sitio web presentan. Si quieres aportar algo no dejes de aportar tu conocimiento.
Solución:
combiné writing-mode y rotation:
.rotated
writing-mode: tb-rl;
transform: rotate(-180deg);
Text from bottom with working width/heightEsto me funciona sin mal width y height ajustes dentro de las celdas de la tabla.
Edición importante de 2020:
paso 1) Mire https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode, ctrl/cmd-F para “Resultado”. Esta tabla reflejará su navegador (que puede tener una implementación incorrecta). Mire la tabla inmediatamente debajo de ella. Esa mesa es lo que las cosas debería parece.
Solución:
Para asegurarse de que su solución esté preparada para el futuro:
- Mire la columna correspondiente, que será “Escritura horizontal”, a menos que esté codificando, por ejemplo, en un idioma asiático.
- Encuentre una fila que se adapte a sus necesidades en términos de tamaño del elemento HTML, Y esté implementada correctamente (aparece aproximadamente igual) en la segunda tabla debajo de ella. Por ejemplo
writing-mode:vertical-rl;actualmente funcionaría en Chrome hasta que otros se implementen correctamente en el motor Blink (pero si basó su respuesta ensideways-lrse rompería una vez que Blink implemente correctamente este comportamiento, ya que las dos filas no son iguales). - opcional: conjunto
transform-origina algo, tal vez usarcalc(...)basado en porcentajes y/o algo más - llevar a cabo
transform:rotate(180deg)o algo. Esto debería solucionar los problemas con el diseño que tendría la mayoría de las personas, lo que haría que buscaran esta respuesta. Si uno tiene problemas de animación, ese es un tema aparte.
(también tb-rl está en desuso ahora)
.rotate
transform: rotate(270deg);
Esto debería ser suficiente para rotar el texto verticalmente de abajo hacia arriba, aplicarlo en el div que contiene el texto. Si está utilizando el modo de escritura: vertical-rl/lr junto con esto, eso puede cambiarlo al revés.