CSS Writing Mode: Eine Reise Durch Textausrichtung

Hallo, ambitionierte Web-Entwickler! Heute machen wir uns auf eine aufregende Entdeckungsreise in die Welt des CSS Writing Mode. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch diese faszinierende Eigenschaft zu führen, die deinen Text buchstäblich kopfüber drehen kann! Also, sichern Sie sich und tauchen Sie ein!

Was ist CSS Writing Mode?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was es mit dem Writing Mode auf sich hat. Stell dir vor, du liest ein Buch. In Englisch lesen wir normalerweise von links nach rechts und von oben nach unten. Aber was ist, wenn du ein traditionelles japanisches Buch liest? Der Text verläuft vertikal von oben nach unten und von rechts nach links. Genau hier kommt der CSS Writing-Mode ins Spiel!

Die Eigenschaft writing-mode in CSS ermöglicht es uns, die Richtung zu steuern, in der wir Text und andere inline-Inhalte anzeigen. Es ist wie ein magischer Stock, der deinen Text in verschiedene Richtungen tanzen lassen kann!

Mögliche Werte

Schauen wir uns die verschiedenen Werte an, die wir mit der Eigenschaft writing-mode verwenden können:

Wert	Beschreibung
horizontal-tb	Text fließt horizontal von links nach rechts, von oben nach unten
vertical-rl	Text fließt vertikal von oben nach unten, von rechts nach links
vertical-lr	Text fließt vertikal von oben nach unten, von links nach rechts
sideways-rl	Text fließt vertikal von oben nach unten, alle Zeichen um 90° im Uhrzeigersinn gedreht
sideways-lr	Text fließt vertikal von oben nach unten, alle Zeichen um 90° gegen den Uhrzeigersinn gedreht

Gültig für

Die Eigenschaft writing-mode kann auf alle Elemente angewendet werden, einschließlich der Pseudo-Elemente ::first-letter und ::first-line. Es ist wie eine universelle Fernbedienung für Textrichtungen!

DOM-Syntax

Nun sehen wir, wie wir writing-mode in unserem CSS verwenden können:

element {
writing-mode: value;
}

Einfach, oder? Tauchen wir ein und schauen uns jeden Wert an und sehen, wie sie funktionieren!

CSS writing-mode - horizontal-tb Wert

Dies ist der Standard-Writing-Mode für die meisten Sprachen, einschließlich Englisch. Sehen wir uns ein Beispiel an:

<div class="horizontal-tb">
<p>Dies ist horizontaler Text von links nach rechts, von oben nach unten.</p>
</div>

.horizontal-tb {
writing-mode: horizontal-tb;
}

Dies wird den Text genau so anzeigen, wie du diesen Artikel liest. Nichts Besonderes, aber es ist unser Ausgangspunkt!

CSS writing-mode - vertical-rl Wert

Nun drehen wir die Dinge um:

<div class="vertical-rl">
<p>Dieser Text ist vertikal, von rechts nach links!</p>
</div>

.vertical-rl {
writing-mode: vertical-rl;
height: 200px;
}

Voilà! Dein Text läuft jetzt vertikal von oben nach unten, und mehrere Zeilen beginnen rechts und bewegen sich nach links. Es ist, als ob du ein traditionelles Japanisch- oder Chinesisch-Rollenspiel liest!

CSS writing-mode - vertical-lr Wert

Probieren wir den linken nach rechts vertikalen Modus:

<div class="vertical-lr">
<p>Dieser Text ist vertikal, von links nach rechts!</p>
</div>

.vertical-lr {
writing-mode: vertical-lr;
height: 200px;
}

Jetzt ist dein Text vertikal, aber er beginnt auf der linken Seite. Es ist, als ob du eine mongolische Schrift liest!

CSS writing-mode - sideways-rl Wert

Bereit für einige Akrobatik? Probieren wir sideways-rl:

<div class="sideways-rl">
<p>Dieser Text ist waagerecht, von rechts nach links!</p>
</div>

.sideways-rl {
writing-mode: sideways-rl;
height: 200px;
}

Dies dreht jedes Zeichen um 90° im Uhrzeigersinn. Es ist, als ob dein Text einen Salti macht!

CSS writing-mode - sideways-lr Wert

Und jetzt für den letzten Salto:

<div class="sideways-lr">
<p>Dieser Text ist waagerecht, von links nach rechts!</p>
</div>

.sideways-lr {
writing-mode: sideways-lr;
height: 200px;
}

Diesmal ist jedes Zeichen um 90° gegen den Uhrzeigersinn gedreht. Es ist, als ob dein Text einen Rückwärtssalto macht!

CSS writing-mode - Ästhetische Verwendung (Englische Sprache)

Während diese verschiedenen Writing-Mode für die Unterstützung verschiedener Sprachen entscheidend sind, können sie auch kreativ in Englisch verwendet werden. Hier ist ein lustiges Beispiel:

<div class="book-spine">
<h2>Das CSS Abenteuer</h2>
</div>

.book-spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 300px;
width: 50px;
background-color: #f0f0f0;
padding: 10px;
}

Dies erstellt einen vertikalen Text, der wie der Rücken eines Buches auf einem Regal aussieht. Cool, oder?

CSS writing-mode - Verwandte Eigenschaften

Um die Textausrichtung vollständig zu steuern, möchtest du diese Eigenschaften zusammen mit writing-mode verwenden:

Eigenschaft	Beschreibung
text-orientation	Definiert die Orientierung der Textzeichen
direction	Setzt die Richtung von Text, inline-Elementen und Tabellenspalten
unicode-bidi	Überschreibt das bidirektionale Algorithmus für Text

Hier ist ein schnelles Beispiel:

.vertical-mixed {
writing-mode: vertical-rl;
text-orientation: mixed;
}

Dies ermöglicht vertikalen Text, bei dem einige Zeichen (wie lateinische Buchstaben) gedreht werden, während andere (wie chinesische Zeichen) aufrechter bleiben.

Und das war's, Leute! Wir haben die faszinierende Welt des CSS Writing Mode durchquert. Denke daran, das Web ist eine globale Plattform, und diese Eigenschaften helfen dabei, es für jeden zugänglich und schön zu machen, unabhängig von ihrer Sprache oder Schrift.

Beim nächsten Mal, wenn du eine Webseite baust, warum probierst du nicht, mit diesen Eigenschaften herumzuspielen? Vielleicht erstellst du ja etwas unerwartet Awesome! Frohes Coden und möge dein Text immer in die richtige Richtung fließen!

Credits: Image by storyset