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.
Die physische right
-Seite einer Box im Englischen entspricht logisch welcher Seite?
block-start
inline-start
inline-end
block-end
Welches Attribut sollten Sie Ihrem HTML-Code hinzufügen, um ihn für die Internationalisierung aussagekräftig zu machen?
language
i18n
lang
english
Als Nächstes erfahren Sie, wie Sie mit Layouts auf Seitenebene umgehen, die auch als Makro-Layouts bezeichnet werden.