RTL-Styling-Grundlagen (101)

Avatar of Juan Diego Rodríguez
Juan Diego Rodríguez am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Vor ein paar Wochen war ich super aufgeregt, meinen ersten Post auf CSS-Tricks zu veröffentlichen: „Letter Spacing is Broken". Vergessen wir das jedoch erst einmal; wichtig ist das Thema des Beitrags: Die Zeichenabstände (letter spacing) sind fehlerhaft und funktionieren nicht so, wie es die CSS-Spezifikation vorsieht. Kurz gesagt: Anstatt die Zeichen gleichmäßig zu verteilen, bleibt am Ende des Elements ein unschöner Leerraum zurück.

Während diese Inkonsistenz zwischen dem Web und der Spezifikation für jemanden wie mich, der Spanisch/Englisch spricht, nur eine Eigenheit ist, bleibt für Sprecher von Rechts-nach-Links-Sprachen (RTL) wie Arabisch oder Hebräisch ein störender Freiraum am Anfang oder Ende eines Wortes. Firefox (Gecko) korrigiert dies gewissermaßen und verschiebt den unnötigen Platz ans Ende (in Lesereihenfolge), aber Google und Safari (Blink und Webkit) lassen ihn am Anfang stehen.

Side-by-side comparison of letter spacing on Gecko and Blink/Webkit

Natürlich wollte ich dieses große Problem demonstrieren, aber das Styling von RTL-Inhalten überstieg meine CSS-Kenntnisse. Da stieß ich auf diesen lebensrettenden Leitfaden von Ahmad Shadeed, der jeden wichtigen Aspekt des Stylings von RTL-Inhalten im Web sowie Best Practices zur einfachen Internationalisierung einer LTR-Webseite abdeckt. Eine Ressource, die meiner Meinung nach ein Muss ist, wenn man sich für i18n und Barrierefreiheit im Web interessiert.

Vielleicht habe ich das Rad neu erfunden, da dieser Leitfaden bereits aus dem Jahr 2018 stammt, aber ich hoffe, dass diejenigen, die ihn wie ich noch nicht kannten, Spaß daran haben, etwas Neues zu lernen!

Direkter Link →