direction
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Warnung:
Wenn möglich, werden Autoren ermutigt, die Verwendung der CSS-Eigenschaft direction zu vermeiden und stattdessen das HTML-Globale Attribut dir zu verwenden.
Die direction-Eigenschaft von CSS legt die Richtung von Text, Tabellen- und Gitterspalten und horizontalem Überlauf fest. Verwenden Sie rtl für Sprachen, die von rechts nach links geschrieben werden (wie Hebräisch oder Arabisch) und ltr 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 dem HTML-Attribut dir) anstatt durch direkte Verwendung der direction-Eigenschaft.
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
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-Elemente hat, muss der Wert der unicode-bidi-Eigenschaft embed oder override sein.
Beschreibung
Die Eigenschaft legt die grundlegende Textrichtung von Block-Elementen und die Richtung von Einbettungen fest, die von der Eigenschaft unicode-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 das dir-Attribut in HTML wird die direction-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 Eigenschaften direction und unicode-bidi sind die einzigen beiden Eigenschaften, die nicht von der Kurzschreibweise-Eigenschaft all beeinflusst werden.
Formale Definition
| Anfangswert | ltr |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
direction =
ltr |
rtl
Beispiele
Festlegen 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
| Specification |
|---|
| CSS Writing Modes Level 4 # direction |
| Scalable Vector Graphics (SVG) 2 # DirectionProperty |
Browser-Kompatibilität
Siehe auch
unicode-bidiwriting-mode- SVG-Attribut
direction - Das HTML-Globale Attribut
dir - Erstellen vertikaler Formularsteuerungen
- Umgang mit unterschiedlichen Textrichtungen