Lokalisierung

Das World Wide Web ist für jeden zugänglich – es ist in seinem Namen enthalten! Das bedeutet, dass Ihre Website potenziell für jeden zugänglich ist, der Zugriff auf das Internet hat, unabhängig davon, wo sie sich befinden, welches Gerät sie verwenden oder welche Sprachen sie sprechen.

Das Ziel des responsiven Designs ist es, Ihre Inhalte für alle zugänglich zu machen. Diese Philosophie auf menschliche Sprachen anzuwenden, ist die treibende Kraft hinter der Internationalisierung – die Vorbereitung deiner Inhalte und Designs für ein internationales Publikum.

Logische Attribute

Englisch ist von links nach rechts und von oben nach unten geschrieben. aber nicht alle Sprachen sind so geschrieben. In einigen Sprachen wie Arabisch und Hebräisch wird von rechts nach links gelesen, und einige japanische Schriftbilder lesen vertikal statt horizontal. Um diese Schreibmodi zu unterstützen, logische Eigenschaften in CSS eingeführt.

Wenn Sie CSS-Code schreiben, haben Sie möglicherweise Richtungs-Keywords wie „links“, „rechts“, „oben“ und „unten“ verwendet. Diese Keywords beziehen sich auf das physische Layout des Geräts des Nutzers.

Logische Attribute hingegen die Ränder einer Box, da sie sich auf den Fluss von Inhalten beziehen. Wenn sich der Schreibmodus ändert, werden mit logischen Eigenschaften geschriebene CSS entsprechend aktualisiert. Bei direktionalen Eigenschaften ist das nicht der Fall.

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

Vermeiden Sie Richtungseigenschaften, damit sich Ihre Designs an verschiedene Schreibmodi anpassen. Verwenden Sie stattdessen logische Attribute.

.byline {
  text-align: right;
}

.byline {
  text-align: end;
}

Wenn CSS einen bestimmten Richtungswert hat, z. B. left oder right, gibt es eine entsprechende logische Eigenschaft. Wo früher margin-left hatten, gibt es jetzt auch margin-inline-start.

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

In einer Sprache wie Englisch wird der Text von oben nach unten geschrieben, block-start entspricht „top“ und block-end steht für „bottom“.

Wenn Sie in Ihrem CSS logische Eigenschaften 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 Ihr Design entsprechend angepasst. Sie müssen nicht für jede Sprache ein eigenes Design erstellen. Durch die Verwendung logischer Eigenschaften reagiert Ihr Design auf jeden Schreibmodus. Das bedeutet, dass Sie mit Ihrem Design mehr Menschen erreichen können, ohne Zeit für die Entwicklung separater Designs für jede Sprache aufwenden zu müssen.

Moderne CSS-Layouttechniken wie Grid und Flexbox verwenden standardmäßig logische Eigenschaften. Wenn du an inline-start und block-start denkst statt an left und top sind diese modernen Techniken leichter verständlich.

Verwenden Sie ein gängiges Muster wie ein Symbol neben einem Text oder ein Label neben einem Formularfeld. Anstatt zu denken, dass das Label rechts einen Rand haben sollte, „Das Label sollte am Ende seiner Inline-Achse einen Rand haben.“

label {
  margin-right: 0.5em;
}

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

Wird diese Seite in eine linksläufige Sprache übersetzt, müssen die Stile nicht aktualisiert werden. Wenn du das Attribut dir für dein html-Element verwendest, kannst du den Effekt nachahmen, wenn deine Seiten in einer linksläufigen Sprache angezeigt werden. Ein Wert von ltr bedeutet „von links nach rechts“. Ein Wert von "rtl" bedeutet „von rechts nach links“.

Wenn Sie mit allen Permutationen der Dokumentrichtungen (Blockachse) und Schreibmodi (Inline-Achse) experimentieren möchten, Hier finden Sie eine interaktive Demo.

Sprache der Seite ermitteln

Es empfiehlt sich, die Sprache deiner Seite mithilfe des Attributs lang für das Element html zu bestimmen.

<html lang="en">

Dieses Beispiel ist für eine Seite auf Englisch. Sie können noch genauere Angaben machen. So deklarieren Sie, dass eine Seite US-Englisch ist:

<html lang="en-us">

Für Suchmaschinen ist es hilfreich, die Sprache Ihres Dokuments anzugeben. Es ist auch für assistive Technologien wie Screenreader und Sprachassistenten nützlich. Durch die Bereitstellung von Sprachmetadaten helfen Sie diesen Sprachgeneratoren dabei, Ihre Inhalte richtig auszusprechen.

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 entsprechend 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. hreflang verwendet dieselbe Sprachcode-Notation wie das Attribut lang und beschreibt die Sprache des verknüpften Dokuments. Sollte eine Übersetzung Ihrer gesamten Seite auf Deutsch verfügbar sein, verlinken Sie diese folgendermaßen:

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

Wenn du den Link zur deutschen Version mit Text auf Deutsch beschreiben möchtest, verwende sowohl hreflang als auch lang. Hier hat der Text „Deutsche Version“ ist als „Deutsch“ gekennzeichnet und der Ziellink ist ebenfalls als „Deutsch“ gekennzeichnet:

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

Du kannst auch das Attribut hreflang für das Element link verwenden. Dies steht im head-Bereich 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

Berücksichtigen Sie beim Entwerfen von Websites, die in andere Sprachen und Schreibmodi übersetzt werden sollen, die folgenden Faktoren:

• In einigen Sprachen, wie z. B. Deutsch, werden lange Wörter häufig verwendet. Ihre Benutzeroberfläche muss sich an diese Wörter anpassen. Vermeiden Sie daher schmale Spalten. Sie können auch CSS zur Einfügung von Bindestrichen verwenden.
• Achten Sie darauf, dass Ihre line-height-Werte Zeichen wie Akzente und andere diakritische Zeichen berücksichtigen können. Textzeilen, die auf Englisch gut aussehen, können sich in einer anderen Sprache überschneiden.
• Wenn Sie eine Webschriftart verwenden, achten Sie darauf, dass die Zeichenfläche groß genug ist, um die Sprachen abzudecken, in die Sie übersetzen.
• Erstellen Sie keine Bilder, die Text enthalten. In diesem Fall müssen Sie für jede Sprache separate Bilder 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 Ihren HTML-Code bei der Internationalisierung aussagekräftiger. Ebenso machen logische Eigenschaften Ihr CSS anpassungsfähiger.

Wenn Sie in Bezug auf top, bottom, left und right denken, kann es schwierig sein, stattdessen an block start, block end, inline start und inline end zu denken. Aber es lohnt sich. Logische Eigenschaften sind der Schlüssel zum Erstellen wirklich responsiver Layouts.

Wissen testen

Testen Sie Ihr Wissen über die Internationalisierung.

Als Nächstes erfahren Sie, wie Sie mit Layouts auf Seitenebene umgehen, die auch als Makro-Layouts bezeichnet werden.