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 definiert wird (z.B. mit dem HTML dir Attribut) anstatt durch unmittelbare Verwendung der direction Eigenschaft.

Die Eigenschaft legt die Basis-Textrichtung von Block-Elementen sowie die Richtung von Einbettungen fest, die durch die unicode-bidi Eigenschaft erstellt wurden. Sie setzt auch die Standardausrichtung von Text, Block-Elementen und die Richtung des Flusses von Zellen innerhalb einer Tabellen- oder Rasterzeile.

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

Die direction und unicode-bidi Eigenschaften sind die einzigen zwei 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 verlaufen von links nach rechts. Dies ist der Standardwert.

rtl

Text und andere Elemente verlaufen von rechts nach links.

Damit die direction Eigenschaft einen Effekt 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 dargestellt 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 direction Attribut
• Das HTML dir globale Attribut
• Erstellen von vertikalen Formularelementen
• Umgang mit unterschiedlichen Textrichtungen