6 Quick Tips for International Websites

Freitag, 31. Mai 2013

Hinweis der Redaktion: Nachdem wir uns zuvor mit verschiedenen Möglichkeiten zur Handhabung
der Internationalisierung für die Websuche von Google befasst haben,
folgt hier ein Beitrag von Mitgliedern des Google Web Studio-Teams mit Tipps für Webentwickler.

Viele Websites existieren in mehr als einer Sprache, und immer mehr Websites werden für
mehr als eine Sprache verfügbar gemacht. Dennoch bedeutet das Erstellen einer Website für mehr als eine Sprache nicht einfach nur
Übersetzung oder Lokalisierung (L10N) und das war’s. Es erfordert ein paar Dinge mehr, die alle
mit der Internationalisierung (I18N) zusammenhängen. In diesem Beitrag teilen wir einige Tipps für internationale
Websites.

Machen Sie Seiten im Markup I18N-bereit, nicht in den Stylesheets

Sprache und Direktionalität sind untrennbar mit dem Inhalt des Dokuments verbunden. Wenn möglich, sollten
Sie daher für Internationalisierungszwecke immer Markup statt Stylesheets verwenden. Verwenden Sie
@lang und @dir, zumindest beim html Element:

Vermeiden Sie eigene Lösungen wie spezielle Klassen oder IDs.

Was I18N in Stylesheets betrifft, können Sie sich nicht immer auf CSS verlassen: Die CSS-Spezifikation legt fest, dass konforme
User-Agents
Eigenschaften wie direction oder unicode-bidiignorieren können.
(Bei XML ändert sich die Situation wieder. XML bietet kein spezielles Internationalisierungs-Markup, daher
empfiehlt es sich hier, CSS zu verwenden.)

Verwenden Sie ein einziges Stylesheet für alle Locales

Anstatt separate Stylesheets für LTR- und RTL-Direktionalität oder gar für jede Sprache zu erstellen,
bündeln Sie alles in einem Stylesheet. Das macht Ihre Internationalisierungsregeln viel
einfacher zu verstehen und zu pflegen.

Anstatt also ein alternatives Stylesheet einzubinden wie

verwenden Sie einfach Ihr bestehendes

Wenn Sie diesen Ansatz wählen, müssen Sie bestehende CSS-Regeln durch ihre internationalen
Pendants ergänzen:

Verwenden Sie den [dir='rtl'] Attribut-Selektor

Da wir empfehlen, beim vorhandenen Stylesheet zu bleiben (Tipp Nr. 2), benötigen Sie eine andere Möglichkeit,
Elemente auszuwählen, die Sie für die andere Direktionalität unterschiedlich stylen müssen. Da RTL-Inhalte
ein spezifisches Markup erfordern (Tipp Nr. 1), sollte dies einfach sein: Für die meisten modernen Browser können wir einfach Folgendes verwenden:
[dir='rtl'].

Hier ist ein Beispiel:

Verwenden Sie den :lang() Pseudo-Klassenselektor

Um Dokumente einer bestimmten Sprache anzusprechen, verwenden Sie die :lang() Pseudo-Klasse. (Beachten
Sie, dass wir hier von Dokumenten sprechen, nicht von Textausschnitten, da das Ansprechen von Ausschnitten einer bestimmten
Sprache die Dinge etwas komplexer macht.)

Wenn Sie beispielsweise feststellen, dass Fettdruck bei chinesischen Dokumenten nicht sehr gut funktioniert
(was tatsächlich der Fall ist), verwenden Sie Folgendes:

Spiegeln Sie links- und rechtsbezogene Werte

Bei der Arbeit mit sowohl LTR- als auch RTL-Inhalten ist es wichtig, alle Werte zu spiegeln, die die Direktionalität
ändern. Zu den Eigenschaften, auf die Sie achten sollten, gehört alles in Bezug auf Ränder, Abstände
und Innenabstände, aber auch positionsbezogene Eigenschaften, floatoder
text-align.

Beispielsweise muss das, was text-align: left in LTR ist, zu
text-align: right in RTL werden.

Es gibt Tools, die das “Umdrehen” der Direktionalität erleichtern. Eines davon ist
CSSJanus, obwohl es
für das Konzept „separates Stylesheet“ und nicht für „dasselbe Stylesheet“ geschrieben wurde.

Behalten Sie die Details im Auge

Achten Sie auf folgende Punkte:

• Bilder, die für links oder rechts entworfen wurden, wie Pfeile oder Hintergründe, Lichtquellen in
  box-shadow und text-shadow values, sowie JavaScript-Positionierung und
  -Animationen: Diese müssen möglicherweise in die entgegengesetzte Richtung gespiegelt und angepasst werden.
• Schriftgrößen und Schriften, insbesondere bei nicht-lateinischen Alphabeten: Je nach Skript und Schriftart
  kann die Standard-Schriftgröße zu klein sein. Erwägen Sie eine Anpassung der Größe und gegebenenfalls der Schriftart.
• CSS
  Spezifität:
  Bei Verwendung des [dir='rtl'] (oder [dir='ltr']) Hooks (Tipp Nr. 2) verwenden Sie
  einen Selektor mit höherer Spezifität. Dies kann zu Problemen führen. Behalten Sie das im Auge und
  passen Sie es entsprechend an.

Wenn Sie Fragen oder Feedback haben, besuchen Sie das
Internationalization Webmaster Help Forum,
oder hinterlassen Sie hier Ihre Kommentare.

Verfasst von
Jens O. Meiert
und
Tony Ruscoe,
Tech Leads, Google Web Studio