CSS Writing Modes

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Wir haben vor nicht allzu langer Zeit einen kleinen Trick geteilt, wie man die `writing-mode`-Eigenschaft verwendet, um einen Titel vertikal zu setzen. Während dies ein nützlicher Trick ist, ist es nur die Spitze des Eisbergs dieser Eigenschaft. Jen Simmons gräbt tiefer und erklärt, was wirklich vor sich geht.

Es gibt eine bestimmte Art und Weise, wie Elemente auf Websites fließen. Ohne besondere Maßnahmen schieben Blockelemente von oben nach unten. Inline-Elemente verlaufen von links nach rechts. In `writing-mode` würde dies durch (die Standardeinstellung) `horizontal-tb` (horizontaler Inline-Fluss, "von oben nach unten" Blockfluss) ausgedrückt werden. Verschiedene Sprachen und Kulturen gehen mit Layout anders um, daher ermöglicht diese Eigenschaft eine umfassendere Steuerung als das `dir`-Attribut. Zum Beispiel `vertical-rl` (vertikaler Inline-Fluss, "von rechts nach links" Blockfluss).

Direkter Link →