Rechts-nach-links-Oberflächen, die sich natürlich anfühlen

Wer Arabisch liest, merkt in Sekunden, ob eine Oberfläche übersetzt oder für ihn gestaltet wurde. Der Text läuft zwar von rechts nach links, aber die Pfeile zeigen noch in die falsche Richtung, die Zahlen springen hin und her, und die Typografie wirkt geliehen.

Wir bauen Plattformen auf Französisch, Englisch und Arabisch, auch unsere eigenen. Hier lesen Sie, was es braucht, damit die arabische Version wie ein Original wirkt und nicht wie eine Umwandlung.

Layout spiegeln, Inhalt nicht

In einer Rechts-nach-links-Oberfläche wird das gesamte Layout gespiegelt: Die Navigation beginnt rechts, die Lesereihenfolge läuft von rechts nach links, Fortschritt bewegt sich nach links. Trotzdem dreht sich nicht alles um.

• Logos und Markenzeichen behalten ihre ursprüngliche Form. Ein lateinischer Schriftzug bleibt genau so, wie er ist.
• Zahlen werden auch mitten im arabischen Text von links nach rechts geschrieben.
• Code, E-Mail-Adressen und URLs bleiben linksläufig.
• Mediensteuerungen wie Play-Buttons und Zeitleisten behalten meist ihre Richtung, weil sie Zeit darstellen und keine Leserichtung.

Am kniffligsten sind Richtungssymbole. Ein Pfeil für „weiter“ muss auf Arabisch nach links zeigen. Ein Pfeil für „herunterladen“ zeigt in jeder Sprache nach unten. Entscheiden Sie Symbol für Symbol. Manchmal ist es am besten, den Pfeil ganz wegzulassen.

Logische Eigenschaften, überall

Die wirksamste Entscheidung fällt am ersten Projekttag: Schreiben Sie in CSS nie left oder right. Verwenden Sie stattdessen logische Eigenschaften, die sich automatisch nach der Leserichtung richten.

/* physical: breaks in Arabic */
.card { margin-left: 24px; text-align: left; }

/* logical: correct in every language */
.card { margin-inline-start: 24px; text-align: start; }

Mit margin-inline-start, padding-inline-end, inset-inline-start und text-align: start bedient ein einziges Stylesheet beide Richtungen. Dann genügt dir="rtl" auf der Seite, und die ganze Oberfläche ist gespiegelt.

Wer das später nachrüstet, muss jede Komponente einzeln durchgehen. Wer gleich damit anfängt, hat keinen Mehraufwand.

Typografie ist keine Übersetzung

Arabisch ist eine verbundene Schrift mit eigenen Proportionen. Ein lateinisches Design zu nehmen und nur die Schrift auszutauschen, reicht selten.

• Wählen Sie eine arabische Schrift bewusst. Sie sollte in Strichstärke und Charakter zu Ihrer lateinischen Schrift passen. Die Systemschrift, die zufällig einspringt, tut das selten.
• Geben Sie mehr Zeilenabstand. Arabische Buchstaben reichen weiter über und unter die Zeile.
• Verzichten Sie auf negative Laufweite. Ein enger Satz, der im Lateinischen elegant aussieht, zerreißt die Verbindungen zwischen arabischen Buchstaben.
• Vorsicht mit Kursivschrift. Arabisch kennt keine echte Kursive. Wenn Ihr Design Kursivschrift zur Betonung nutzt, wählen Sie ein anderes Mittel, etwa einen leichteren Schriftschnitt.

Zahlen, Daten, gemischter Text

Echte Oberflächen mischen ständig Sprachen: ein arabischer Satz mit einem Firmennamen in lateinischen Buchstaben, ein Preis, eine Telefonnummer. Der bidirektionale Algorithmus des Browsers erledigt das meiste davon, braucht aber Unterstützung.

Kennzeichnen Sie nutzergenerierte Inhalte mit dir="auto", damit jeder Wert die Richtung seines eigenen Textes übernimmt. Formatieren Sie Datumsangaben und Zahlen mit den Internationalisierungswerkzeugen der Plattform statt von Hand. Legen Sie außerdem früh fest, ob Sie westarabische (0–9) oder ostarabische Ziffern verwenden, und bleiben Sie dann konsequent dabei.

Animationen mit Richtung

Auch Animationen haben eine Richtung. Ein Panel, das im Englischen von rechts hereingleitet, kommt im Arabischen von links. Ein Fortschrittsbalken füllt sich von rechts. Unterstreichungen beginnen am Zeilenanfang, und der liegt rechts. Folgt die Bewegung der Leserichtung, wirkt die Oberfläche ruhig. Tut sie es nicht, wirkt sie fremd.

Mit Muttersprachlern testen

Keine Checkliste ersetzt einen Muttersprachler, der das Produkt benutzt. Lassen Sie vor dem Launch Menschen mit Arabisch als Muttersprache echte Aufgaben erledigen, und achten Sie darauf, wo sie zögern. Was diese Tester in einer Stunde finden, würden Sie sonst erst nach Wochen entdecken.

Sie planen eine Plattform, die auf Arabisch, Französisch und Englisch funktionieren soll? Sprechen Sie mit uns. Wir bauen alle drei Sprachen von Anfang an mit ein.