Text drehen in einem Grid-Layout

[Gunnar Bittersmann]

@@Regina Schaukrug

Das (und wie) es geht hat Gunnar Dir mit dem "display:inline" bereits richtig gezeigt.

display: inline ist nur ein Teil davon. Der andere ist, eben nicht den Text um 90° zu drehen, sondern writing-mode: vertical-rl (bzw. das IE-Pendant) zu verwenden und dann bei Bedarf den Text um 180° zu drehen (was an den Ausmaßen der Box nichts ändert).

Dabei fällt mir noch ein: Die Drehung um 180° darf man natürlich nur machen, wenn writing-mode: vertical-rl (bzw. das IE-Pendant) unterstützt wird. Das sollte also in einem @supports-Block stehen. Nachtrag: Im Pen jetzt gemacht.

Man kann sich überlegen, ob man den Text in dem Fall dann vertikal, aber andersrum (nicht um 180° gedreht) möchte oder gar nicht vertikal.

Im zweiten Fall kommt writing-mode: vertical-rl mit in den @supports-Block. Das IE-Pendant ist dann hinfällig.

LLAP 🖖