In meinen früheren Projekten habe ich Text immer mit transform: rotate() gedreht, wenn ich eine senkrechte Beschriftung gebraucht habe. Das hat zwar funktioniert, aber es fühlte sich immer wie ein kleiner Workaround an: der Text war eigentlich horizontal, nur eben „grafisch“ gekippt.
Nun habe ich bei einem Projekt mal die writing-mode Lösung ausprobiert. Damit kann ich den Textfluss direkt auf vertikal stellen, etwa mit writing-mode: vertical-rl;. In Kombination mit text-orientation: mixed; bleibt die Leserichtung korrekt, und der Text verhält sich viel natürlicher im Layout. Kleine Verschiebungen oder Anpassungen an der Position können dann einfach mit translate(0 0) gelöst werden, ohne den Text künstlich zu drehen.
translate: 30px 0;
writing-mode: vertical-rl;Ich hatte offensichtlich seit vielen Jahren nicht mehr das verlangen, Texte zu verdrehen 🙈 oder mir die CSS Writing Modes zu Gemüte zu führen. 🤷♂️
Das Ergebnis: Der Text ist semantisch sauber, barrierefreier und fügt sich deutlich besser ins Layout ein als mit der rotate() Variante.