Internationalisierung: Wie lokalisiert man HTML5-Projekte?

Während ich an einem HTML5-Projekt gearbeitet habe, stieß ich auf das Problem, dass das Projekt in mehrere Sprachen übersetzt werden sollte. Hierfür mussten offensichtlich die Zeichenketten der HTML-Tags sowie der JavaScript-Dateien übersetzt werden.

Obwohl ich die Internationalisierung in einer global vernetzten Welt für sehr wichtig erachte, scheint dieses Thema bei der HTML5-Entwicklung komplett vergessen worden zu sein. Ich habe hierzu lediglich einen Vorschlag in der Common-JS-Wiki (Englisch) gefunden, der bereits seit über einem Jahr keinerlei Aktivität zeigt!

Nachdem ich eine Weile gesucht habe, fand ich diesen Post über passive Lokalisierung in JavaScript. Natürlich wäre mir ein offiziell standardisierter Ansatz zur Lokalisierung lieber gewesen, jedoch ist diese JavaScript-Bibliothek in der Zwischenzeit sehr nützlich bis es eine offiziell standardisierter Lösung gibt.

Im Folgenden werde ich erklären, wie ich diese Bibliothek nutze, nicht nur für JavaScript-Dateien, sondern auch um den Inhalt von HTML-Tags zu übersetzen.

HTML5-Test-Page

Zunächst benötigen wird eine HTML5-Test-Seite wie diese hier:

<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<title>Internationalization Test</title>

	<link rel="localization" hreflang="de" href="lang/de.json" type="application/vnd.oftn.l10n+json"/>
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/i18n.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body onload="loaded()">
	<h1 id="headertext">This is an Internationalization Test!</h1>
	<h2 id="subtitletext">With any subtitle.</h2>
	<a id="showinenglish" href="index.html?lang=en">Show in English</a>
	<a id="showingerman" href="index.html?lang=de">Show in German</a>
</body>
</html>

Wie Sie sehen können habe ich allen wichtigen HTML-Tags eine ID zugewiesen. Diese werden wir später für die Übersetzung verwenden.

JavaScript-Hilfsfunktionen

Bevor wir mit der Übersetzung selbst beginnen können, benötigen wir zunächst einige JavaScript-Hilfsfunktionen:

var _ = function (string) {
	return string.toLocaleString();
};

function localizeHTMLTag(tagId)
{
	tag = document.getElementById(tagId);
	tag.innerHTML = _(tag.innerHTML);
}

function getParameterValue(parameter)
{
	parameter = parameter.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
	var regexS = "[\\?&]" + parameter + "=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(window.location.href);
	if(results == null)
		return "";
	else
		return results[1];
}

Hier eine kurze Erklärung was diese Hilfsfunktionen machen:

_(): Dies ist nur eine Kurzform des Prototyps string.toLocaleString().
localizeHTMLTag(tagId): Diese Funktion holt sich das betreffende HTML-Element vom DOM-Baum basierend auf der übergebenen Tag-ID und macht anschließend direkt die Übersetzung.
getParameterValue(parameter): Wir werden diese Funktion benötigen, um den Wert eines URL-Parameters zu erhalten. Dadurch kann die Seitensprache, wenn vom Benutzer gewünscht, manuell geändert werden.

Durchführung der Lokalisierung

Wir haben alle Teile zusammen, um unsere Lokalisierung durchzuführen, was nun sehr einfach ist:

function loaded()
{
	var lang = getParameterValue("lang");
	if (lang != "") String.locale = lang;

	alert(_("Localizing the document title..."));
	document.title = _(document.title);

	alert(_("Localizing other HTML tags..."));
	localizeHTMLTag("headertext");
	localizeHTMLTag("subtitletext");
	localizeHTMLTag("showinenglish");
	localizeHTMLTag("showingerman");

	alert(_("Localizing done!"));
}

Es gibt nur eine Funktion loaded(), die, nachdem das Dokument geladen ist, aufgerufen wird (siehe das Ereignis im Body-Tag der HTML5-Test-Seite oben). Zunächst prüfen wir, ob es einen URL-Parameter lang gibt, falls der Benutzer die Seitensprachen mit den Links geändert hat. Ansonsten müssen wir das Gebietsschema nicht ändern (das Standard-Browser-Gebietsschema des Benutzers wird in diesem Fall automatisch verwendet).

Nun können wir mit der eigentlichen Übersetzung beginnen, entweder, in dem wir eine Zeichenkette direkt mit der Funktion _() übersetzen oder unsere Funktion localizeHTMLTag(tagId) nutzen, um den Inhalt eines HTML-Tags zu übersetzen. Das war’s!

Was ist mit mehreren Sprachen?

Wenn Sie weitere oder andere Sprachen hinzufügen möchten, müssen Sie lediglich einen neuen Lokalisierungslink in den HTML-Bereich head zusammen mit einer JSON-Datei, welche die Übersetzung für die neue Sprache beinhaltet, einfügen.

Warum werden keine kurzen Variablennamen verwendet

Der Autor der JavaScript-Internationalisierungsbibliothek schlägt vor, kurzen Variablennamen anstatt der Standardübersetzungen zu verwenden. Daher möchte ich eine kurze Erklärung geben, warum ich dies in meinem Beispiel nicht mache, denn natürlich hat er recht, dass die Verwendung der Standardübersetzungen dem Projekt einen gewissen Overhead hinzufügt. Jedoch hat die Verwendung von kurzen Variablennamen auch mindestens zwei Nachteile:

Ihre HTML5-Seite würde ohne Übersetzung nicht mehr funktionieren, da ansonsten nur die kurzen Variablennamen angezeigt werden würden. In meinem Beispielprojekt würde jedoch einfach die Standardübersetzung (Englisch) angezeigt werden, wenn kein Internationalisierungssystem vorhanden ist.
Ich hoffe immer noch, dass es einen standardisierten Weg für die Internationalisierung von HTML5-Projekten geben wird. In diesem wird man wahrscheinlich die Standardübersetzung innerhalb der HTML-Tags benötigen, da der de-facto Standard für die Übersetzung von z. B. PHP-Projekten die Verwendung von gettext-Dateien (.po) ist. Das ist auch die Art und Weise, wie der erwähnte Vorschlag es empfiehlt zu machen. Somit, wenn ich irgendwann in der Zukunft zu dieser Art der Internationalisierung wechseln möchte, will ich nicht sämtliche Standard-Übersetzungen zurück in die HTML-Tags kopieren müssen.

Beispielprojekt downloaden

Wenn Sie möchten, können Sie den Quelltext meines Bespiel-Projektes downloaden.

Update

Ich habe das Beispielprojekt aktualisiert, da in der JSON-Datei ein Komma zu viel war, welches dafür gesorgt hat, dass es nur im Mozilla Firefox (nicht jedoch im Microsoft Internet Explorer und Google Chrome) funktioniert hat. Das ist nun korrigiert – danke an Margaret Wong, die mich auf das Problem aufmerksam gemacht hat!

Denken Sie jedoch daran, dass Sie die Dateien zum Testen auf einen Webserver hochladen müssen, da Sie vermutlich lokal im Internet Explorer und Chrome aufgrund von Browser-Zugriffsbeschränkungen nicht funktionieren werden. Das Beispielprojekt wird nun jedoch korrekt laufen, wenn Sie es auf einen Webserver hochladen.

Welches Konzept verwenden Sie für die Lokalisierung Ihrer HTML5-Projekte?

Der Artikel ist auch in English verfügbar.

AB-WebLog.com

Andreas Breitschopp