Grundlegendes dir-Attribut
Das dir-Attribut mit dem Wert 'rtl' ist die Basis für jedes RTL-Webdesign. Es wird meist auf dem <html>- oder <body>-Tag gesetzt und beeinflusst die Textausrichtung, die Standard-Reihenfolge von Tabellenzellen und die Richtung von CSS-Eigenschaften wie 'text-align'. Ohne dieses Attribut bleiben die Inhalte linksbündig, was für RTL-Sprachen unnatürlich wirkt. Zudem sollten Sie 'dir' auf Container-Ebene überschreiben, wenn gemischte Richtungen vorkommen. Ein fehlendes oder falsches dir-Attribut führt zu schwer lesbaren Layouts und sollte daher priorisiert werden.
Gespiegeltes Layout und logische CSS-Eigenschaften
Statt physischer Eigenschaften wie 'left' und 'right' verwenden Sie logische CSS-Eigenschaften wie 'margin-inline-start' und 'padding-inline-end'. Diese passen sich automatisch der Schreibrichtung an und vermeiden manuelle Überschreibungen. Ein gespiegeltes Layout bedeutet, dass die Navigationsleiste rechts und der Inhalt links beginnt. Mit logischen Werten wie 'float: inline-start' oder 'text-align: start' erreichen Sie dies ohne Medienabfragen. Moderne CSS-Grid- und Flexbox-Eigenschaften wie 'justify-content: flex-start' wirken je nach dir-Attribut korrekt. Testen Sie stets mit echten Inhalten, da logische Eigenschaften nicht von allen Browsern gleich interpretiert werden.
Zahlen und eingebettetes Latein
In RTL-Texten bleiben Zahlen und eingebettete lateinische Buchstaben von links nach rechts ausgerichtet. Das birgt Herausforderungen, da sie die Leserichtung stören können. Verwenden Sie das 'unicode-bidi'-Attribut oder 'direction: ltr' für solche Elemente, um eine konsistente Darstellung zu gewährleisten. Bei Datums- oder Zahlenformaten ist es ratsam, die Reihenfolge an die RTL-Kultur anzupassen. Achten Sie auch auf das Layout von Formularen, wo Eingabefelder für Zahlen linksbündig bleiben sollten. Eine sorgfältige Behandlung dieser Mischrichtung verhindert visuelle Brüche und verbessert die Lesbarkeit.
Schriftarten und Typografie
Die Wahl der Schriftart ist entscheidend: Arabisch, Persisch und Hebräisch benötigen Schriften mit entsprechender Glyphenunterstützung. Beliebte Optionen sind 'Noto Naskh Arabic', 'Vazir' für Persisch und 'Noto Sans Hebrew'. Definieren Sie Fallbacks, z. B. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Achten Sie auf ausreichende Schriftgrößen und Zeilenabstände, da RTL-Schriften oft schmaler oder komplexer sind. Vermeiden Sie Kursivschrift, da sie in vielen arabischen Schriften nicht existiert. Testen Sie die Darstellung auf verschiedenen Geräten, um sicherzustellen, dass die Schriften korrekt geladen werden und lesbar sind.
Icons und Spiegelung
Icons, die eine Richtung anzeigen (z. B. Pfeile, Vorwärts-/Rückwärts-Symbole), müssen in RTL-Layouts gespiegelt werden. Dies erreichen Sie mit CSS-Transformationen wie 'transform: scaleX(-1)' oder durch Verwendung von Icon-Sets, die RTL automatisch unterstützen (z. B. Font Awesome mit 'dir'-Attribut). Symbole ohne Richtungsbezug (z. B. Haus, Einstellungen) bleiben unverändert. Stellen Sie sicher, dass die Spiegelung nicht die Semantik verfälscht. Testen Sie alle Icons in der RTL-Ansicht, da unbeabsichtigte Spiegelungen die Benutzerfreundlichkeit beeinträchtigen können.
