dir=rtl für Text von rechts nach links
Aktivieren Sie RTL-Layouts für Arabisch, Hebräisch und andere RTL-Sprachen
dir=rtl für Text von rechts nach links ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Die Funktion von dir
Das Attribut dir gibt die grundlegende Schreibrichtung eines Elements an. dir="ltr" (von links nach rechts, die Standardschreibweise der meisten Sprachen) oder dir="rtl" (von rechts nach links, für Arabisch, Hebräisch, Persisch und Urdu).
Für eine RTL-gesamte Website auf html setzen
Setzen Sie bei Websites auf Arabisch, Hebräisch, Persisch oder Urdu dir="rtl" am Wurzelelement. Dadurch wird der Standardfluss jedes Blocks umgekehrt: Text wird rechtsbündig ausgerichtet, Listen werden nach rechts eingerückt, Bildlaufleisten erscheinen links und Layouts werden mit modernem CSS automatisch gespiegelt.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Bidirektionaler Text
Text mit gemischter Schreibrichtung (etwa Arabisch mit eingebetteten englischen Markennamen) folgt automatisch dem Unicode Bidirectional Algorithm. Die Grundrichtung (aus dir) steuert, wie unidirektionale Abschnitte auf Zeilenebene angeordnet werden; einzelne Zeichenfolgen fließen in der natürlichen Richtung ihres jeweiligen Schriftsystems.
Logische CSS-Eigenschaften
Modernes CSS verwendet logische Eigenschaften, die sich an die Schreibrichtung anpassen: margin-inline-start (links bei LTR, rechts bei RTL), padding-inline-end, border-inline-start. Wenn Sie left/right durch start/end ersetzen, kann ein Stylesheet beide Richtungen bedienen.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox und Grid passen sich automatisch an
Die Zeilenrichtung von Flexbox berücksichtigt dir: Bei RTL fließen die Elemente von rechts nach links. Auch die Spalten in Grid-Templates werden umgekehrt. Daher funktionieren die meisten mit Flex oder Grid erstellten Layouts ohne richtungsspezifisches CSS in RTL – moderne Layouts sind richtungsunabhängig.
Symbole, die gespiegelt werden müssen
Richtungssymbole (Zurück-Pfeil, Weiter-Pfeil, Rückgängig/Wiederholen) müssen bei RTL gespiegelt werden. Verwenden Sie innerhalb von [dir="rtl"] das CSS transform: scaleX(-1) oder stellen Sie separate RTL-SVG-Varianten bereit. Nicht richtungsabhängige Symbole (Suche, Einstellungen, Zahnrad) bleiben unverändert.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Textausrichtung
Bevorzugen Sie text-align: start gegenüber text-align: left – start wird bei LTR zu links und bei RTL zu rechts aufgelöst. Dasselbe gilt für end. Eine richtungsabhängige Ausrichtung beseitigt eine ganze Klasse von Fehlern beim Hinzufügen von RTL-Unterstützung.
dir für einzelne Elemente überschreiben
Setzen Sie dir="auto" bei einem Element, damit der Browser die Richtung anhand des ersten Zeichens mit eindeutiger Schreibrichtung erkennt: <p dir="auto">{user.name}</p> verarbeitet vom Benutzer übermittelte Namen, die Arabisch, Englisch oder gemischt sein können, ohne Sonderbehandlung.
Bidi-Einbettung
Die Elemente bdi (bidirektionale Isolation) und bdo (bidirektionale Überschreibung) ermöglichen eine präzise Kontrolle darüber, wie der bidi-Algorithmus bestimmten Text behandelt – nützlich, wenn Sie Benutzereingaben unverändert wiedergeben oder eine bestimmte Richtung für einen Codeausschnitt innerhalb eines Fließtexts erzwingen möchten.
Formularfelder
Inputs erben dir von ihrem übergeordneten Element. Bei vom Benutzer eingegebenem Text mit wechselnder Schreibrichtung (etwa in einer Chat-App mit mehrsprachigen Benutzern) setzen Sie dir="auto" bei den einzelnen Inputs, damit jeder Inhalt entsprechend seiner Richtung korrekt angezeigt wird.
RTL-Layouts testen
Mit Browsern können Sie RTL vorübergehend testen, indem Sie in der DevTools-Konsole document.documentElement.dir = "rtl" setzen. Prüfen Sie die Ausrichtung von Symbolen, Innen- und Außenabstände, die Position der Bildlaufleiste sowie, ob ein Element hart codiertes left/right verwendet, obwohl start/end erforderlich wäre.
CSS-Richtung unterscheidet sich von der Layoutrichtung
Die CSS-Eigenschaft direction und das HTML-Attribut dir haben auf die meisten Layouts dieselbe Wirkung. Bevorzugen Sie das HTML-Attribut, weil unterstützende Technologien, Mail-Programme und andere Verbraucher es auslesen, während die CSS-Eigenschaft nur die Darstellung im Browser beeinflusst.
Wissensabfrage
Warum werden logische CSS-Eigenschaften wie margin-inline-start gegenüber margin-left bevorzugt, wenn RTL-Sprachen unterstützt werden?
Zusammenfassung
dir="rtl" bei <html> kehrt die Grundrichtung auf Websites für Arabisch, Hebräisch, Persisch und Urdu um. Logische CSS-Eigenschaften (margin-inline-start, padding-block-end) passen sich automatisch an. Flexbox- und Grid-Layouts werden ohne Änderungen gespiegelt. Spiegeln Sie Richtungssymbole, verwenden Sie text-align: start/end und nutzen Sie dir="auto" für Benutzerinhalte mit unbekannter Richtung.
Häufig gestellte Fragen
Ist die Lektion „dir=rtl für Text von rechts nach links“ kostenlos?
Ja — der vollständige Text von „dir=rtl für Text von rechts nach links“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „dir=rtl für Text von rechts nach links“?
Aktivieren Sie RTL-Layouts für Arabisch, Hebräisch und andere RTL-Sprachen Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „dir=rtl für Text von rechts nach links“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das lang-Attribut und Screenreader
- dir=rtl für Text von rechts nach links
- Die Elemente bdi und bdo
- charset und Unicode: Sonderzeichen verarbeiten