/* =========================================================================== Rechts nach links — für Arabisch =========================================================================== Wird NUR auf Seiten mit dir="rtl" geladen. Das Bauskript hängt diese Datei dort ein und sonst nirgends. WARUM SO WENIG DRINSTEHT ----------------------- Fast alles erledigt der Browser von selbst, sobald dir="rtl" am steht: Textrichtung, Reihenfolge in flex und grid, die Seite, an der Aufzählungspunkte sitzen, die Richtung von Einzügen. Nachziehen muss man nur, was im CSS ausdrücklich „links" oder „rechts" sagt statt „Anfang" oder „Ende". Das waren im gesamten Stylesheet-Bestand vierzehn Stellen. Ich habe sie einzeln durchgesehen, statt pauschal alles zu spiegeln — pauschales Spiegeln erwischt auch das, was gar nicht gespiegelt gehört. WAS BEWUSST NICHT GESPIEGELT WIRD --------------------------------- Zahlen, Preise, Telefonnummern und der Markenname SHNY OS bleiben von links nach rechts. Arabisch schreibt Ziffern ebenfalls in dieser Richtung — „149 €" bleibt „149 €" und wird nicht zu „€ 941". =========================================================================== */ /* --- Kopfzeile und Fußzeile ---------------------------------------------- */ /* legal.css Z29/Z36: margin-left an Navigation und Sprachliste. Auf Arabisch muss der Abstand auf die andere Seite. */ [dir="rtl"] header.site nav { margin-left: 0; margin-right: auto; } [dir="rtl"] .langs { margin-left: 0; margin-right: 12px; } /* legal.css Z151: Abstand zwischen den Fußzeilen-Verweisen. */ [dir="rtl"] .legal-foot a { margin-right: 0; margin-left: 18px; } /* --- Rechtstexte --------------------------------------------------------- */ /* legal.css Z100/Z103: Die Häkchen der Aufzählungen sitzen absolut bei left: 0. Auf Arabisch gehören sie an den rechten Rand — dorthin, wo die Zeile anfängt. */ [dir="rtl"] .legal-body ul, [dir="rtl"] .legal-body ol { padding-left: 0; padding-right: 0; } [dir="rtl"] .legal-body li { padding-left: 0; padding-right: 26px; } [dir="rtl"] .legal-body li::before { left: auto; right: 0; } /* legal.css Z128: Die farbige Kante des Hinweiskastens. */ [dir="rtl"] .legal-note { border-left: 0; border-right: 3px solid #ff2594; } /* --- Tabellen ------------------------------------------------------------ */ /* design-system.css Z284: text-align:left in Tabellenköpfen. `start` statt `right`: Damit stimmt es in beiden Richtungen, falls diese Regel je in die Hauptdatei zurückwandert. */ [dir="rtl"] .table th { text-align: start; } /* --- Auswahlfelder ------------------------------------------------------- */ /* design-system.css Z257: Das Pfeilsymbol des Auswahlfelds sitzt rechts. Auf Arabisch gehört es nach links, und der Innenabstand, der dafür Platz lässt, muss mitwandern — sonst steht der Pfeil auf dem Text. */ [dir="rtl"] .select { background-position: left 14px center; padding-left: 38px; padding-right: 14px; } /* --- Seitenleiste -------------------------------------------------------- */ /* design-system.css Z328/Z330: Die Markierung des aktiven Eintrags. */ [dir="rtl"] .sidebar nav a, [dir="rtl"] .sidebar nav a.active { border-left: 0; border-right: 3px solid transparent; } [dir="rtl"] .sidebar nav a.active { border-right-color: currentColor; } /* --- Hinweisleiste am unteren Rand --------------------------------------- */ /* hinweis.css Z5/Z6 setzt left und right gleichzeitig — das ist bereits symmetrisch und braucht nichts. Steht hier nur, damit beim nächsten Lesen niemand sucht, warum sie fehlt. */ /* --- Sprungmarke für die Tastaturbedienung -------------------------------- */ /* legal.css Z171/Z175: Der Sprunglink parkt bei left:-9999px außerhalb des Bilds. Auf Arabisch schiebt ihn dasselbe -9999px ins Bild hinein — dann klebt ein unsichtbarer Link quer über der Seite. */ [dir="rtl"] .skip-link { left: auto; right: -9999px; } [dir="rtl"] .skip-link:focus { right: 0; left: auto; } /* --- Zahlen und Marke bleiben, wie sie sind ------------------------------ */ /* `unicode-bidi: isolate` sorgt dafür, dass eine lateinische Einsprengsel- Gruppe im arabischen Fließtext nicht die umgebende Richtung durcheinander bringt. Ohne das rutscht ein Satz wie „… mit SHNY OS ab 99 €" in eine Reihenfolge, die kein Mensch so liest. */ [dir="rtl"] .marke, [dir="rtl"] .preis, [dir="rtl"] [lang="de"], [dir="rtl"] [lang="en"] { unicode-bidi: isolate; }