Internationalisierung

Das Web ist für alle Menschen auf der Welt verfügbar – das ist schon im Namen enthalten. Das bedeutet, dass Ihre Website potenziell für alle Nutzer mit Internetzugang verfügbar ist, unabhängig davon, wo sie sich befinden, welches Gerät sie verwenden oder welche Sprachen sie sprechen.

Ziel des responsiven Designs ist es, Ihre Inhalte für alle verfügbar zu machen. Die Anwendung dieser Philosophie auf menschliche Sprachen ist die treibende Kraft hinter der Internationalisierung – der Vorbereitung Ihrer Inhalte und Designs für ein internationales Publikum.

Logische Eigenschaften

Deutsch wird von links nach rechts und von oben nach unten geschrieben. Das ist aber nicht bei allen Sprachen der Fall. Einige Sprachen wie Arabisch und Hebräisch werden von rechts nach links gelesen und einige japanische Schriftarten werden vertikal statt horizontal gelesen. Um diese Schreibmodi zu berücksichtigen, wurden in CSS logische Eigenschaften eingeführt.

Wenn Sie CSS schreiben, haben Sie möglicherweise Richtungs-Keywords wie „left“, „right“, „top“ und „bottom“ verwendet. Diese Keywords beziehen sich auf das physische Layout des Geräts des Nutzers.

Logische Eigenschaften beziehen sich dagegen auf die Kanten eines Felds in Bezug auf den Fluss von Inhalten. Wenn sich der Schreibmodus ändert, wird das mit logischen Eigenschaften geschriebene CSS entsprechend aktualisiert. Bei richtungsbezogenen Attributen ist das nicht der Fall.

Die Richtungseigenschaft margin-left bezieht sich immer auf den linken Rand eines Inhaltsfelds. Die logische Eigenschaft margin-inline-start bezieht sich auf den linken Rand eines Inhaltsfelds in einer linksläufigen Sprache und auf den rechten Rand eines Inhaltsfelds in einer rechtsläufigen Sprache.

Damit sich Ihre Designs an verschiedene Schreibmodi anpassen, sollten Sie richtungsbezogene Eigenschaften vermeiden. Verwenden Sie stattdessen logische Eigenschaften.

.byline {
  text-align: right;
}

.byline {
  text-align: end;
}

Wenn CSS einen bestimmten Richtungsbezug wie left oder right hat, gibt es eine entsprechende logische Property. Wo wir früher margin-left hatten, haben wir jetzt auch margin-inline-start.

In einer Sprache wie Deutsch, in der der Text von links nach rechts fließt, entspricht inline-start „links“ und inline-end „rechts“.

In einer Sprache wie Deutsch, in der der Text von links nach rechts geschrieben wird, entspricht block-start „links“ und block-end „rechts“.

Wenn Sie logische Eigenschaften in Ihrem CSS verwenden, können Sie dasselbe Stylesheet für Übersetzungen Ihrer Seiten verwenden. Auch wenn Ihre Seiten in Sprachen übersetzt werden, die von rechts nach links oder von unten nach oben geschrieben werden, wird das Design entsprechend angepasst. Sie müssen nicht für jede Sprache separate Designs erstellen. Durch die Verwendung logischer Eigenschaften reagiert Ihr Design auf jeden Schreibmodus. So können Sie mit Ihrem Design mehr Menschen erreichen, ohne für jede Sprache separate Designs erstellen zu müssen.

Moderne CSS-Layouttechniken wie grid und flexbox verwenden standardmäßig logische Eigenschaften. Wenn Sie in Bezug auf inline-start und block-start anstelle von left und top denken, werden Sie diese modernen Techniken leichter verstehen.

Nehmen Sie ein gängiges Muster wie ein Symbol neben einem Text oder ein Label neben einem Formularfeld. Anstatt „Das Label sollte einen Rand rechts haben“ sollten Sie denken: „Das Label sollte einen Rand am Ende seiner Inline-Achse haben.“

label {
  margin-right: 0.5em;
}

label {
  margin-inline-end: 0.5em;
}

Wenn diese Seite in eine Sprache mit Leserichtung von rechts nach links übersetzt wird, müssen die Formatierungen nicht aktualisiert werden. Sie können den Effekt, den die Anzeige Ihrer Seiten in einer Sprache mit Leserichtung von rechts nach links hat, mit dem Attribut dir im Element html simulieren. Ein Wert von ltr bedeutet „von links nach rechts“. Ein Wert von „rtl“ bedeutet „von rechts nach links“.

Hier finden Sie eine interaktive Demonstration, mit der Sie alle Permutationen von Dokumentrichtungen (Blockachse) und Schreibmodi (Inlineachse) ausprobieren können.

Sprache der Seite ermitteln

Es empfiehlt sich, die Sprache Ihrer Seite mit dem Attribut lang für das Element html anzugeben.

<html lang="en">

Das Beispiel bezieht sich auf eine Seite auf Englisch. Sie können noch genauer werden. So deklarieren Sie, dass auf einer Seite US-Englisch verwendet wird:

<html lang="en-us">

Die Angabe der Sprache Ihres Dokuments ist für Suchmaschinen nützlich. Außerdem ist es nützlich für assistive Technologien wie Screenreader und Sprachassistenten. Wenn Sie Sprachmetadaten angeben, können diese Arten von Sprachsynthesizern Ihre Inhalte richtig aussprechen.

Das Attribut lang kann für jedes HTML-Element verwendet werden, nicht nur für html. Wenn Sie die Sprache auf Ihrer Webseite ändern, geben Sie dies an. In diesem Fall ist ein Wort auf Deutsch:

<p>I felt some <span lang="de">schadenfreude</span>.</p>

Sprache eines verknüpften Dokuments ermitteln

Es gibt ein weiteres Attribut namens hreflang, das Sie für Links verwenden können. Für das hreflang-Attribut wird dieselbe Sprachcodenotation wie für das lang-Attribut verwendet. Es beschreibt die Sprache des verknüpften Dokuments. Wenn eine Übersetzung Ihrer gesamten Seite auf Deutsch verfügbar ist, verlinken Sie sie so:

<a href="/path/to/german/version" hreflang="de">German version</a>

Wenn Sie Text auf Deutsch verwenden, um den Link zur deutschen Version zu beschreiben, verwenden Sie sowohl hreflang als auch lang. Hier ist der Text „Deutsche Version“ als deutschsprachig gekennzeichnet und der Ziellink ebenfalls:

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

Sie können das Attribut hreflang auch für das link-Element verwenden. Das gehört in den head Ihres Dokuments:

<link href="/path/to/german/version" rel="alternate" hreflang="de">

Im Gegensatz zum Attribut lang, das für jedes Element verwendet werden kann, kann hreflang nur auf a- und link-Elemente angewendet werden.

Internationalisierung im Design berücksichtigen

Wenn Sie Websites entwerfen, die in andere Sprachen und Schreibmodi übersetzt werden sollen, sollten Sie die folgenden Faktoren berücksichtigen:

• In einigen Sprachen, z. B. Deutsch, sind lange Wörter üblich. Die Benutzeroberfläche muss sich an diese Wörter anpassen. Vermeiden Sie daher schmale Spalten. Sie können auch CSS verwenden, um Bindestriche einzufügen.
• Achten Sie darauf, dass Ihre line-height-Werte Zeichen wie Akzente und andere diakritische Zeichen enthalten können. Textzeilen, die auf Englisch gut aussehen, können in einer anderen Sprache überlappen.
• Wenn Sie eine Web-Schriftart verwenden, muss sie eine ausreichende Anzahl von Zeichen für die Sprachen enthalten, in die Sie übersetzen möchten.
• Erstellen Sie keine Bilder, die Text enthalten. In diesem Fall müssen Sie separate Bilder für jede Sprache erstellen. Trennen Sie stattdessen den Text und das Bild und verwenden Sie CSS, um den Text über das Bild zu legen.

International denken

Attribute wie lang und hreflang machen Ihr HTML für die Internationalisierung aussagekräftiger. Logische Eigenschaften machen Ihr CSS ebenfalls anpassungsfähiger.

Wenn Sie es gewohnt sind, in Bezug auf top, bottom, left und right zu denken, fällt es Ihnen vielleicht schwer, stattdessen an block start, block end, inline start und inline end zu denken. Aber es lohnt sich. Logische Eigenschaften sind der Schlüssel zu wirklich responsiven Layouts.

Dein Wissen wird getestet

Testen Sie Ihr Wissen zur Internationalisierung.

Als Nächstes erfahren Sie, wie Sie Seitenlayouts, auch Makrolayouts genannt, erstellen.