Arabische Website erstellen: Praxisleitfaden für RTL-Design

Eine arabische Website zu erstellen heißt nicht nur, Texte ins Arabische zu übersetzen; auch die Richtung der ganzen Seite ändert sich. Die kurze Antwort: dir="rtl" und lang="ar" auf das Wurzelelement setzen, CSS mit Start/Ende-Eigenschaften (logischen Eigenschaften) statt links/rechts schreiben, richtungsabhängige Icons spiegeln, Logos, Videos und Diagramme aber nicht, eine eigene arabische Schrift laden und die arabische Version per hreflang ausweisen. Wer diese fünf Schritte von Anfang an plant, bekommt Arabisch als zusätzliche Sprache; wer sie nachrüstet, schreibt oft das halbe Design neu.

Wer braucht eine arabische Website?

Am meisten profitieren Exporteure in die Golfstaaten, den Irak, nach Ägypten und Nordafrika, Hotels und Anbieter von Medizintourismus mit Gästen aus arabischen Ländern sowie Bau- und Ingenieurfirmen mit Projekten in der Region. Geschäftssprache ist dort oft Englisch, doch wer Entscheider und Endkunden in ihrer Muttersprache anspricht, gewinnt Vertrauen und trifft bei arabischen Suchanfragen häufig auf wenig Konkurrenz. Den Verkauf ins Ausland allgemein behandeln wir in unserem Leitfaden zum grenzüberschreitenden E-Commerce, die sprachliche Grundlage im Artikel zur mehrsprachigen Website; hier geht es nur um das, was für Arabisch mit seiner Schreibrichtung von rechts nach links (RTL) spezifisch ist.

Schritt eins: dir="rtl" und lang="ar"

Die Richtung der Seite teilt das dir-Attribut am html-Element dem Browser mit. Mit dir="rtl" wechseln Textausrichtung, Spaltenreihenfolge in Tabellen, Position der Scrollleiste und der Fluss von Flex und Grid automatisch auf rechts nach links. lang="ar" brauchen Screenreader für die richtige Aussprache, der Browser für die korrekte Zeichenformung und Suchmaschinen zur Spracherkennung. In einem Setup mit Sprachpräfix wie Next.js wird der Wert im Layout aus der aktuellen Sprache erzeugt:

const RTL_LOCALES = new Set(['ar', 'fa', 'he']);

export default async function LocaleLayout({ children, params }: Props) {
  const { locale } = await params;
  const dir = RTL_LOCALES.has(locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

/* CSS: logische Eigenschaften statt links/rechts */
.card {
  padding-inline-start: 24px; /* in LTR links, in RTL rechts */
  margin-inline-end: 16px;
  border-inline-start: 4px solid var(--color-primary);
  text-align: start;
}

/* Richtungs-Icon nur in RTL spiegeln */
[dir='rtl'] .icon-arrow {
  transform: scaleX(-1);
}

Auch die UI-Bibliothek muss die Richtung kennen. Ant Design, MUI und ähnliche unterstützen RTL, es muss aber eigens aktiviert werden; sonst öffnen Dropdowns, Datumsauswahl und Drawer von der falschen Seite.

CSS mit logischen Eigenschaften schreiben

Der Großteil der RTL-Arbeit steckt im CSS. Physische Richtungen wie margin-left, padding-right, left: 0 oder text-align: left landen in RTL auf der falschen Seite. Für jede davon eine eigene [dir=rtl]-Regel zu schreiben ist langsam und fehleranfällig. Richtig ist, von Anfang an logische Eigenschaften zu verwenden:

• margin-inline-start / margin-inline-end statt margin-left / margin-right
• padding-inline-start / padding-inline-end statt padding-left / padding-right
• inset-inline-start / inset-inline-end statt Positionierung mit left / right
• text-align: start statt text-align: left
• border-inline-start statt border-left; für Ecken border-start-start-radius
• Flex und Grid folgen der Richtung bereits; manuelles Umdrehen mit row-reverse ist unnötig

Günstig wird die arabische Version nicht durch die Übersetzung, sondern durch CSS, das vom ersten Tag an mit logischen Eigenschaften geschrieben ist. Auf einer Website mit physischen Richtungen heißt RTL-Unterstützung, jede Komponente einzeln anzufassen.

Was wird gespiegelt, was nicht?

In RTL wird nicht alles umgedreht. Die Regel ist einfach: Elemente, deren Bedeutung von der Richtung abhängt, werden gespiegelt; Elemente, deren Bedeutung richtungsunabhängig ist, bleiben, wie sie sind.

• Spiegeln: Zurück-/Weiter-Pfeile, Öffnungsrichtung von Menüs, Breadcrumb-Trenner, Richtung von Slidern und Galerien, Fortschrittsbalken, Schrittanzeigen.
• Nicht spiegeln: Logos, Fotos und Videos, Markenicons, Uhr-Icons, Play-Buttons, Zeitachsen von Diagrammen in den meisten Fällen, Telefonnummern und E-Mail-Adressen.
• Achtung: Lateinische Wörter, Produktcodes und URLs im arabischen Text laufen weiterhin von links nach rechts; mit einem bdi-Element oder dir="ltr" umschlossen, springen Satzzeichen in gemischten Zeilen nicht an die falsche Stelle.

Arabische Schrift, Zeilenhöhe und Typografie

Die für lateinischen Text gewählte Schrift enthält meist keine arabischen Zeichen; der Browser greift dann auf eine Systemschrift zurück und die Seite sieht auf jedem Gerät anders aus. Laden Sie eine eigene arabische Webschrift wie Noto Naskh Arabic, Noto Kufi Arabic, Cairo oder IBM Plex Sans Arabic, und zwar nur auf arabischen Seiten. Weil arabische Buchstaben verbunden sind und ihre Punkte über und unter die Zeile ragen, sollte die Zeilenhöhe etwas großzügiger sein als bei lateinischem Text. Letter-Spacing wird im Arabischen nicht verwendet, weil es die Verbindungen zwischen den Buchstaben zerreißt, und es gibt keine Groß- und Kleinschreibung; Überschriftenstile mit text-transform: uppercase sind im Arabischen bedeutungslos.

Zahlen, Datumsangaben und Formulare

In manchen arabischen Ländern sind ostarabische Ziffern (٠١٢٣) üblich, in anderen westliche (0123), am Golf sieht man beides. Entscheiden Sie nach Zielmarkt und formatieren Sie Preise, Daten und Währungen mit Intl.NumberFormat und Intl.DateTimeFormat statt von Hand. In Formularen werden Namens- und Adressfelder rechts ausgerichtet, Felder für Telefon, E-Mail, IBAN und Kartennummer bleiben jedoch links nach rechts. Prüfen Sie auch die Validierung: Ein Namensfeld, das nur lateinische Buchstaben akzeptiert, lehnt arabische Namen ab, und jedes abgebrochene Formular ist ein verlorener Kunde.

SEO für arabische Seiten

Damit die arabische Version in der Suche erscheint, gelten die üblichen Regeln für mehrsprachige Websites: eine eigene URL pro Sprache (/ar/...), gegenseitige hreflang="ar"-Angaben sowie sprachspezifische Titel und Beschreibungen. Arabische Zeichen sind in URLs möglich; Google liest sie und zeigt sie in den Ergebnissen arabisch an, beim Teilen werden sie aber zu langen kodierten Zeichenketten. Beide Wege funktionieren, solange die URLs kurz und lesbar bleiben; wichtig ist, sich einmal zu entscheiden und dabei zu bleiben. Der eigentliche Unterschied liegt im Inhalt: Eine maschinell übersetzte arabische Seite verrät sich arabischen Lesern im ersten Absatz, und die Absprungrate bleibt hoch. Wer ein bestimmtes Land wie Saudi-Arabien anspricht, stärkt das Signal mit regionalem hreflang wie ar-SA und lokalen Kontaktdaten. Die technische Grundlage beschreibt unser Leitfaden zur SEO-freundlichen Website, ein Beispiel für einen Markt mit eigener Suchmaschine unser Artikel zu Yandex-SEO.

RTL-Test vor dem Livegang

• Jede Seitenvorlage auf Arabisch öffnen und Screenshots auf Mobilgerät und Desktop mit der LTR-Version vergleichen.
• Dropdowns, Modals, Drawer, Datumsauswahl, Slider und Toast-Meldungen einzeln öffnen.
• In Zeilen, die arabischen Text mit lateinischen Wörtern, Zahlen und URLs mischen, die Position der Satzzeichen prüfen.
• Formulare mit arabischem Namen, ostarabischen Ziffern und langen Adressen ausfüllen und absenden.
• Einige Seiten mit einem Screenreader anhören; Fehler bei lang und dir hört man sofort. Die allgemeinen Regeln finden Sie in unserem Artikel zur Barrierefreiheit (WCAG).
• Prüfen, ob Social-Share-Bilder (OG) arabischen Text mit verbundenen Buchstaben und in der richtigen Richtung darstellen.

Fazit

Die Qualität einer arabischen Website hängt an drei Entscheidungen: die Richtung an der Wurzel steuern (dir und lang), CSS mit logischen Eigenschaften schreiben und Inhalte von jemandem schreiben und prüfen lassen, der wirklich Arabisch spricht. Steht dieses Fundament von Anfang an, wird Arabisch zu einer weiteren Sprache und nicht zu einer separaten Website. Wenn Sie eine Website in mehreren Sprachen, Arabisch eingeschlossen, mit RTL-Unterstützung ab dem ersten Tag möchten, sehen Sie sich unsere Webentwicklung an oder fordern Sie ein kostenloses Angebot an.