Heute beschäftigen wir uns mit dem Thema UTF-8 Kodierung. Doch welche Vorteile bringt solch eine Kodierung und was kann passieren, wenn eine andere Kodierung als UTF-8 verwendet wird? All diese Fragen klären wir im heutigen Blogeintrag.

Wörter und Sätze eines Textes werden aus Zeichen gebildet. Diese Zeichen werden in einem Zeichensatz zusammengefasst. Dies nennt man auch Zeichensatz oder Repertoire  (englisch: character set). Dieser wird als codierter Zeichensatz (englisch: coded character set) bezeichnet, wenn jedem Zeichen eine Nummer zugeordnet wird: der Zeichencode (englisch: codepoint). Diese Zeichencodes werden im Computer durch ein oder mehrere Bytes repräsentiert.

Die Zeichencodierung ist der Schlüssel, der Zeichencodes in Bytes im Speicher des Computers umsetzt und Bytes wieder in Zeichencodes zurückverwandelt, so dass diese für Anwender wieder lesbar werden. Dies geschieht aber nur, wenn die richtigen Glyphen der Schriftart gefunden werden konnten. Wenn beispielsweise das JavaFX im Java-Chat oder euer Browser im HTML-Chat erst einmal herausgefunden hat mit welchen Zeichen es zu tun hat, sucht es in der angegebenen Schriftart nach Glyphen, um diese Zeichen darzustellen oder auszudrucken. Wenn allerdings die Zeichencodierung falsch angeben wurde, wird natürlich nach Glyphen für die falschen Zeichen gesucht. Dies könnt ihr euch so vorstellen, als müsstet ihr einem Spanier etwas erklären, habt aber nur ein italienisches Wörterbuch zur Hand.

Was passiert, wenn ich nicht UTF-8 verwende?

Gehen wir davon aus, ihr habt jede Menge Text in euren HTML User Interface und verwendet dort Zeichen, die nicht in der englischen Sprache vorkommen (z. B. Ö, Ä, Ü, ß, etc.), so kann es passieren, dass euer Text nicht ordnungsgemäß angezeigt wird und ihr seltsame Zeichen oder gar fehlende Zeichen habt. Das W3C hat dafür ein gutes Beispiel parat.

Als erstes seht ihr hier den Text, der eigentlich angezeigt werden soll und auch wird, wenn die Kodierung auf UTF-8 gesetzt ist:

Wenn ihr jetzt aber vergessen habt, eure Dateien im UTF-8 Modus zu speichern bzw. im falschen Modus eure Dateien hochgeladen habt, erscheint folgendes:

Wie ihr sehen könnt, ist der Text fast nicht mehr lesbar und sehr komische Zeichen erscheinen. Damit dies eurer App nicht auch passiert, ist es unbedingt wichtig eure Dateien in der richtigen Kodierung hochzuladen und zu speichern.

Was passiert mit meiner App, wenn ich die UTF-8 Kodierung nicht verwende?

Fakt ist, dass bei fehlender oder falscher Kodierung deine App fehler wirft oder aber nicht richtig funktioniert. Gerade Formatierungen die du an Texten vornimmst (z.B. durch das Gradzeichen °) werden ignoriert und unschöne Effekte treten zusätzlich zu den oben genannten Problemen auf. Wenn ihr eure App bereits offline programmiert habt und sie das erste mal installieren wollt, werdet ihr solch eine Meldung wie im Screenshot zu sehen, erhalten.

Knuddels sagt euch dadurch, dass ihr eine fehlerhafte Kodierung gewählt habt und damit nicht unnötig Probleme auftauchen,  wird daher die Installation abgelehnt. Jetzt heißt es die Kodierung zu ändern und schon könnt ihr eure neuste App installieren.

Auch wenn die App fehlerfrei installiert wurde und im späteren Verlauf die Kodierung versehentlich geändert hat, so wird deutlich, dass auch dann noch Probleme vorherrschen.

Schauen wir uns dazu folgendes Beispiel an. Ich habe in einer Testapp mal zu Testzwecken folgenden Code eingebunden.

App.chatCommands = {
        glueck: function(user, params, command){
            user.sendPrivateMessage('°#°_Eingegebener Text:_ °+0100°'+params+'°#+0000#°_Scriptinterner Text:°+#100°°G°_Glück°rb° hat, wer Glück sucht!°#+0000°');
        },
};

Wenn wir uns das ganze nun bei fehlerhafter Kodierung ansehen, ergibt sich folgende Ausgabe:

Hierbei fällt auf, dass die eigene Eingabe (alles, was als param übergeben wurde) richtig dargestellt wird. Der Scriptinterne Text und alle Formatierungen hingegen, absolut fehlerhaft sind, da alle Gradzeichen und Umlaute sowie Sonderzeichen fehlerhaft interpretiert werden.

Bei ordentlicher Kodierung würde das Beispiel so aussehen:

Habt ihr Fragen zu dem Thema oder noch Hinweise, so packt sie in die Kommentare.