CSS-Eigenschaft: direction, Kategorien: Bildschirmdarstellung (allgemein), Visual formatting model (CSS 2.1), Writing Modes (CSS 3)
Schreibrichtung
Bestimmt die Schreibrichtung von links nach rechts oder von rechts nach links.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Schreibrichtung |
| ltr |
|
Verwandte Eigenschaften aus der Kategorie: Bildschirmdarstellung (allgemein), Visual formatting model (CSS 2.1), Writing Modes (CSS 3):
- align-content
- align-items
- align-self
- bottom
- box-decoration-break
- box-shadow
- clear
- clip
- column-count
- column-fill
- column-width
- columns
- cursor
- Aktuelle Seite: direction
- display
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- justify-content
- left
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- position
- resize
- right
- rotation
- rotation-point
- text-overflow
- top
- unicode-bidi
- visibility
- z-index
- zoom
Folgendes ist beim Einsatz von direction zu beachten:
- ltr (Standard) steht für "left to right", rtl für "right to left".
- direction ist abhängig von der Bidirektionales Schreibunterstützung, eine ausführliche Beschreibung ist unter unicode-bidi zu finden. Ohne eine Angabe von unicode-bidi: bidi-override werden lediglich Textblöcke verdreht, die eigentlichen Worte bleiben in ihrer richtigen Schreibrichtung belassen. Eine Angabe von rtl wirkt lediglich wie eine Rechtsausrichtung des Textes.
- Im Beispiel Nr. 4 wird deutlich, dass direction: rtl die Tabellenzellen von rechts nach links anordnet. Die eigentliche Schreibrichtung innerhalb der Zellen bleibt allerdings unberührt. Zahlen selber haben keine originäre Schreibrichtung. Diese werden anders wie Schrift umgekehrt dargestellt.
- Ein weiterer Effekt von direction ist im Beispiel Nr. 5 zu sehen. Ein Text läuft nicht links, sondern rechts aus dem Block-Element raus, wenn die Schreibrichtung per rtl gesetzt ist.
- Zwei verschachtelte direction-Anweisungen führen beim Internet Explorer und Opera, derweil auch beim Firefox dazu, dass ein Scrollbalken im Falle des overflow: scroll links dargestellt wird. Im Beispiel Nr. 6 zu beobachten.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu direction:
- W3C Spezifikation:
http://dev.w3.org/csswg/css3-writing-modes/#direction
Beispiele
HTML:
<div>
<p>eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn </p>
</div>CSS:
div {
border: 1px solid black;
}
/* Standarddarstellung. */Beispiel Nr. 1 So sieht's aus:
eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn
HTML:
<div>
<p class="doRtL">eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn</p>
</div>CSS:
div p.doRtL {
direction: rtl;
}
/* Die umgekehrte Schreibrichtung sieht erst mal nur wie eine Rechtsausrichtung aus. Die Worte selber bleiben richtig geschrieben. */Beispiel Nr. 2 So sieht's aus:
eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn
HTML:
<div>
<p class="doRtL doUnicode">eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn</p>
</div>CSS:
.doUnicode {
unicode-bidi: bidi-override;
}
/* Erst in Kobmination mit einer unicode-bidi-Angabe wird die Schreibrichtung komplett gedreht. Dieses Beispiel dient eher der Theorie, in der Praxis ist das so gut wie nicht zu finden. */Beispiel Nr. 3 So sieht's aus:
eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn
HTML:
<table class="doRtL">
<tr>
<td>eins eins</td>
<td>eins zwei</td>
<td>eins drei</td>
</tr>
<tr>
<td>zwei eins</td>
<td>zwei zwei</td>
<td>zwei drei</td>
</tr>
<tr>
<td>drei eins</td>
<td>drei zwei</td>
<td>drei drei</td>
</tr>
<tr>
<td>4 1</td>
<td>4 2</td>
<td>4 3</td>
</tr>
</table>CSS:
table.doRtL {
direction: rtl;
border: 2px solid #0000FF;
}
td {
border: 1px solid #00C0FF;
padding: 10px;
}
/* Bei einer Schreibrichtung von rechts nach links werden Tabellenzellen umgekehrt angeordnet. Die eigentliche Schreibrichtung in den Zellen bleibt allerdings erhalten. Zahlen hingegen haben keine native Schreibrichtung, diese werden von rechts nach links dargestellt. */Beispiel Nr. 4 So sieht's aus:
| eins eins | eins zwei | eins drei |
| zwei eins | zwei zwei | zwei drei |
| drei eins | drei zwei | drei drei |
| 4 1 | 4 2 | 4 3 |
HTML:
<div>
<p class="doRtL doWidth">Donaudampfschifffahrtskapitän</p>
</div>CSS:
p.doWidth {
width: 120px;
border: 2px solid red;
margin: 20px auto;
padding: 5px;
}
/* Ist die Schreibrichtung rtl, ist der Überfluss nicht mehr links, sondern rechts zu sehen. */Beispiel Nr. 5 So sieht's aus:
Donaudampfschifffahrtskapitän
HTML:
<div class="doRtL">
<p class="doLtR">eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn</p>
</div>CSS:
div.doRtL {
direction: rtl;
height: 150px;
overflow-y: scroll;
}
p.doLtR {
direction: ltr;
height: 300px;
}
/* Zwei verschachtelte DIV, wovon das Äußere ein direction von rtl, das innere von ltr hat, bewirken einen Scrollbalken links (nur IE, FF, Opera). */Beispiel Nr. 6 So sieht's aus:
eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn eins zwei drei vier fünf sechs sieben acht neun zehn
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!