Arabisches Webdesign: die RTL-Fehler, die Besucher aus der Golfregion abspringen lassen
Eine arabische Fassung ist nicht die englische Website mit übersetzten Wörtern im gleichen Layout. Das sind die Rechts-nach-links-Fehler, die den Leser in den ersten zwei Sekunden verlieren, und das, was Sie vor dem Launch testen sollten.
Arabisches Webdesign und RTL: die kurze Antwort
Die arabische Fassung Ihrer Website ist nicht die englische Seite mit übersetzten Wörtern im gleichen Layout. Rechts-nach-links bedeutet, dass die gesamte Oberfläche gespiegelt wird: Navigation, Logoposition, Formularbeschriftungen, Fortschrittsschritte, Pfeile und die Ecke, auf die der Blick eines Besuchers aus der Golfregion zuerst fällt. Die Fehler, die Sie die Anfrage kosten, sind struktureller und nicht sprachlicher Natur, und die meisten davon sind innerhalb von zwei Sekunden nach dem Laden sichtbar. Setzen Sie die Dokumentrichtung korrekt, spiegeln Sie das Layout mit logischem CSS statt mit handumgedrehten Abständen, wählen Sie eine Schrift, die tatsächlich für Arabisch entworfen wurde, und entscheiden Sie bewusst, welche Ziffern Sie zeigen.
Wenn diese vier stimmen, ist eine unvollkommene Übersetzung verkraftbar. Stimmen sie nicht, liest sich auch eine perfekte Übersetzung wie eine fremde Website, die nicht für diesen Leser gebaut wurde. Zudem ist das Feld kleiner, als die meisten Exporteure annehmen: Laut W3Techs entfielen im September 2026 0,6 Prozent der erfassten Websites auf Arabisch gegenüber 49,5 Prozent auf Englisch, sodass eine sauber gebaute arabische Präsenz in Märkten, in denen die meisten Wettbewerber keine haben, noch immer heraussticht.
Spiegeln ist eine Layout-Entscheidung, keine Textausrichtung
Der häufigste Fehler ist eine Website, die den Text rechtsbündig setzt und die Sache damit für erledigt hält. Die Richtung gehört an das Dokument: die Attribute dir und lang am html-Element, damit der Browser den bidirektionalen Unicode-Algorithmus anwendet und jedes Kindelement den richtigen Fluss erbt. Von dort aus muss sich das Layout selbst spiegeln. Logo und Hauptnavigation wandern nach rechts, die Seitenleiste wechselt die Seite, Breadcrumbs laufen von rechts nach links, und eine dreistufige Fortschrittsanzeige beginnt rechts.
Nicht alles spiegelt sich, und genau daran scheitern handumgedrehte Stylesheets. Logos mit lateinischen Wortmarken bleiben, wie sie gezeichnet sind. Bedienelemente von Mediaplayern, Uhren und alles, was einen physischen Gegenstand darstellt, behalten ihre Ausrichtung. Zahlen, Telefonnummern und lateinische Markennamen laufen innerhalb des Rechts-nach-links-Flusses von links nach rechts, was der bidirektionale Algorithmus wie vorgesehen tut und kein Fehler ist. Der Prüfstein ist die Bedeutung: Ein Pfeil, der weiter bedeutet, zeigt im Arabischen nach links, während ein Pfeil, der herunterladen bedeutet, weiterhin nach unten zeigt.
Arabische Typografie bricht jede lateinische Gewohnheit
Arabisch ist kursiv und verbunden, Buchstaben ändern ihre Form je nach Position im Wort, und die Schrift trägt über und unter der Grundlinie mehr visuelles Gewicht als das Lateinische. Daraus folgen drei Dinge. Arabisch in derselben Pixelgröße wie Ihr Englisch wirkt klein und gedrängt, deshalb erhöhen die meisten Gestalter Schriftgrad und Zeilenhöhe, um Ober- und Unterlängen Raum zu geben. Fett und kursiv gibt es im Arabischen nicht im lateinischen Sinn: Eine Schrift ohne fetten Schnitt künstlich fett zu rendern verschmiert die Buchstabenverbindungen, und synthetische Kursive sieht schlicht kaputt aus. Betonen Sie mit einem Schnitt, den die Familie wirklich enthält, mit Farbe oder mit Position.
Auch die Schriftwahl ist nicht kosmetisch. Ein System-Fallback rendert Ihr Arabisch in dem, was das Gerät gerade hat, und genau deshalb sehen so viele Websites für die Golfregion am Ende aus wie ein Behördenformular. Wählen Sie eine Familie mit einem echten arabischen Schnitt und passenden Schriftstärken und prüfen Sie sie in Überschrift- und Fließtextgröße auf einem echten Telefon, bevor jemand freigibt.
Arabisches Webdesign und RTL: Ziffern, Datumsangaben und die Formulare, die lecken
Bei den Ziffern werden selbstbewusste Teams erwischt. Arabisch wird mit zwei Ziffernsätzen geschrieben: den arabisch-indischen Ziffern, die in der Golfregion und der Levante üblich sind, und den westlichen Ziffern, die in weiten Teilen Nordafrikas verwendet werden. Laut der Arbeit des W3C zu den Layout-Anforderungen für Arabisch und Persisch behandeln Internationalisierungsbibliotheken arabisch-indische Ziffern als Standard für arabischen Text und nehmen dabei mehrere nord- und nordwestafrikanische Länder aus, die den westlichen Satz verwenden. Es gibt keine allgemeingültig richtige Antwort, nur eine Entscheidung, die Sie pro Markt treffen und konsequent anwenden. Preise im einen Satz und Telefonnummern im anderen, auf derselben Seite, ist die Variante, die nachlässig wirkt.
Für Datums- und Währungsangaben gilt dieselbe Regel: Wählen Sie die Locale und lassen Sie dann eine Formatierungsbibliothek den Wert ausgeben, statt Zeichenketten von Hand zusammenzusetzen. Die andere undichte Stelle sind Formulare. Beschriftungen und Platzhalter richten sich rechts aus, aber E-Mail-Felder, URL-Felder und internationale Telefonnummern müssen Eingaben von links nach rechts annehmen und anzeigen, sonst landen Pluszeichen und Ländervorwahl an der falschen Stelle. Füllen Sie vor dem Launch ein echtes Formular mit einem arabischen Namen, einer arabischen Adresse und einer Mobilnummer aus der Golfregion aus, und zwar auf dem Telefon und nicht nur am Desktop.
Die RTL-Prüfungen vor dem Launch
- Richtung an der Wurzel. Setzen Sie die Attribute für Richtung und Sprache am html-Element jeder arabischen Seite, nicht als Klasse an einem Container. Prüfen Sie dann, dass hreflang-Tags jede Sprachversion auf alle anderen verweisen, damit Suchmaschinen die arabische Seite für die arabische Suchanfrage ausliefern.
- Logisches CSS statt eines gespiegelten Stylesheets. Ersetzen Sie linke und rechte Außen- und Innenabstände durch ihre Entsprechungen für Anfang und Ende der Schreibrichtung und verwenden Sie logische Positionsangaben statt links und rechts. Ein Stylesheet bedient dann beide Richtungen, und die arabische Website läuft nicht mehr jedes Mal aus dem Takt, wenn sich die englische ändert.
- Icons und Bewegung einzeln geprüft. Pfeile, Chevrons, Karussells, Slider und Wischgesten kehren sich um; Play-Buttons, Häkchen und Zifferblätter nicht. Animationen, die im Englischen von links einlaufen, sollten im Arabischen von rechts einlaufen.
- Echte Inhalte, niemals Platzhaltertext. Übersetzte arabische Zeichenketten sind mal kürzer als die englische Vorlage und mal deutlich länger, deshalb müssen Buttons, Navigationspunkte und Kartentitel mit den tatsächlichen Wörtern in Mobilbreite getestet werden.
- Ein muttersprachlicher Leser auf der Live-Website vor dem Launch. Kein Korrektorat einer Textdatei, sondern ein Gang durch die echten Seiten auf dem Telefon. Maschinelle Übersetzung produziert Sätze, die grammatisch aufgehen und trotzdem nach niemandem in Riad, Dubai oder Doha klingen.
Arabisches Webdesign und RTL: häufige Fragen
- Reicht es, das Richtungsattribut auf rtl zu setzen, um eine Website rechts-nach-links zu machen? — Nein. Es setzt die Textrichtung und lässt den Browser den bidirektionalen Algorithmus ausführen, aber das Layout muss sich weiterhin spiegeln: Navigation, Seitenleisten, Icons, Fortschrittsanzeigen und jeder Abstand, der mit links und rechts geschrieben ist. Mit logischen CSS-Eigenschaften zu bauen macht diese Spiegelung automatisch statt manuell.
- Welche Ziffern sollte eine arabische Website verwenden? — Das hängt vom Markt ab. Arabisch-indische Ziffern sind die Konvention in der Golfregion und der Levante, während weite Teile Nordafrikas westliche Ziffern verwenden, eine Aufteilung, die sich in der Arbeit des W3C zu den arabischen Layout-Anforderungen widerspiegelt. Wählen Sie eine pro Markt und wenden Sie sie konsequent auf Preise, Datumsangaben und Telefonnummern an.
- Brauche ich eine eigene arabische Website oder eine Sprachversion meiner bestehenden? — Eine Sprachversion, sofern das zugrunde liegende Layout mit logischen Eigenschaften gebaut wurde und das Inhaltsmodell beide Richtungen unterstützt. Getrennte Websites driften binnen eines Jahres auseinander und ihre hreflang-Tags werden vernachlässigt, sodass Suchmaschinen die richtige Version nicht mehr ausliefern.
- Warum sieht mein arabischer Text falsch aus, obwohl die Übersetzung stimmt? — Meist liegt es an der Schrift. Eine Familie ohne echten arabischen Schnitt wird künstlich fett gerendert oder still durch einen System-Fallback ersetzt, was die Buchstabenverbindungen zerstört. Setzen Sie eine arabisch-fähige Schrift, erhöhen Sie Größe und Zeilenhöhe gegenüber dem Lateinischen, und wenden Sie niemals synthetisches Fett oder Kursiv an.
Weiterlesen
Bauen wir etwas,
dem man vertraut.
Sagen Sie uns, was Ihr Geschäft ausbremst. Wir zeigen Ihnen das System, das es löst — und wie schnell.