Verwendet stattdessen das bereits vorhandene Stylesheet:
<link href="default.css" rel="stylesheet">
Bei diesem Ansatz müssen bestehende CSS-Regeln mit ihren internationalen Entsprechungen ergänzt werden:
3. Attributselektor [dir='rtl'] verwenden
Da ihr das vorhandene Stylesheet verwenden solltet (Tipp Nr. 2), müsst ihr Elemente, die für eine andere Schreibrichtung angepasst werden müssen, auf andere Weise auswählen. Inhalte, die von rechts nach links geschrieben werden, benötigen ein spezifisches Markup (Tipp Nr. 1). Die Auszeichnung dafür ist relativ unkompliziert: Für die meisten modernen Browser könnt ihr einfach [dir='rtl'] hinzufügen.
Beispiel:
aside {
float: right;
margin: 0 0 1em 1em;
}
[dir='rtl'] aside {
float: left;
margin: 0 1em 1em 0;
}
4. Pseudoklasse :lang() verwenden
Um Dokumente auf bestimmte Sprachen auszurichten, setzt die Pseudoklasse :lang() ein. Beachtet bitte, dass wir hier über Dokumente und nicht über Text-Snippets sprechen. Die Ausrichtung auf Snippets einer bestimmten Sprache ist ein etwas komplexerer Vorgang.
Wenn ihr zum Beispiel feststellt, dass die Fettformatierung für eure chinesischen Dokumente nicht gut funktioniert (was tatsächlich auch der Fall ist), verwendet folgendes Markup:
:lang(zh) strong,
:lang(zh) b {
font-weight: normal;
color: #900;
}
5. Werte für LTR- und RTL-Dokumente spiegeln
Wenn ihr sowohl mit LTR- als auch mit RTL-Inhalten arbeitet, ist es wichtig, alle Werte zu spiegeln, die von der geänderten Schreibrichtung betroffen sind. Hier müssen Propertys für Rahmen, Außen- und Innenabstände sowie Propertys zur Positionierung, float oder text-align, beachtet werden.
Das Markup text-align: left in LTR-Dokumenten muss also zum Beispiel für RTL-Dokumente in text-align: right geändert werden.
Es gibt Tools, die euch den Wechsel der Schreibrichtung erleichtern. Eines dieser Tools ist CSSJanus, das jedoch zur Verwendung mit separaten Stylesheets und nicht zur Verwendung mit einem einzigen Stylesheet entwickelt wurde.
6. Auf Details achten
Behaltet die folgenden Punkte im Hinterkopf:
- Bilder für Links-nach-rechts-Dokumente, wie Pfeile oder Hintergründe, Lichtquellen in Werten für box-shadow und text-shadow sowie JavaScript-Positionierung und -Animationen: Diese Elemente müssen eventuell ausgetauscht und für die andere Schreibrichtung angepasst werden.
- Schriftgrößen und Schriftarten, vor allem für nicht lateinische Alphabete: Je nach Schrift und Schriftart kann die Standardschriftgröße zu klein sein. Optimiert die Größe und wenn nötig auch die Schriftart.
- Spezifizität in CSS: Wenn ihr [dir='rtl'] (oder [dir='ltr']) verwendet (Tipp Nr. 2), setzt ihr damit einen Selektor höherer Spezifizität ein. Dies kann zu Problemen führen. Achtet auf diese Elemente und passt sie entsprechend an.
