Übersetzungen in Javascript werden sehr oft vernachlässigt und nicht groß beachtet. Beispielsweise wird der jQuery UI DatePicker nur zu häufig nicht übersetzt, was dazu führt, dass eine deutschsprachige Webseite eine englische Kalenderauswahl besitzt. Professionalität sieht anders aus…

Um dieses Problem vernünftig zu lösen gibt es eine sehr einfache Möglichkeit, die ich im folgenden Beispiel darstellen möchte:

Damit Strings übersetzt werden können, brauchen wir zuerst eine Funktion “trans(‘Translation’)”, die als einzigen Parameter den Übersetzungsstring übergeben bekommt:

[code language=”javascript”]
/**
* Translation function for message.de_DE.js messages
* @param string identifier
* @return string
*/
function trans(identifier)
{
var message = identifier;
if (__lang != undefined) {
if (__lang[identifier] != undefined) {
message = __lang[identifier];
}
}
return message;
}

Die Übersetzungen selbst werden je nach Sprache getrennt in einzelnen .js Dateien ausgelagert, so dass der Designer sich nicht mit der Übersetzung herumschlagen muss.
Die Übersetzungsdateien sehen dann wie folgt aus:

[code language=”javascript”]
// /public/js/translations/messages.de_DE.js

var __lang = {
Mo: ‘Mo’,
Tu: ‘Di’,
We: ‘Mi’,
Th: ‘Do’,
Fr: ‘Fr’,
Sa: ‘Sa’,
Su: ‘So’,

Monday: ‘Montag’,
Tuesday: ‘Dienstag’,
Wednesday: ‘Mittwoch’,
Thursday: ‘Donnerstag’,
Friday: ‘Freitag’,
Saturday: ‘Samstag’,
Sunday: ‘Sonntag’,

Mon: ‘Mon’,
Tue: ‘Die’,
Wed: ‘Mit’,
Thu: ‘Don’,
Fri: ‘Fre’,
Sat: ‘Sam’,
Sun: ‘Son’,

Today: ‘Heute’,

January:’Januar’,
February:’Februar’,
March:’März’,
April:’April’,
May:’Mai’,
June:’Juni’,
July:’Juli’,
August:’August’,
September:’September’,
October:’Oktober’,
November:’November’,
December:’Dezember’
};

Mehr muss nicht gemacht werden. Nun kann man im Haupttemplate zuerst die Funktion und danach die jeweilige Sprache (die gerade benötigt wird) im “<head>” einbinden.
In Symfony2 z.B. würde das Ganze so aussehen (basics.js beinhält die trans(…) funktion):

[code language=”html”]
<script type=”text/javascript” src=”/web/js/basics.js”></script>
<script type=”text/javascript” src=”/web/js/translations/messages.{{ app.session.getLocale() }}.js”></script>

Der “app.session.getLocale()” Funktionsaufruf liefert die aktuelle Session Locale (bspw. de_DE oder en_US) des Benutzers zurück.

Der Datepicker von jQuery kann dann folgendermaßen übersetzt werden:

[code language=”javascript”]
$(‘.datepicker’).datepicker({
dateFormat: ‘dd.mm.yy’,
firstDay: 1,
dayNames: [trans(‘Sunday’), trans(‘Monday’), trans(‘Tuesday’), trans(‘Wednesday’), trans(‘Thursday’), trans(‘Friday’), trans(‘Saturday’)],
dayNamesShort: [trans(‘Sun’), trans(‘Mon’), trans(‘Tue’), trans(‘Wed’), trans(‘Thu’), trans(‘Fri’), trans(‘Sat’)],
dayNamesMin: [trans(‘Su’), trans(‘Mo’), trans(‘Tu’), trans(‘We’), trans(‘Th’), trans(‘Fr’), trans(‘Sa’)],
currentText: trans(‘Today’),
monthNames: [trans(‘January’), trans(‘February’), trans(‘March’), trans(‘April’), trans(‘May’), trans(‘June’), trans(‘July’), trans(‘August’), trans(‘September’), trans(‘October’), trans(‘November’), trans(‘December’)]
});

Dadurch können von nun an alle Übersetzungen zentral an einer Stelle gesammelt werden und der Designer braucht sich nicht mehr um die Javascript Übersetzungen Gedanken zu machen.