Die writing-modeEigenschaft ändert die Ausrichtung des Texts so, dass er je nach Sprache von oben nach unten oder von links nach rechts gelesen werden kann. Nehmen wir zum Beispiel an, wir möchten Text hinzufügen, der von oben nach unten und von rechts nach links gelesen wird, wie folgt:
.vertical-rl ( writing-mode: vertical-rl; )Siehe den Schreibmodus für Stifte: vertikal-rl von CSS-Tricks (@ css-Tricks) auf CodePen.
Dies ist am nützlichsten in Sprachen wie Chinesisch, Japanisch oder Koreanisch, in denen der Text häufig vertikal festgelegt wird. In der englischen Sprache ist es wahrscheinlicher, dass Sie diese Eigenschaft aus ästhetischen Gründen verwenden möchten, z. B. um eine Überschrift in einem Textblock wie folgt auszurichten:
Siehe den Stift YWBWGA von CSS-Tricks (@ css-Tricks) auf CodePen.
Werte
In den folgenden Beispielen habe ich den ersten Buchstaben des Textes rot gemacht, damit Sie leichter erkennen können, in welche Richtung Sie mit dem Lesen beginnen müssen.
horizontal-tb
Dies ist der Standardwert der Eigenschaft: Text wird von links nach rechts und von oben nach unten gelesen.
Siehe den Schreibmodus für Stifte: horizontal-tb von CSS-Tricks (@ css-Tricks) auf CodePen.
vertikal-rl
Der Text wird von rechts nach links und von oben nach unten gelesen:
Siehe den Schreibmodus für Stifte: vertikal-rl von CSS-Tricks (@ css-Tricks) auf CodePen.
vertikal-lr
Der Text wird von links nach rechts und von oben nach unten gelesen:
Siehe den Schreibmodus für Stifte: vertikal-rl von CSS-Tricks (@ css-Tricks) auf CodePen.
Ähnliche Links
- Vertikaler Text mit CSS3-Schreibmodi
- Ahmad Shadeed im Schreibmodus
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3* | 5,0-5,1 * |