Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: direction, Kategorien: Bildschirm­darstellung (allgemein), Visual formatting model (CSS 2.1), Writing Modes (CSS 3)

Schreibrichtung

Bestimmt die Schreibrichtung von links nach rechts oder von rechts nach links.

CSS-Eigenschaft: direction
KurzbeschreibungWerteStandardwertKategorieHinweis
Schreibrichtung
  • ltr
  • rtl
  • inherit
ltr
Allgemein:
Bildschirm­darstellung
CSS 2.1:
Visual formatting model
CSS 3:
Writing Modes
 

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.
Browserunterstützung von direction
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu direction:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    cursor


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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 4.521 sec.

Browser-Marktanteile