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 normalerweise innerhalb eines Dokuments festgelegt wird (z. B. mit dem HTML-Attribut dir) und nicht durch direkte Verwendung der direction-Eigenschaft.

Die Eigenschaft legt die Basis-Textrichtung von Block-Elementen und die Richtung der durch die unicode-bidi-Eigenschaft erstellten Einbettungen fest. Sie legt auch die Standardausrichtung von Text, Block-Elementen und die Richtung fest, in der sich Zellen innerhalb einer Tabelle oder Rasterzeile bewegen.

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

Die direction- und unicode-bidi-Eigenschaften sind die einzigen beiden Eigenschaften, die nicht von der all Kurzschreibweise beeinflusst werden.

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 gehen von links nach rechts. Dies ist der Standardwert.

rtl

Text und andere Elemente gehen von rechts nach links.

Damit die direction-Eigenschaft irgendeine Wirkung auf Inline-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 folgenden Beispiel sind zwei Textzeichenfolgen, die beide mit direction: 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-Attribut direction
• Das HTML-Globale Attribut dir
• Erstellen vertikaler Formularelemente
• Umgang mit unterschiedlichen Textrichtungen