Das World Wide Web ist für alle Menschen auf der Welt zugänglich – es ist Teil des Namens! Das bedeutet, dass Ihre Website potenziell für jeden zugänglich ist, der Zugang zum Internet hat, unabhängig davon, wo er sich befindet, welches Gerät er verwendet oder welche Sprachen er spricht.
Das Ziel des responsiven Webdesigns ist es, Ihre Inhalte für alle zugänglich zu machen. Dieselbe Philosophie auf die menschliche Sprache anzuwenden, ist der treibende Faktor bei der Internationalisierung: Sie müssen Ihre Inhalte und Designs für ein internationales Publikum vorbereiten.
Logische Attribute
Englisch wird von links nach rechts und von oben nach unten geschrieben, aber nicht alle Sprachen sind auf diese Weise geschrieben. Einige Sprachen wie Arabisch und Hebräisch lesen von rechts nach links, japanische Schriftbilder vertikal statt horizontal. Um diese Schreibmodi zu unterstützen, wurden in CSS logische Eigenschaften eingeführt.
Wenn Sie CSS-Code schreiben, haben Sie möglicherweise Suchbegriffe wie „left“ (links), „right“ (rechts), „top“ (oben) und „bottom“ (unten) verwendet. Diese Keywords beziehen sich auf das physische Layout des Geräts des Nutzers.
Logische Eigenschaften beziehen sich dagegen auf die Ränder eines Felds, wenn sie sich auf den Fluss des Inhalts beziehen. Wenn sich der Schreibmodus ändert, werden CSS-Ressourcen, die mit logischen Eigenschaften geschrieben wurden, entsprechend aktualisiert. Bei Richtungseigenschaften ist dies nicht der Fall.
Während sich die Richtungseigenschaft margin-left immer auf den Rand auf der linken Seite eines Inhaltsfelds bezieht, bezieht sich die logische Eigenschaft margin-inline-start in einer rechtsläufigen Sprache auf den Rand auf der linken Seite eines Inhaltsfelds und bei einer linksläufigen Sprache auf den Rand auf der rechten Seite eines Inhaltsfelds.
Damit sich Ihre Designs an verschiedene Schreibmodi anpassen können, sollten Sie Richtungseigenschaften vermeiden. Verwenden Sie stattdessen logische Attribute.
.byline {
text-align: right;
}
.byline {
text-align: end;
}
Wenn CSS einen bestimmten Richtungswert wie left oder right hat, gibt es eine entsprechende logische Eigenschaft. Früher hatten wir margin-left, jetzt haben wir auch margin-inline-start.
In einer Sprache wie Englisch, in der der Text von links nach rechts fließt, entspricht inline-start „links“ und inline-end „rechts“.
In einer Sprache wie dem Englischen, in der der Text von oben nach unten geschrieben wird, entspricht block-start dem Begriff "oben" und block-end "unten".
Wenn Sie in Ihrem CSS logische Eigenschaften verwenden, können Sie für Übersetzungen Ihrer Seiten dasselbe Stylesheet verwenden. Selbst 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 separates 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 dass Sie Zeit darauf verwenden müssen, separate Designs für jede Sprache zu erstellen.
Bei modernen CSS-Layouttechniken wie grid und Flexbox werden standardmäßig logische Eigenschaften verwendet.
Wenn du dich an inline-start und block-start statt an left und top orientiert, 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 einen Rand auf der rechten Seite haben sollte, denken Sie daran, dass das Label am Ende seiner Inline-Achse einen Rand haben sollte.
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.
Mithilfe des Attributs dir für das html-Element können Sie den Effekt der Darstellung Ihrer Seiten in einer linksläufigen Sprache nachahmen.
Der Wert ltr bedeutet "von links nach rechts". Der Wert „rtl“ bedeutet „von rechts nach links“.
Wenn Sie mit allen Permutationen der Dokumentrichtungen (Blockachse) und Schreibmodi (Inline-Achse) experimentieren möchten, finden Sie hier eine interaktive Demonstration.
Seitensprache ermitteln
Es empfiehlt sich, die Sprache deiner Seite mithilfe des Attributs lang für das Element html festzulegen.
<html lang="en">
Dieses Beispiel bezieht sich auf eine englische Seite. Sie können noch spezifischere Angaben machen. So geben Sie an, dass eine Seite US-Englisch verwendet:
<html lang="en-us">
Für Suchmaschinen ist es hilfreich, die Sprache eines Dokuments anzugeben. Es ist auch nützlich für assistive Technologien wie Screenreader und Sprachassistenten. Durch die Bereitstellung von Metadaten für die Sprache hilfst du diesen Sprachgeneratoren dabei, deine 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 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 Sprachcodenotation wie das Attribut lang und beschreibt die Sprache des verknüpften Dokuments.
Wenn eine Übersetzung der gesamten Seite auf Deutsch verfügbar ist, verlinken Sie sie wie folgt:
<a href="/path/to/german/version" hreflang="de">German version</a>
Wenn du zur Beschreibung des Links zur deutschen Version Text auf Deutsch verwendest, verwende sowohl hreflang als auch lang.
In diesem Fall ist der Text "Deutsche Version" als in deutscher Sprache ausgezeichnet und der Ziellink ist ebenfalls als deutsch markiert:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
Sie können auch das Attribut hreflang für das Element link verwenden. Dies steht im 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
Berücksichtigen Sie beim Entwerfen von Websites, die in andere Sprachen und Schreibmodi übersetzt werden sollen, folgende Faktoren:
- Einige Sprachen, wie z. B. Deutsch, werden häufig mit langen Wörtern gesprochen. Ihre Benutzeroberfläche muss sich an diese Wörter anpassen. Vermeiden Sie daher das Entwerfen schmaler 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 sich in einer anderen Sprache überschneiden. - Wenn Sie eine Webschriftart verwenden, achten Sie darauf, dass sie genügend Zeichen hat, um die Sprachen abzudecken, in die Sie übersetzen möchten.
- Erstellen Sie keine Bilder, die Text enthalten. In diesem Fall müssen Sie für jede Sprache ein separates Bild erstellen. Trennen Sie stattdessen den Text und das Bild und verwenden Sie CSS, um den Text auf dem Bild zu überlagern.
International denken
Durch Attribute wie lang und hreflang wird Ihr HTML-Code für die Internationalisierung aussagekräftiger.
Ebenso machen logische Attribute Ihr CSS anpassungsfähiger.
Wenn du normalerweise an top, bottom, left und right denkst, ist es vielleicht schwierig, 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.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen zur Internationalisierung.
Ist die physische right-Seite einer Box im Englischen logisch auf welcher Seite zu verstehen?
block-starttopblock-endbottominline-startleftinline-endWelches Attribut sollten Sie dem HTML-Code hinzufügen, damit er für die Internationalisierung aussagekräftiger ist?
englishlanglanguagei18nAls Nächstes erfahren Sie, wie Sie Layouts auf Seitenebene verwenden, die auch als Makro-Layouts bezeichnet werden.