Die writing-mode Eigenschaft

Die Eigenschaft writing-mode legt die vertikale oder horizontale Textrichtung auf der Seite fest. Die Werte können horizontal-tb (horizontal von links nach rechts und von oben nach unten), vertical-rl (vertikal von oben nach unten und von rechts nach links), vertical-lr (vertikal von oben nach unten und von links nach rechts) sein.

Syntax

Selector {
	writing-mode: horizontal-tb oder vertical-rl oder vertical-lr;
}

Beispiel

Lassen Sie uns unseren Text horizontal von links nach rechts und von oben nach unten ausrichten:

<p>
	Text
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	writing-mode: horizontal-tb;
	font-size: 2em;
	margin-top: 0;
}

Beispiel

Lassen Sie uns nun die Richtung ändern, vertikal von oben nach unten und von rechts nach links:

<p>
	Text
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	writing-mode: vertical-rl;
	font-size: 2em;
	margin-top: 0;
}

Beispiel

Lassen Sie uns unseren Text vertikal von oben nach unten und von links nach rechts ausrichten:

<p>
	Text
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	writing-mode: vertical-lr;
	font-size: 2em;
	margin-top: 0;
}

Siehe auch

die Eigenschaft font-kerning,
die den Schriftkern festlegt
die Eigenschaft text-orientation,
die die Ausrichtung der Zeichen im vertikalen Text festlegt