Es gibt mehrere Faktoren, warum ein Browser den Zeichensatz einer HTML-Seite bzw. einer Textdatei falsch errät: In der Regel fehlen eine oder mehrere Angaben, so dass der Browser z.B. auf den Standard-Zeichensatz des aktuellen Betriebssystems zurückfällt.
Mit folgenden Handgriffen kann man Browser dauerhaft davon überzeugen, eine UTF-8-Seite auch als UTF-8 anzuzeigen:
1. Die Ressource muss UTF-8 sein
Wenn der Browser den Zeichensatz einer Seite zuverlässig erraten soll, müssen wirklich alle Sonderzeichen der Seite in UTF-8 ausgegeben werden. Schon ein falsches Zeichen kann den Browser verwirren.
Der Mechanismus, der die HTML-Seite (oder CSS-Datei, JS-Datei oder was auch immer) erzeugt, muss UTF-8 ausgeben. Wenn die Seite von Hand in einem Editor bearbeitet wird, muss dieser zwingend auf UTF-8 eingestellt sein. Die meisten einfachen Editoren zeigen den Zeichensatz nicht an, und verwenden gerne noch alte ISO-Zeichensätze. Hier empfiehlt sich der Einsatz eines professionellen Editors wie z.B. Sublime Text. Hilfreich ist es auch, wenn der Editor den gerade verwendeten Zeichensatz direkt anzeigt, zum Beispiel in der Statusleiste.
Um eurem Editor die dauerhafte Verwendung von UTF-8 nahezulegen, könnt ihr einerseits die Einstellungen eures Editors anpassen – andererseits auf Projektebene eine .editorconfig-Datei anlegen, mit dem ihr den Zeichensatz festlegen könnt.
Wenn die Seite von einem CMS erzeugt wird, muss sowohl die Eingabe im Browser (s.u.), die Speicherung (z.B. in einer MySQL-DB), wie auch die Ausgabe durchgängig in UTF-8 sein. So ziemliches jedes neuere CMS wird diesen Part aber komplett korrekt erfüllen.
2. In der HTML-Seite muss der Zeichensatz angegeben sein
In einer HTML-Seite selber sollten Angaben vorhanden sein, die dem Browser beim Bestimmten des Zeichensatzes helfen. Für HTML5 ist das tatsächlich obligatorisch und sieht wie folgt aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
…
</head>
…
</html>
Für älteres HTML ist es optional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
…
</head>
…
</html>
Bei einer XML-Datei gibt es ebenfalls eine Angabe, die den Zeichensatz explizit festlegen kann:
<?xml version="1.0" encoding="UTF-8"?>
Bei allen anderen Datei-Typen (TXT, Javascript, CSS, etc.) gibt es dafür keinerlei Hilfe. Hier müsst ihr dafür sorgen, dass der Webserver den Zeichensatz korrekt und explizit angibt:
3. Der Webserver muss den Zeichensatz angeben
Bei einem Apache-Webserver wird möglicherweise der falsche Zeichensatz mitgesendet – das verwirrt Browser. Außerdem ist es generell eine gute Idee, den Zeichensatz mitzusenden.
Folgende Direktiven in der Apache-Konfiguration beheben die Verwirrung mit Nachdruck, und sollten immer gesetzt sein:
AddDefaultCharset utf-8
AddCharset utf-8 .html .css .js .rss .atom .xml .ics .md .json .txt
Oder in einer lokalen .htaccess:
IndexOptions +Charset=utf-8
AddCharset utf-8 .html .css .js .rss .atom .xml .ics .md .json .txt
In Nginx kann der Zeichensatz wie folgt festgelegt werden:
# Context: http, server, location, an "if" in location
charset utf-8
Interessant ist auch, dass einige Skript-Interpreter (wie z.B. PHP) den Webserver dazu zwingen, bestimmte Zeichensatz-Header auszugeben. Damit werden die Einstellungen in der Webserver-Konfiguration überschrieben. In PHP kann dies korrigiert werden, indem mittels ini_set(‚default_charset‘, ‚UTF-8‘); der Header erzwungen wird.
Und wenn ihr es bombensicher haben wollt…
Die vielzähligen Stellen, an denen die korrekte Ausgabe schief gehen kann, kann man bei HTML- und XML-Dateien mit einer einfachen Methode umgehen: Ihr könnt die Seite auch einfach komplett in ASCII ausliefern!
Dafür müsst ihr nur alle Nicht-ASCII-Zeichen in HTML- bzw. XML-Entities umwandeln. So wird aus einem „ü“ z.B. ü. Da ASCII eine identische Untermenge von jedem ISO- wie auch den UTF-Zeichensätzen ist, wird die Ausgabe auf jeden Fall fehlerfrei funktionieren.
Das funktioniert natürlich nur in HTML-Dokumenten. In Javascript- und CSS-Dateien müsst ihr dann entweder auf Sonderzeichen verzichten, oder auf die Fähigkeiten des Browsers vertrauen.