direction CSS property

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;
}

Syntax

/* Keyword values */
direction: ltr;
direction: rtl;

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

Werte

Diese Eigenschaft wird durch einen der folgenden Schlüsselwortwerte angegeben:

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 Eigenschaft direction bei Inline-Level-Elementen Wirkung zeigt, muss der Wert der Eigenschaft unicode-bidi embed oder override sein.

Beschreibung

Die Eigenschaft legt die grundlegende Textrichtung von Block-Level-Elementen und die Richtung der durch die Eigenschaft unicode-bidi erzeugten Einbettungen fest. Sie bestimmt außerdem die standardmäßige Ausrichtung von Text und Block-Level-Elementen sowie die Richtung, in der Zellen innerhalb einer Tabellen- oder Grid-Zeile angeordnet werden.

Anders als das HTML-Attribut dir wird die Eigenschaft direction nicht von Tabellenspalten an Tabellenzellen vererbt. Die CSS-Vererbung folgt dem Dokumentbaum, und Tabellenzellen befinden sich innerhalb von Zeilen, nicht aber innerhalb von Spalten.

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

Formale Definition

Formale Syntax

direction = 
  ltr  |
  rtl  

Beispiele

Richtung von rechts nach links festlegen

Im folgenden Beispiel werden zwei Textzeichenfolgen mit direction: rtl angezeigt. Während der arabische Text mit dieser Einstellung korrekt dargestellt wird, steht der Punkt im englischen Text nun an einer ungewöhnlichen Stelle.

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

<blockquote>
  <p>This paragraph is in English but incorrectly goes right to left.</p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
</blockquote>

Spezifikationen

Browser-Kompatibilität

Siehe auch

• unicode-bidi
• writing-mode
• SVG-Attribut direction
• Das globale HTML-Attribut dir
• Vertikale Formularsteuerelemente erstellen
• Mit unterschiedlichen Textrichtungen umgehen