Diedirection-Eigenschaft vonCSS legt die Richtung von Text, Tabellen- und Gitterspalten und horizontalem Überlauf fest. Verwenden Siertl für Sprachen, die von rechts nach links geschrieben werden (wie Hebräisch oder Arabisch) undltr für solche, die von links nach rechts geschrieben werden (wie Englisch und die meisten anderen Sprachen).

Beachten Sie, dass die Textrichtung normalerweise innerhalb eines Dokuments definiert wird (z. B. mit demHTML-Attributdir) anstatt durch direkte Verwendung derdirection-Eigenschaft.

Probieren Sie es aus

direction: ltr;

direction: rtl;

<section>  <div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  padding: 0.75em;  width: 80%;  max-height: 300px;  display: flex;}#example-element > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;  margin: 10px;  flex: 1;}

Syntax

/* Keyword values */direction: ltr;direction: rtl;/* Global values */direction: inherit;direction: initial;direction: revert;direction: revert-layer;direction: unset;

Werte

ltr

Text und andere Elemente verlaufen von links nach rechts. Dies ist der Standardwert.

rtl

Text und andere Elemente verlaufen von rechts nach links.

Damit diedirection-Eigenschaft Auswirkungen auf Inline-Elemente hat, muss der Wert derunicode-bidi-Eigenschaftembed oderoverride sein.

Beschreibung

Die Eigenschaft legt die grundlegende Textrichtung von Block-Elementen und die Richtung von Einbettungen fest, die von der Eigenschaftunicode-bidi erstellt werden. Sie legt auch die Standard-Ausrichtung von Text, Block-Elementen und die Richtung fest, in der Zellen innerhalb einer Tabellen- oder Rasterzeile verlaufen.

Anders als dasdir-Attribut in HTML wird diedirection-Eigenschaft nicht von Tabellenspalten auf Tabellenzellen vererbt, da die CSS-Vererbung dem Dokumentenbaum folgt und Tabellenzellen in Zeilen, nicht aber in Spalten enthalten sind.

Die Eigenschaftendirection undunicode-bidi sind die einzigen beiden Eigenschaften, die nicht von der Kurzschreibweise-Eigenschaftall beeinflusst werden.

Formale Definition

Formale Syntax

direction =
ltr|
rtl

Beispiele

Festlegen der Rechts-nach-Links-Richtung

Im folgenden Beispiel sind zwei Textzeichenfolgen, die beide mitdirection: rtl angezeigt werden. Während der arabische Text mit dieser Einstellung korrekt angezeigt wird, hat der englische Text nun einen Punkt an einer ungewöhnlichen Stelle.

blockquote {  direction: rtl;  width: 300px;}

<blockquote>  <p>This paragraph is in English but incorrectly goes right to left.</p>  <p></p></blockquote><blockquote>  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>  <p></p></blockquote>

Spezifikationen

Browser-Kompatibilität

Siehe auch

• unicode-bidi
• writing-mode
• SVG-Attributdirection
• Das HTML-Globale Attributdir
• Erstellen vertikaler Formularsteuerungen
• Umgang mit unterschiedlichen Textrichtungen