0Pricing
CSS Academy · Lektion

Logische Eigenschaften in RTL-Layouts

Erstellen Sie mit logischen Eigenschaften ein wirklich bidirektionales Layout, das sich automatisch für Arabisch und Hebräisch spiegelt.

Logische Eigenschaften in RTL-Layouts ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

RTL in HTML einrichten

Deklarieren Sie RTL in HTML mit dem Attribut dir und einem passenden lang-Attribut:

<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>

dir="rtl" in CSS

Sie können die Schreibrichtung auch in CSS festlegen – das ist für Tests oder teilweise RTL-Bereiche nützlich:

<div dir="rtl">هذا العنصر باتجاه RTL</div>

LTR-/RTL-Umschaltung testen

Ein schneller Test: Fügen Sie dir="rtl" zu <html> hinzu. Mit logischen Eigenschaften sollte sich das Layout korrekt spiegeln. Bei physischen Eigenschaften sehen Sie, was angepasst werden muss.

Was sich automatisch anpasst

Wenn dir="rtl" gesetzt ist, werden diese Dinge mithilfe logischer Eigenschaften automatisch gespiegelt:

  • Textausrichtung (start/end)
  • Außen- und Innenabstände (inline-start/end)
  • Rahmen (inline-start/end)
  • Floats (inline-start/end)
  • Positionierung (inset-inline-start/end)

Was sich NICHT automatisch anpasst

Auch bei Verwendung logischer Eigenschaften müssen Sie in RTL auf Folgendes achten:

  • Hintergrundbilder mit richtungsabhängigen Inhalten
  • SVG-Symbole mit Richtungsbedeutung (Pfeile, Chevron-Symbole)
  • Transformationen wie translateX() – verwenden Sie translateX(calc(-1 * var(--offset))) mit einem Richtungs-Flag
  • Absolute Positionierung mit expliziten Pixelwerten

SVG-Symbole spiegeln

CSS bietet eine einfache Möglichkeit, richtungsabhängige Symbole in RTL zu spiegeln:

<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>

Richtungsabhängige CSS-Variable

Ein Trick mit einer CSS-Variable für richtungsabhängige Werte:

<div dir="rtl" class="drawer">Drawer</div>

Praktisches RTL-Beispiel

Eine Kartenkomponente mit logischen Eigenschaften:

<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>

font-size und RTL

Einige arabische Schriftarten wirken bei derselben Pixelgröße größer oder kleiner als lateinische Schriftarten. Definieren Sie die font-size bei Bedarf für jedes Schriftsystem separat:

<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>

Testwerkzeuge

Mit den Browser-DevTools können Sie bidirektionale Layouts emulieren. Verwenden Sie außerdem den Barrierefreiheitsbaum von Chrome, um zu überprüfen, dass die Lesereihenfolge für Screenreader der logischen und nicht der visuellen Reihenfolge folgt.

RTL-Checkliste aus der Praxis

Checkliste für die RTL-Überprüfung:

  • Alle Außen- und Innenabstände verwenden logische Eigenschaften
  • Alle Rahmen verwenden inline-start/end
  • Die Textausrichtung verwendet start/end
  • Richtungsabhängige Symbole werden mit scaleX(-1) gespiegelt
  • Absolute Positionen verwenden bei Bedarf inset-inline-*
  • Scrollbare Container scrollen vom richtigen Rand aus

Kurzer Test

Welche CSS-Transformation ist die einfachste Möglichkeit, ein richtungsabhängiges SVG-Pfeilsymbol in RTL-Layouts zu spiegeln?

Zusammenfassung

Setzen Sie dir="rtl" am html-Element, um ein RTL-Layout zu erstellen. Logische Eigenschaften passen Außenabstände, Innenabstände, Rahmen und Ausrichtung automatisch an. Physische Pixelwerte in Transformationen und bei der absoluten Positionierung müssen für RTL weiterhin manuell berücksichtigt werden. Spiegeln Sie richtungsabhängige Symbole mit scaleX(-1). Testen Sie, indem Sie dir="rtl" an Ihrem Wurzelelement ein- und ausschalten.

Häufig gestellte Fragen

Ist die Lektion „Logische Eigenschaften in RTL-Layouts“ kostenlos?

Ja — der vollständige Text von „Logische Eigenschaften in RTL-Layouts“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Logische Eigenschaften in RTL-Layouts“?

Erstellen Sie mit logischen Eigenschaften ein wirklich bidirektionales Layout, das sich automatisch für Arabisch und Hebräisch spiegelt. Du übst CSS 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 CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS 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 4 von 4.

Wie lange dauert die Lektion „Logische Eigenschaften in RTL-Layouts“?

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 CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS 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

  1. Warum logische Eigenschaften: Internationalisierung
  2. Block- und Inline-Richtungen
  3. Logische Eigenschaften für Margin, Padding und Border
  4. Logische Eigenschaften in RTL-Layouts
← Zurück zu CSS Academy