CSS text-orientation-Eigenschaft
Die text-orientation-Eigenschaft bestimmt die Ausrichtung der Zeichen in einer Zeile.
Sie hat fünf Werte: mixed, upright, sideways, sideways-right und use-glyph-orientation. Alle funktionieren in vertikalen typografischen Modi. Der Wert sideways-left wurde aus der Spezifikation entfernt, und sideways-right wird nun nur noch als Alias für sideways geführt. Für nicht-vertikale Schreibsysteme wurden stattdessen die Werte sideways-lr und sideways-rl zur writing-mode-Eigenschaft hinzugefügt.
INFO
Die text-orientation-Eigenschaft hat nur dann eine Auswirkung, wenn writing-mode auf „vertical“ steht.
| Anfangswert | mixed |
|---|---|
| Gilt für | Alle Elemente, außer Tabellenzeilengruppen, Zeilen, Spaltengruppen und Spalten. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.textOrientation = "upright"; |
Syntax
CSS text-orientation-Werte
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;Beispiel für die text-orientation-Eigenschaft mit dem Wert „mixed“:
CSS text-orientation-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Ergebnis
Beispiel für die text-orientation-Eigenschaft mit dem Wert „upright“:
CSS text-orientation mit upright-Wert, Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-lr;
text-orientation: upright;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Beispiel für die text-orientation-Eigenschaft:
CSS text-orientation weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ffffff;
color: #000000;
font-size: 1.1em;
}
.example {
background: #cccccc;
color: #fff;
padding: 3em;
margin: 40px auto 0;
width: 400px;
max-width: 400px;
display: flex;
}
h1 {
color: #8ebf42;
margin: 0.15em 0.75em 0 0;
font-family: 'Bungee Shade', cursive;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: upright;
-webkit-font-feature-settings: "vkrn", "vpal";
font-feature-settings: "vkrn", "vpal";
}
p {
margin: 0;
line-height: 1.5;
font-size: 1.15em;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<div class="example">
<h1>Lorem Ipsum</h1>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| mixed | Horizontale Schriftzeichen werden aufrecht angeordnet, während vertikale Schriftzeichen um 90° im Uhrzeigersinn gedreht werden. Dies ist der Standardwert dieser Eigenschaft. |
| upright | Alle Zeichen werden unabhängig von ihrer Schriftart aufrecht angeordnet. Dies hat keinen Einfluss auf die Eigenschaft direction. |
| sideways | Die Zeichen werden so angeordnet, wie sie horizontal wären, jedoch ist die gesamte Zeile um 90° im Uhrzeigersinn gedreht. |
| sideways-right | Ein Alias für sideways, der aus Kompatibilitätsgründen beibehalten wird. |
| use-glyph-orientation | Veraltet. Wurde zuvor den veralteten SVG-Eigenschaften glyph-orientation-vertical und glyph-orientation-horizontal zugeordnet. Wird in modernen Browsern nicht mehr unterstützt. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt den Wert von seinem übergeordneten Element. |
Praxis
Welche CSS-Eigenschaften werden verwendet, um die vertikale Ausrichtung des Textes zu steuern?