What is RTL in web design?

RTL (right-to-left) design adapts a website for scripts read from right to left, such as Arabic and Hebrew. It means setting dir="rtl" on the page, mirroring the layout and directional icons, and keeping logos, numbers, media controls and photos unchanged.

Should I set RTL direction in CSS or HTML?

In HTML. The W3C advises adding dir="rtl" to the html element and never using CSS to set base direction, because direction is part of the content's meaning and must work even without the stylesheet.

Which icons should not be mirrored in RTL?

Logos, universal marks such as the checkmark, icons of real-world objects such as clocks, controls that point to an actual direction, and media playback controls. Arrows for navigation and progress should be mirrored.

Are numbers written right to left in Arabic?

No. The digits within a number keep the same order in Arabic and Hebrew text. Arabic may use Western or Eastern Arabic numerals depending on the country, but the order of digits never reverses.

Do CSS logical properties work in all modern browsers?

Yes, the core logical properties such as margin-inline-start, padding-inline-end and text-align: start are supported in all current major browsers. Check any newer or less common property on MDN before relying on it.

RTL Webdesign: 7 Regeln für arabische und hebräische Websites

Fassen Sie diesen Beitrag zusammen mit: 10 Minuten Lesezeit

Gutes RTL-Design (von rechts nach links) beginnt im Markup, nicht im Stylesheet: Set dir="rtl" und das Recht lang auf der <html> Element arabischer, hebräischer, persischer oder Urdu-Seiten, erstellen Sie Ihr CSS mit logischen Eigenschaften wie margin-inline-start Das Layout spiegelt sich also selbst wider und entscheidet dann Element für Element, was umgedreht werden soll. Navigation, Zurück- und Weiter-Pfeile, Fortschrittsbalken und Textausrichtungssymbole spiegeln sich wider; Logos, Häkchen, Uhren, Medienwiedergabesteuerungen, Fotos und die Ziffern innerhalb einer Zahl tun dies nicht.

Wichtige Erkenntnisse

Richtung in HTML einfügen (<html dir="rtl" lang="ar">), nie nur in CSS. Das W3C empfiehlt, zum Festlegen der Basisrichtung kein CSS zu verwenden.
Ersetzen left „ right in Ihrem CSS mit logischen start „ end Eigenschaften. Ein Stylesheet dient dann beiden Richtungen.
Spiegeln Sie alles, was die Lesereihenfolge, Navigation oder den Fortschritt anzeigt. Behalten Sie Logos, universelle Symbole, reale Objekte und Fotos so, wie sie sind.
Zahlen behalten ihre Ziffernreihenfolge auch innerhalb von RTL-Text. Im Hebräischen werden westliche Ziffern verwendet; im Arabischen können westliche oder ostarabische Ziffern verwendet werden.
Testen Sie vor dem Start mit echtem übersetztem Text, einschließlich gemischter arabischer und englischer Zeichenfolgen.

Was RTL-Design bedeutet

Rechts-nach-links-Skripte werden vom rechten Seitenrand gelesen. Das W3C listet Adlam, Arabisch, Hebräisch, N'Ko, Syrisch und Thaana als Rechts-Links-Schriften auf, die zum Schreiben von Sprachen wie Arabisch, Dhivehi, Hebräisch, Paschtu, Persisch, Sindhi, Urdu und Jiddisch verwendet werden (W3C-Internationalisierung).

RTL-Design ist nicht “alles richtig ausrichten”. Leser dieser Sprachen erwarten, dass die gesamte Benutzeroberfläche ihrer Leserichtung folgt: das Logo und die Hauptnavigation rechts, die Seitenleiste vertauscht, ein nach rechts zeigender Pfeil nach hinten. Sie erwarten auch, dass sich einige Dinge nicht ändern, wie zum Beispiel eine Telefonnummer, ein Markenlogo oder die Wiedergabetaste in einem Video. Die richtige Aufteilung unterscheidet eine übersetzte Seite von einer lokalisierten.

1. Richtung und Sprache im HTML festlegen

Die Grundlage ist ein Attribut. Die schnelle Antwort des W3C: “Wenn die allgemeine Dokumentrichtung von rechts nach links ist, fügen Sie hinzu dir="rtl" zum html-Tag” (W3C).

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8" />
  </head>
</html>

Laut W3C richtet dieses einzelne Attribut Absätze nach rechts aus, sorgt dafür, dass Tabellenspalten von rechts nach links ausgeführt werden, startet die Formulareingabe rechts, platziert die Zeichensetzung richtig und lässt CSS das Layout spiegeln, wenn Ihr Stylesheet gut geschrieben ist.

Drei Regeln aus derselben Anleitung:

Verwenden Sie CSS nicht für die Basisrichtung. Die Richtung beeinflusst die Bedeutung und gehört daher in das Markup, wo sie auch dann noch funktioniert, wenn CSS nicht geladen werden kann.
Erklären lang separat. lang="ar" bedeutet nicht dir="rtl", und umgekehrt. Stellen Sie beides ein.
Verwenden dir="auto" bei Benutzereingaben. Formularfelder und eingefügter Text unbekannter Richtung (ein Benutzername, ein Kommentar) sollten ihre Richtung zur Laufzeit erkennen.

Wenn Sie nur einzelne Blöcke als RTL markieren, während die Seite LTR bleibt, kämpfen Sie überall gegen Ausrichtung, Zeichensetzung und Tabellenreihenfolge. Stellen Sie es einmal oben ein.

2. Schreiben Sie CSS mit logischen Eigenschaften

Die meisten RTL-Fehler stammen von CSS, das “links” oder “rechts” sagt. Eine Karte mit padding-left: 24px behält seine Polsterung auf Arabisch links, was jetzt die andere Kante ist.

CSS-logische Eigenschaften beschreiben stattdessen das Layout relativ zur Textrichtung (MDN). Das W3C empfiehlt sie genau aus diesem Grund: Verwendung start „ end für Ränder, Polsterung und Ausrichtung “um Richtungsänderungen während der Lokalisierung einfach verwalten zu können”.

Physisch (vermeiden)	Logisch (verwenden)
`margin-left`	`margin-inline-start`
`padding-right`	`padding-inline-end`
`left: 0`	`inset-inline-start: 0`
`text-align: left`	`text-align: start`
`border-left`	`border-inline-start`
`float: left`	`float: inline-start`

Flexbox und Raster folgen bereits der Dokumentrichtung: Eine Reihe von Flex-Elementen beginnt rechts auf einer RTL-Seite. Aus diesem Grund wird ein mit Flex oder Grid und logischem Abstand erstelltes Layout normalerweise korrekt und ohne zusätzliches CSS angezeigt.

Dinge, die logische Eigenschaften für Sie nicht bewältigen:

Verwandelt und positioniert Dekorationen. transform: translateX(10px) bewegt sich nach rechts in beide Richtungen.
Hintergrundpositionen und Gradienten einstellen mit left oder right.
Symbole, die als CSS-Formen oder einzelne SVGs gezeichnet werden die in eine Richtung zeigen (siehe Schritt 4).

Verwenden Sie hierfür einen Richtungswähler:

[dir='rtl'] .chevron {
  transform: scaleX(-1);
}

3. Spiegeln Sie das Layout, nicht den Inhalt

Wenn die Seite umblättert, bewegen sich diese auf die gegenüberliegende Seite:

Logo und primäre Navigation (normalerweise oben rechts).
Seitenleisten und sekundäre Spalten.
Breadcrumbs, die jetzt von rechts nach links lesen, wobei die Trennzeichen nach links zeigen.
Formularbeschriftungen, erforderliche Markierungen und Validierungssymbole.
Tabellenspalten, die von rechts beginnen.
Karussells und Paginierung, die nach links vorrücken.

Diese bleiben so wie sie sind:

Fotos und Illustrationen. Apples Human Interface Guidelines raten davon ab, Fotos und Kunstwerke umzudrehen, da “das Umdrehen eines Bildes häufig die Bedeutung des Bildes verändert” und Urheberrechtsprobleme verursachen kann. Wenn der Inhalt eines Bildes von der Leserichtung abhängt (z. B. ein Screenshot einer Benutzeroberfläche), erstellen Sie stattdessen eine lokalisierte Version (Apple HIG).
Video- und Audioplayer. Die Wiedergabe bezieht sich auf die Richtung der Medien, nicht auf die Sprache.
Bildlaufleisten. Die Position der Bildlaufleiste der W3C-Notizen ist Teil des Browsers und wird vom Benutzer gesteuert, nicht von der Seite.

Wenn Bilder in einer sinnvollen Reihenfolge erscheinen, beispielsweise einer Zeitleiste oder einer Rangliste, kehren Sie ihre Reihenfolge um, anstatt jedes Bild umzudrehen.

4. Entscheiden Sie, welche Symbole umkippen

Die Richtlinien von Apple geben die klarsten Regeln vor, und sie funktionieren genauso gut für Websites (Apple HIG):

Umdrehen:

Zurück-, nächste und vorherige Pfeile und alles, was Elemente in einer festen Reihenfolge navigiert. “Eine Zurück-Taste muss in RTL nach rechts zeigen”.
Fortschrittsbalken und Schieberegler, die von rechts nach links gefüllt werden sollen. Kehren Sie die Reihenfolge aller Zahlen entlang dieser um, drehen Sie die Ziffern jedoch niemals um.
Symbole, die Text oder Leserichtung darstellen, wie z. B. Textausrichtungs- oder Listensymbole.
Symbole, die Vorwärts- oder Rückwärtsbewegungen anzeigen.

Nicht umdrehen:

Logos, auch solche, die Text enthalten. Apple warnt, dass ein umgedrehtes Logo “die Leute verwirrt und rechtliche Konsequenzen haben kann”.
Universelle Markierungen wie das Häkchen.
Objekte aus der realen Welt, wie zum Beispiel eine Uhr, die “überall gleich funktionieren”.
Steuerelemente, die eine echte Richtung bedeuten, wie z. B. “rechts ausrichten”, die immer noch nach rechts zeigen muss.

Ein praktischer Ansatz: Markieren Sie jedes Symbol in Ihrem Designsystem als mirror oder fixed Einmal und wenden Sie den Flip mit einer einzigen CSS-Regel für die an mirror Satz.

5. Behandeln Sie Zahlen, Daten und gemischten Text

Zahlen. „Die Ziffern in einer bestimmten Zahl, wie z. B. ‚541‘, einer Telefonnummer oder einer Kreditkartennummer, erscheinen immer in der gleichen Reihenfolge“, heißt es in Apples Richtlinien. Hebräisch verwendet westliche arabische Ziffern (0-9). Arabischer Text kann westliche oder östliche arabische Ziffern (٠-٩) verwenden, und die Verwendung variiert je nach Land und sogar Region. Entscheiden Sie pro Markt und halten Sie die Wahl für Preise, Daten und Formulare einheitlich.

Gemischte Richtung. Arabische Sätze enthalten oft englische Produktnamen, URLs oder Code. Der bidirektionale Algorithmus des Browsers platziert diese Läufe, aber die Interpunktion daneben kann auf der falschen Seite landen. Wickeln Sie vom Benutzer bereitgestellte oder in unbekannte Richtung gelieferte Fragmente ein <bdi> oder geben Sie ihnen dir="auto", wie das W3C für eingefügten Text vorschlägt.

Titel. Wenn ein RTL-Seitentitel mit lateinischen Buchstaben (einem Akronym, einer Marke) beginnt, kann es laut W3C-Hinweisen dazu kommen, dass Browser ihn in Tabs und Lesezeichen in der falschen Reihenfolge anzeigen. Hinzufügen &rlm; (die unsichtbare Markierung von rechts nach links) am Anfang des Titels behebt es.

6. Wählen Sie Schriftarten und Größen für das Skript

Arabische Buchstaben verbinden sich und ändern ihre Form je nach ihrer Position im Wort, und Hebräisch und Arabisch haben keine Großbuchstaben. Zwei Konsequenzen für das Design:

Wählen Sie Schriftarten aus, die für das Skript erstellt wurden. Eine lateinische Webschriftart greift auf eine Systemschriftart für Arabisch zurück, die oft nicht übereinstimmt. Laden Sie eine spezielle arabische oder hebräische Schriftart mit guten Hinweisen auf kleine Größen.
Balance-größen. Apple weist darauf hin, dass arabischer oder hebräischer Text neben lateinischem Text in Großbuchstaben gleicher Größe zu klein aussehen kann und dass eine Erhöhung der RTL-Schriftgröße um etwa 2 Punkte dies oft ausgleicht.
Schreiben Sie kein Leerzeichen in Arabisch. Durch zusätzliches Tracking werden die Verbindungen zwischen Buchstaben unterbrochen. Vermeiden Sie auch text-transform: uppercase auf Elemente, die RTL-Text enthalten können; dort hat es keine Wirkung, daher muss jedes Design, das zur Hervorhebung auf Großbuchstaben angewiesen ist, einer anderen Behandlung unterzogen werden.
Unterschiedliche Linienhöhen zulassen. Arabische Schriften verwenden mehr vertikalen Raum für Punkte und Markierungen. Testen Sie daher die Zeilenhöhe und den abgeschnittenen Text in Schaltflächen.

7. Testen Sie mit echten Inhalten und echten Lesern

Mock-ups gefüllt mit lateinischem Platzhaltertext verbergen die meisten RTL-Probleme. Vor dem Start:

Laden Sie echten übersetzten Text in jeder Vorlage, einschließlich der längsten Zeichenfolgen, Fehlermeldungen und E-Mails.
Testen Sie gemischte Saiten: ein arabischer Satz mit einem englischen Markennamen, einer URL und einem Preis.
Überprüfen Sie die Formulare Ende an Ende: Tipprichtung, Platzhalterausrichtung, Validierungsnachrichten, Telefon- und Kartenfelder (die von links nach rechts bleiben).
Test auf dem Handy, wo Wischgesten und Off-Canvas-Menüs von rechts geöffnet werden sollten.
Fragen Sie einen einheimischen Leser um sich durch die wichtigsten Fahrten zu klicken. Sie erkennen innerhalb von Sekunden einen umgekehrten Pfeil oder ein falsch platziertes Komma.
Behalten Sie die SEO-Grundlagen pro Sprache bei: jede RTL-Sprachversion auf einer eigenen URL, wobei hreflang sie mit den anderen Sprachen verknüpft. Sehen Sie sich unsere an Mehrsprachige SEO-Übersicht.

Wie ConveyThis bei RTL-Sprachen hilft

ConveyThis übersetzt Ihre Website ins Arabische, Hebräische, Persische, Urdu und die restlichen 210 unterstützten Sprachen und stellt jede Sprache auf ihrer eigenen URL bereit. Für Sprachen von rechts nach links können Sie eine Einstellung aktivieren, die übersetzte Seiten von rechts nach links umschaltet, wie in unserem Hilfeartikel zu gezeigt Textrichtung ändern. Wenn es eingeschaltet ist, wird die übersetzte Seite auf eingestellt dir="rtl" mit rechtsbündigem Text, während Ihre Seiten in der Originalsprache so belassen werden, wie Sie sie erstellt haben.

Was diese Einstellung nicht kann, ist, ein Stylesheet voller zu reparieren left „ right. Je sauberer Ihr CSS (Schritte 2 bis 4), desto besser funktioniert der automatische Schalter. Für die Spracharbeit selbst können Sie maschinelle Übersetzungen im visuellen Editor verfeinern, Markenbegriffe mit einem Glossar in Einklang bringen und Bilder pro Sprache austauschen Bild- und Medienübersetzung. Unsere Schritt-für-Schritt-Anleitung für Übersetzung einer Website ins Arabische deckt den Prozess von der Sprachwahl bis zum Start ab, und die Lokalisierungsübersicht erklärt, wie ConveyThis die Teile über die Übersetzung hinaus handhabt.

Häufig gestellte Fragen

Was ist RTL im Webdesign?

Das RTL-Design (von rechts nach links) passt eine Website für von rechts nach links gelesene Skripte an, beispielsweise Arabisch und Hebräisch. Dies bedeutet, dass auf der Seite dir=“rtl” festgelegt wird, das Layout und die Richtungssymbole gespiegelt werden und Logos, Zahlen, Mediensteuerelemente und Fotos unverändert bleiben.

Soll ich die RTL-Richtung in CSS oder HTML festlegen?

In HTML. Das W3C empfiehlt, dem HTML-Element dir=“rtl” hinzuzufügen und niemals CSS zum Festlegen der Basisrichtung zu verwenden, da die Richtung Teil der Bedeutung des Inhalts ist und auch ohne das Stylesheet funktionieren muss.

Welche Symbole sollten in RTL nicht gespiegelt werden?

Logos, universelle Markierungen wie das Häkchen, Symbole realer Objekte wie Uhren, Bedienelemente, die auf eine tatsächliche Richtung zeigen, und Medienwiedergabesteuerungen. Pfeile zur Navigation und zum Fortschritt sollten gespiegelt werden.

Werden Zahlen auf Arabisch von rechts nach links geschrieben?

Nein. Die Ziffern innerhalb einer Zahl behalten im arabischen und hebräischen Text die gleiche Reihenfolge. Im Arabischen können je nach Land west- oder ostarabische Ziffern verwendet werden, die Reihenfolge der Ziffern kehrt sich jedoch nie um.

Funktionieren logische CSS-Eigenschaften in allen modernen Browsern?

Ja, die logischen Kerneigenschaften wie margin-inline-start, padding-inline-end und text-align: start werden in allen aktuellen gängigen Browsern unterstützt. Überprüfen Sie alle neueren oder weniger gängigen Eigenschaften auf MDN, bevor Sie sich darauf verlassen.

Beginnen Sie mit der Übersetzung

Ein sauberes RTL-Layout erfordert immer noch genaue arabische oder hebräische Inhalte dahinter. Du kannst Erstellen Sie ein ConveyThis-Konto, fügen Sie eine Sprache von rechts nach links hinzu und überprüfen Sie das Ergebnis auf Ihren eigenen Seiten.