6 Tipps für internationale Websites

Donnerstag, 27. Juni 2013

Hinweis der Redaktion: Nachdem wir in früheren Blogs verschiedene Möglichkeiten zur Internationalisierung der Google Websuche vorgestellt haben, hier nun ein Beitrag vom Google Web Studio-Team mit Tipps für Webentwickler.

Viele Websites stehen in mehr als einer Sprache zur Verfügung und die Anzahl mehrsprachiger Websites steigt kontinuierlich. Eine Website in mehreren Sprachen anzubieten, umfasst jedoch weit mehr als die reine Übersetzung oder Lokalisierung (L10N). Bei der Internationalisierung (I18N) von Websites müssen verschiedene Dinge beachtet werden. Daher möchten wir euch heute ein paar Tipps für internationale Websites geben.


1. Seiten im Markup und nicht im Stylesheet für die Internationalisierung vorbereiten


Die Sprache und die Direktionalität, also die Schreibrichtung, stehen in engem Zusammenhang mit dem Inhalt des Dokuments. Ihr solltet daher Angaben zur Internationalisierung immer im Markup und nicht im Stylesheet vornehmen. Verwendet @lang und @dir zumindest im HTML -Element:
<html lang="ar" dir="rtl">


Vermeidet eigene Lösungen wie spezielle Klassen oder IDs.

Wenn es um die I18N in Stylesheets geht, könnt ihr euch nicht immer auf CSS verlassen: In den CSS-Spezifikationen wird festgelegt, dass übereinstimmende User-Agents Propertys wie direction oder unicode-bidi ignorieren können . Bei XML sieht die Sache wieder anders aus. In XML steht kein spezifisches Markup für die Internationalisierung zur Verfügung. Hier ist es also ratsam, CSS einzusetzen.


2. Ein Stylesheet für alle Sprachen


Erstellt ein einziges Stylesheet für die Schreibrichtungen LTR (links nach rechts) und RTL (rechts nach links) und alle Sprachen. Damit sind eure Regeln zur Internationalisierung leicht verständlich und bequem zu verwalten.


Fügt also kein alternatives Stylesheet wie das Folgende ein:

<link href="default.rtl.css" rel="stylesheet">

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:
  1. 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.
  2. 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.
  3. 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.

Falls ihr Fragen oder Feedback habt, besucht das Webmasterforum oder postet eure Kommentare hier.

Post von Jens O. Meiert und Tony Ruscoe , Tech Leads, Google Web Studio (Veröffentlicht von Johannes Mehlem , Search Quality Team)