direction
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Warnung:
Wo möglich, wird Autoren empfohlen, die CSS-Eigenschaft direction
zu vermeiden und stattdessen das globale Attribut dir
in HTML zu verwenden.
Die direction
-Eigenschaft von CSS legt die Textausrichtung, die Spaltenrichtung in Tabellen und Gittern sowie den horizontalen Überlauf fest. Verwenden Sie rtl
für Sprachen, die von rechts nach links geschrieben werden (wie Hebräisch oder Arabisch), und ltr
für Sprachen, die von links nach rechts geschrieben werden (wie Englisch und die meisten anderen Sprachen).
Probieren Sie es aus
Beachten Sie, dass die Textrichtung normalerweise innerhalb eines Dokuments definiert wird (z. B. mit dem HTML-Attribut dir
) und nicht direkt über die direction
-Eigenschaft.
Die Eigenschaft legt die Basistextrichtung von Blockelementen und die Richtung von Einbettungen fest, die durch die Eigenschaft unicode-bidi
erzeugt wurden. Sie setzt außerdem die Standardausrichtung von Text, Blockelementen und die Richtung, in die Zellen innerhalb einer Tabellen- oder Gitterreihe fließen.
Anders als das dir
-Attribut in HTML wird die direction
-Eigenschaft nicht von Tabellenspalten auf Tabellenzellen vererbt, da die Vererbung von CSS der Dokumentstruktur folgt und Tabellenzellen Teil von Reihen, aber nicht von Spalten sind.
Die Eigenschaften direction
und unicode-bidi
sind die einzigen beiden Eigenschaften, die nicht von der Kurzform-Eigenschaft all
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 bei Inline-Elementen Wirkung zeigt, muss der Wert der Eigenschaft unicode-bidi
entweder embed
oder override
sein.
Formale Definition
Anfangswert | ltr |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | Not animatable |
Formale Syntax
direction =
ltr |
rtl
Beispiele
Ausrichtung von rechts nach links setzen
Im folgenden Beispiel werden zwei Textzeichenfolgen dargestellt, beide mit direction: rtl
. Während der arabische Text mit dieser Einstellung korrekt angezeigt wird, befindet sich der Punkt im englischen Text 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
direction | ||||||||||||
ltr | ||||||||||||
rtl | ||||||||||||
Control direction of vertical range sliders, meters, and progress bars |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
Siehe auch
unicode-bidi
writing-mode
- SVG-Attribut
direction
- Das globale HTML-Attribut
dir
- Vertikale Formularsteuerelemente erstellen