Arabisch-RTL-Web

Arabisch RTL Web

Eine Checkliste für arabische Seiten, die natürlich lesbar sind, sich auf 375px korrekt anordnen und nie Zahlen, URLs oder englische Wörter durcheinanderbringen. Wenden Sie jeden Abschnitt an, der die Aufgabe betrifft, und führen Sie dann die abschließende Checkliste aus.

1. Richtung und Sprache

• Wurzelelement: <html lang="ar" dir="rtl">, geschrieben im HTML (nicht durch JavaScript hinzugefügt), damit die erste Darstellung bereits RTL ist.
• Ersetzen Sie dir nicht durch CSS direction: rtl. Das Attribut steuert auch Bidi, Formularsteuerelemente und Screenreader.
• Ein englischer Block innerhalb einer arabischen Seite: <p lang="en" dir="ltr">. Vom Benutzer eingegebener Text (Namen, Kommentare, Chat): dir="auto".

2. Layout mit logischen Eigenschaften

Physisches Links/Rechts wird nie umgekehrt. Verwenden Sie logische Eigenschaften, damit ein Stylesheet in beiden Richtungen funktioniert.

Vermeiden	Verwenden
margin-left, padding-right	margin-inline-start, padding-inline-end
left: 0, right: 0	inset-inline-start: 0, inset-inline-end: 0
text-align: left	text-align: start
border-left	border-inline-start
border-top-left-radius	border-start-start-radius
float: left	float: inline-start

• Flexbox und Grid folgen bereits dir: In RTL beginnt flex-direction: row rechts. Fügen Sie niemals row-reverse hinzu, um RTL zu "korrigieren".
• transform: translateX(), background-position und Box-Schatten-Offsets sind physisch. Drehen Sie sie bei Bedarf mit :dir(rtl) oder [dir="rtl"] um.
• Tailwind: ms-*, me-*, ps-*, pe-*, start-*, end-*, text-start und die rtl: / ltr:-Varianten.

3. Arabische Webfonts

• Wählen Sie eine Familie, die für Arabisch entwickelt wurde (IBM Plex Sans Arabic, Noto Naskh Arabic, Noto Sans Arabic, Tajawal, Cairo, Almarai, Readex Pro). Behalten Sie dekorative Schriften wie Aref Ruqaa nur für Überschriften.
• Hosten Sie WOFF2-Dateien selbst: keine Drittanbieter-Anfragen, funktioniert offline, nichts gelangt an ein Font-CDN. Überprüfen Sie die Lizenz (OFL erlaubt Selbsthosting).
• Verwenden Sie font-display: swap und teilen Sie arabische und lateinische Dateien mit unicode-range, sodass jede Seite nur das herunterlädt, was sie verwendet:

@font-face { font-family: 'Plex'; font-weight: 400; font-display: swap;
  src: url(plex-400-ar.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Plex'; font-weight: 400; font-display: swap;
  src: url(plex-400-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F; }
body { font: 400 17px/1.75 'Plex', 'Segoe UI', Tahoma, sans-serif; }

• Arabisch benötigt eine größere Zeilenhöhe (1,6 bis 1,8) für diakritische Zeichen und Unterlängen sowie eine etwas größere Schriftgröße als lateinischer Text.
• Verwenden Sie niemals letter-spacing bei Arabisch (es unterbricht die Buchstabenverbindung). Kein text-transform, keine falschen Kursivschriften. Vermeiden Sie text-align: justify in schmalen Spalten.
• Dehnen Sie Wörter nicht mit Tatweel (U+0640). Es unterbricht die Suche und das Kopieren/Einfügen.

4. Bidi: Zahlen, URLs und Englisch innerhalb von Arabisch

Der Unicode-Bidi-Algorithmus ordnet neutrale Zeichen neben Zahlen und lateinischem Text neu an. Zwei klassische Fehler in einem RTL-Absatz:

• Telefon +966 55 123 4567 zeigt seine Zifferngruppen in umgekehrter Reihenfolge: 4567 123 55 +966.
• Zeitraum 10:00 - 12:00 wird als 12:00 - 10:00 angezeigt.

Korrekturen:

• <bdi> um eingefügte Werte unbekannter Richtung: مرحبًا <bdi>${userName}</bdi>، أهلًا بك.
• dir="ltr" bei Werten, die immer LTR sind: <span dir="ltr">+966 55 123 4567</span>, URLs, E-Mails, Dateipfade, IBANs, <code dir="ltr">, <pre dir="ltr">.
• CSS für wiederholte Muster: .num, .code { unicode-bidi: isolate; }. Beachten Sie, dass <bdi> standardmäßig isoliert.
• Eingaben für E-Mail, URL und Telefon: <input type="email" dir="ltr">.
• Wenn Markup unmöglich ist (Dokumenttitel, Benachrichtigungen, einfache Zeichenfolgen), umschließen Sie sie mit Unicode-Isolaten: FSI U+2068 ... PDI U+2069 oder LRI U+2066 ... PDI für bekannten LTR-Text.

5. Ziffern: ein System pro Seite

• Wählen Sie lateinische Ziffern 0-9 oder arabisch-indische Ziffern ٠-٩ (U+0660 bis U+0669) und verwenden Sie sie überall auf der Seite, einschließlich Tabellen, Diagrammen und Daten.
• Eine Mischung verwirrt die Leser (eine Tabelle mit beidem sieht wie ein Fehler aus), unterbricht die Suche ("15" stimmt nicht mit "١٥" überein), das Sortieren und das Kopieren/Einfügen in Tabellenkalkulationen.
• Persische Ziffern ۰-۹ (U+06F0 bis U+06F9) sind andere Codepunkte. Mischen Sie sie nicht ein.
• Intl-Standardeinstellungen unterscheiden sich je nach Locale und Engine-Version: In Node 24 formatiert ar-SA mit arabisch-indischen Ziffern, während einfaches ar lateinische Ziffern ergibt. Legen Sie das Nummerierungssystem explizit fest: new Intl.NumberFormat('ar-SA-u-nu-latn') oder 'ar-SA-u-nu-arab'.
• Bei arabisch-indischen Ziffern ist das Dezimaltrennzeichen ٫ (U+066B) und das Tausendertrennzeichen ٬ (U+066C).
• Echte Falle: Ein Mittelpunkt (U+00B7), der als Trennzeichen neben arabisch-indischen Ziffern verwendet wird, sieht aus wie die arabisch-indische Null (U+0660), die ebenfalls ein kleiner Punkt ist. "12, Trennzeichen, 3" wird dann als "1203" gelesen. Trennen Sie stattdessen mit dem arabischen Komma «،», einem Schrägstrich oder zusätzlichem Abstand (CSS gap).

6. Arabische Interpunktion

• Verwenden Sie ، (U+060C), ؛ (U+061B) und ؟ (U+061F), nicht , ; ?. Der Punkt und ! werden geteilt.
• Kein Leerzeichen vor einem Satzzeichen, ein Leerzeichen danach: «كيف حالك؟» nicht «كيف حالك ؟».
• Wählen Sie einen Anführungsstil («...» oder "...") pro Seite.

7. Symbole und Spiegelung

Spiegeln Sie Symbole, die Richtung oder Reihenfolge anzeigen: Zurück- und Weiter-Pfeile, Chevrons in Listen und Breadcrumbs, Schrittanzeiger und Fortschrittsrichtung, "Senden", Texteinzug und Listensymbole.

Nicht spiegeln: Logos und Markenzeichen, Mediensteuerelemente (Wiedergabe, Zurückspulen, Vorspulen), Uhren und Timer, Häkchen, Fotos und Symbole, die lateinische Buchstaben oder Ziffern enthalten.

:dir(rtl) .icon-dir { transform: scaleX(-1); }   /* opt-in Klasse, niemals global */

8. Zahleneingabe von arabischen Tastaturen

• Bevorzugen Sie <input inputmode="decimal" autocomplete="off"> gegenüber type="number". Der Wert einer Zahleneingabe ist nur mit ASCII-Ziffern gültig, daher können arabisch-indische Ziffern als leere Zeichenfolge zurückkommen; es fügt auch Drehfelder hinzu.
• Benutzer geben ٠-٩ ein, das arabische Dezimaltrennzeichen ٫ und manchmal persische Ziffern. Normalisieren Sie vor Number():

function parseArabicNumber(raw) {
  const s = String(raw ?? '').trim()
    .replace(/[٠-٩]/g, (d) => d.charCodeAt(0) - 0x0660)
    .replace(/[۰-۹]/g, (d) => d.charCodeAt(0) - 0x06F0)
    .replace(/٫/g, '.')
    .replace(/٬/g, '');
  if (s === '') return null;          // Number('') ist 0, also zuerst auf leer prüfen
  const n = Number(s);
  return Number.isFinite(n) ? n : NaN;
}
parseArabicNumber('٩٥٫٥'); // 95.5

• Entscheiden Sie, wie ein eingegebenes , behandelt wird (Dezimaltrennzeichen oder Tausendertrennzeichen) und dokumentieren Sie es.
• Zeigen Sie Validierungsmeldungen auf Arabisch an, setzen Sie aria-invalid und verknüpfen Sie die Meldung mit aria-describedby.
• Sortieren Sie arabische Namen mit new Intl.Collator('ar').compare. Für die Suche normalisieren Sie Alef-Formen (أ إ آ zu ا), entfernen Sie Tashkeel und Tatweel sowohl in der Abfrage als auch in den Daten.

9. Testen

• Testen Sie bei 375px Breite (und 320px, wenn möglich). Bestätigen Sie document.documentElement.scrollWidth <= innerWidth.
• Testen Sie lange arabische Wörter mit verbundenen Buchstaben, wie «والمستشفيات» oder «باستخداماتها», in Überschriften und Schaltflächen. Verwenden Sie overflow-wrap: anywhere bei Überschriften und Karten und min-width: 0 bei Flex- und Grid-Kindern.
• Verwenden Sie echten arabischen Inhalt mit gemischtem Englisch und Zahlen, nicht Lorem Ipsum.
• Überprüfen Sie Safari auf iOS und Chrome auf Android, sowie 200% Zoom und die Tastaturfokus-Reihenfolge (Tab bewegt sich von rechts nach links).

10. Die [hidden]-Falle

Das Attribut hidden ist nur ein User-Agent display: none. Jede Autorenregel wie .card { display: flex } überschreibt es, sodass el.hidden = true stillschweigend nicht mehr funktioniert. Fügen Sie dies dem Basis-Stylesheet hinzu:

[hidden] { display: none !important; }

Abschließende Checkliste

• <html lang="ar" dir="rtl"> im Quelltext
• Keine physischen Links/Rechts-Eigenschaften im neuen CSS
• Selbst gehostete arabische Schriftart, font-display: swap, unicode-range-Aufteilung
• Telefonnummern, URLs, Code und Benutzernamen isoliert
• Ein Ziffernsystem; kein Mittelpunkt neben arabisch-indischen Ziffern
• Arabische Interpunktion, kein Leerzeichen davor
• Nur richtungsbezogene Symbole gespiegelt
• Zahleneingaben akzeptieren ٠-٩ und ٫
• Kein horizontaler Scroll bei 375px; lange Wörter umbrechen
• [hidden] { display: none !important; } vorhanden