Christoph Schäfer · April 2015 in Expertise
Eine Website vom Englischen ins Arabische zu übertragen, sieht auf den ersten Blick relativ unkompliziert aus: die Texte vom Übersetzungsbüro mit Copy-and-paste austauschen, Textrichtung im html-Tag über das dir-Attribut oder die CSS-Eigenschaft direction anpassen – Auftrag erledigt? Nicht ganz: Denn auch das Layout und die Bedienelemente passen sich auf einer professionellen mehrsprachigen Website konsequent ihrer Zielgruppe an.
Die Laufrichtung einer Sprache wirkt sich noch weit über das Lesen und Schreiben hinaus auf die allgemeinen Sehgewohnheiten ihrer Sprecher aus. Die Blickführung verläuft bei Right-to-Left-Schriften (RtL) generell von rechts nach links, und deshalb muss neben der Textrichtung auch das gesamte Layout für RtL-sprachige Websites gespiegelt werden.
Als logische Folge davon ist auch die Richtung des Zeitstrahls umgekehrt: Für wen die Schrift von rechts nach links läuft, beginnt auch ein Zeitstrahl rechts und endet links. Also starten Slideshows am rechten Rand und blättern nach links, der Vorwärts-Button zeigt also gegen unsere Gewohnheit nach links.
Keine Regel ohne Ausnahmen: Uhren laufen auch in der RtL-sprachigen Welt in dieselbe Richtung. Sämtliche Icons, die auf analogen Zeitdarstellungen basieren, dürfen also nicht einfach gespiegelt werden. Das betrifft zum Beispiel undo-, redo-, refresh- und history-Buttons. Steuer-Buttons von Videos bleiben im Gegensatz zu Slideshows unverändert, weil sie die Abspielrichtung einer Videokassette symbolisieren, die unabhängig von der Schreibrichtung ist.
Layout und Icons sind aber nur zwei der Besonderheiten, die berücksichtigt werden müssen, wenn eine Website von einer Left-to-Right- auf eine Right-to-Left-Schrift umgestellt wird. Nach unserer praktischen Erfahrung mit diesem Thema stellen auch das Handling des übersetzten Texts, die Mischung aus beiden Schriftrichtungen im Editor sowie Modifikationen auf HTML-, CSS- und JavaScript-Seite ganz eigene Herausforderungen dar.
Quellen:
- Google Styleguide Material Design – google.com/design
