direction

Probieren Sie es aus

direction: ltr;

direction: rtl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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;
}

Beachten Sie, dass die Textrichtung üblicherweise innerhalb eines Dokuments definiert wird (z. B. mit dem HTML dir Attribut) anstatt durch die direkte Verwendung der direction Eigenschaft.

Die Eigenschaft legt die Basistextrichtung von Block-Elementen und die Richtung von Einbettungen fest, die durch die Eigenschaft unicode-bidi erstellt werden. Sie legt auch die standardmäßige Ausrichtung von Text, Block-Elementen und die Richtung fest, in der Zellen innerhalb einer Tabellen- oder Grid-Zeile fließen.

Im Gegensatz zum dir Attribut in HTML wird die direction Eigenschaft nicht von Tabellenspalten in Tabellenzellen vererbt, da die CSS-Vererbung der Dokumentstruktur folgt und Tabellenzellen sich innerhalb von Zeilen, aber nicht innerhalb von Spalten befinden.

Die direction und unicode-bidi Eigenschaften sind die einzigen zwei Eigenschaften, die nicht von der Kurzschreibweise all betroffen sind.

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 die direction Eigenschaft Auswirkungen auf inline-level-Elemente hat, muss der Wert der unicode-bidi Eigenschaft embed oder override sein.

Formale Definition

Formale Syntax

direction = 
  ltr  |
  rtl  

Beispiele

Einstellung der Rechts-nach-Links-Richtung

Im untenstehenden Beispiel befinden sich zwei Textstrings, die beide mit direction: rtl angezeigt werden. Während der arabische Text mit dieser Einstellung korrekt angezeigt wird, befindet sich beim englischen Text nun ein 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 direction Attribut
• Das HTML dir globales Attribut
• Erstellen von vertikalen Formularsteuerelementen
• Umgang mit unterschiedlichen Textrichtungen