UTF8 Umlaute Problem auf Webseiten lösen?

UTF-8 Umlaute kann man in den Griff bekommen!

Beim Aufruf einer Webseite erhält der Browser vom Webserver nur eine Textdatei geliefert. Diese enthält den anzuzeigenden Text und Information wie die Elemente auf der Webseite angezeigt werden solle. Der Browser hat dann die Aufgabe, diese Angaben auszuwerten und als Webseite anzuzeigen.

Dabei wäre es einfach, wenn es nur eine Sprache und einen Zeichensatz gäbe. Es gibt auf der Erde jedoch eine Menge verschiedenster Sprachen und Schreibweisen. Für Computer wurden verschiedene Zeichensätze entwickelt, um diese Sprachen darstellen zu können. Einer der wohl gebräuchlichsten Zeichensätze ist UTF8. Dieser Zeichensatz hat sich zum Quasi-Standard im Internet entwickelt. Die ersten 128 Zeichen sind mit dem Ascii-Zeichensatz identisch, so dass eine gewisse Kompatibilität besteht.

Um die verschiedenen Zeichen richtig darstellen zu können muss der Browser beim Aufruf einer Webseite wissen, in welcher Sprache (= in welchem Zeichensatz) die Webseite angezeigt werden soll. In der deutschen Sprache stellen die Umlaute manchmal ein Problem dar.

Wo nun überall bei der Webseitenerstellung UTF-8 (bzw. UTF8 bei MySQL) eingestellt werden kann, will ich hier zeigen. Wer einen Webserver selbst betreut, kann diese Einstellungen natürlich schon per Default bei Apache, PHP und MySQL einstellen. Dmit lassen sich sehr viele der utf-8 Umlaute Probleme beseitigen.

Beim Umzug von Webseiten auf andere Server ist es sehr interessant zu wissen, wie Umlautprobleme entstehen und gelöst werden können.

Übrigens zähle ich diese Maßnahmen auch zur Suchmaschinenoptimierung. Und SEO kann man selber machen! Die Seite lädt schneller, der Besucher wird nicht durch aufflackernde fehlerhafte Umlaute irritiert und hat einfach mehr Freude auf der Webseite.

Wichtig: UTF-8 fähigen Editor verwenden

Für die Bearbeitung der Textdateien ist wichtigste Voraussetzung, dass ein UTF-8 fähiger Texteditor verwendet wird. Das kann Notepad++ oder psPad sein. Der windowseigene notepad ist dazu nicht geeignet.

Im Texteditor sollte dann auch auf die eingestellte Zeichenkodierung geachtet werden. Werden Dateien für in UTF-8 codierte Webseiten bearbeitet ist UTF-8 ohne BOM meist die richtige Einstellung. In notepad++ findet sich das unter Kodierung -> UTF-8 ohne BOM.

 

UTF-8 als meta-tag charset einfügen

Im html Quellcode kann per Metatag der Zeichensatz für die Webseite angegeben werden.

Dazu wird im head-Tag der Seite der metatag eingetragen. Hat allerdings den Nachteil, dass der Browser die Seite schon geladen haben muss um das Metatag auszuwerten. Das kann zur Folge haben, dass während des Ladens der Webseite enthlatene Umlaute nicht korrekt angezeigt werden. Gerade beim Webseiten title kann das wenig schön aussehen.

Im html eingebaut sieht das so aus:

<head>
  <meta charset="UTF-8">
  ...
  ...
  ...
</head>

Das ist also nur der letzte Notanker für den Browser, wenn vom Webserver keine Information zum Zeichensatz übertragen wurde.

Übrigens: Mancher Browser erwartet diesen Meta-Tag innerhalb der ersten 1024 Zeichen der Webseite. Deshalb am Besten wirklich gleich als ersten Meta-Tag einfügen. Oder als zweiten, nämlich gleich nach dem http-header-Tag.

Damit vermeidet man ein kleines aber fieses Problem: Kommt nämlich am Anfang ein üppig gefüllter description und/oder keyword Meta-Tag, wandert der Meta-Tag charset nach hinten und erscheint möglicherweise erst nach mehr als 1024 Zeichen. Damit wäre er vom Browser nicht mehr zu erkennen und der Browser erfährt womöglich nichts vom Zeichensatz, macht was er für richtig hält, zeigt die Seite in iso -xxx an und die Umlaute sehen wieder mal gar nicht gut aus.

UTF 8 als character-set im Webseiten-header mitgeben

UTF8 im http-Contentheader lässt sich auf mehrere Arten angeben

Der Contenheader ist die erste Information, die der Webserver als Antwort auf die Anfrage des Browsers sendet.

Ist darin auch die Information enthalten, welchen Zeichensatz die Seite verwendet, kann sich der Browser schon auf diesen Zeichensatz einstellen und zum Beispiel Umlaute im title der Seite während des Aufbaus schon korrekt anzeigen.

Hier gibt es mehrere Möglichkeiten, die alle das Gleiche bewirken:

Contentheader im html-head angeben

Dazu wird im head-Tag der Webseite als erste Zeile folgender Code eingetragen:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Oder für xhtml-Webseiten (der Unterschied ist der / am Ende) :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Contentheader per .htaccess-Datei

Ist der Webserver so konfiguriert, dass Webseitenbetreiber auch Änderungen über die .htaccess Datei durchführen können, kann auch der Zeichensatz für die Webseiten vorgegeben werden. Dazu fügen Sie mittels eines Texteditors die folgenden Zeilen in die .htaccess Datei ein. Diese finden Sie im Hauptverzeichnis (root) des Webspace.

Dazu kann in der .htaccess die adddefaultcharset-Direktive verwendet werden:

AddDefaultCharset UTF-8

Damit wird für alle Webseiten vom Webserver im http-Header die Information gesendet, dass die Webseite den Zeichensatz UTF8 verwendet.

Contentheader per .htaccess-Datei nur für bestimmte Dateitypen

Für Dateien mit bestimmen Endungen kann die addcharset-Direktive verwendet werden:

AddCharset UTF-8 .php

Damit wird für alle Dateien, die auf .php enden, vom Webserver im http-Header die Information gesendet, dass die Webseite den Zeichensatz UTF8 verwendet. Weitere Dateiendungen werden durch Leerzeichen getrennt angefügt.

Contentheader per php anpassen

Auch per php lässt sich der Contentheader anpassen:

Dazu muss der folgende php-Code in der ersten Zeile der aufgerufenen php-Datei stehen.

Eine Möglichkeit ist die Verwendung des header-Befehls:

<?php
header('Content-Type: text/html; charset=UTF-8');
?>

Eine weitere Möglichkeit ist das Überschreiben der Einstellungen der php.ini, d.h. der Grundeinstellungen von php. Allerdings muss der Server auch so konfiguriert sein, dass der Einsatz von ini_set auch zugelassen ist.

Aber sieht dann so aus:

<?php
ini_set("default_charset", "UTF-8");
?>

Auch damit wird für die aufgerufene Webseite vom Webserver im http-Header die Information gesendet, dass die Webseite den Zeichensatz UTF8 verwendet. Der Browser kann sich also wieder darauf einstellen.

UTF8 bei der Eingabe in Formularen berücksichtigen

Standardmäßig geht ein html-Formular davon aus, dass der Zeichensatz für die Eingabedaten der gleiche Zeichensatz ist wie der Zeichensatz der Webseite in der das Formular angezeigt wird.

Wird die Webseite irrtümlich (sei es ein Fehler im html-Code oder eine Einstellung des Browsers) zum Beispiel als ISO-8859-15 angezeigt und Daten in UTF-8 eingegeben, landen falsch codierte Zeichen zuerst auf dem Webserver und dann in der Datenbank.

Um dies zu verhindern lässt sich im Form-Tag der akzeptierte Datensatz angeben:

<form accept-charset="UTF-8">
  ....Formularelemente
</form>

Diese Angabe beim Formular ist nicht unbedingt erforderlich, allerdings erhöht es die Robustheit des Programms, das mit den Daten arbeitet. Gerade im Admin-Bereich einer Webseite (CMS, Blog oder Shop) können hier kleine Fehler manches graue Haar verursachen.

UTF-8 Umlaute durch HTML-Entities ersetzen

In HTML gibt es auch die Möglichkeit, utf-8 Umlaute durch sogenannte HTML Entities zu ersetzen. Ich zähle das allerdings nur zu einer kurzfristigen Lösungsmöglichkeit. Das lässt sich einsetzen, wenn auf die Schnelle die Darstellung eines Umlautes korrigiert werden muss.

Zudem ist es natürlich auch sehr aufwändig, wenn mehrere Zeichen falsch dargestellt werden alle im Text zu bearbeiten. Unerwartete Nebeneffekte könnte auch sein, dass zum Beispiel eine Suche nach Artikel in einem Shopsystem den Artikel mit Entities im Namen nicht findet.

UTF-8 in PHP bei der Zeichenumwandlung berücksichtigen

UTF-8 Problem mit htmletities

Mittels der Funktion htmlentities lassen sich mit PHP bestimmte Zeichen in Texten in die entsprechenden HTML-Codes umwandeln.

Allerdings muss diese Funktion wissen, welcher Zeichensatz verwendet werden soll. Wird ihr der Zeichensatz nicht angegeben, verwendet sie den Standardzeichensatz, der in der PHP-Installation angegeben ist. Dieser ist in PHP-Versionen vor 5.4 ISO-8859-1, bei PHP 5.4 und 5.5 ist es UTF-8 und ab 5.6 wird default-charset verwendet.

Damit lässt sich gut verstehen, warum es bei Updates der PHP-Versionen oder beim Umzug der Seite auf einen anderen Server plötzlich falsch angezeigte Umlaute geben kann.

htmlentities sollte also immer mit Angabe des Zeichensatzes geschrieben werden:

$text = htmlentities($text, ENT_QUOTES, 'UTF-8');

UTF-8 Problem mit htmlspecialchars

Auch htmlspecialchars wandelt Zeichen in Text in HTML-Code um. Auch hier ist die Angabe des Zeichensatzes nützlich, um Fehler bei der Darstellung von Umlauten oder Sonderzeichen vermeiden.

Sollte also so aussehen:

 

$text = htmlspecialchars($text, ENT_QUOTES, 'UTF-8');

UTF-8 Problem mit html_entity_decode

Mit der PHP-Funktion html_entity_decode lassen sich html-codierte Zeichen in ihre ursprünglichen Zeichen umwandeln. Auch hier ist die Angabe des Zeichensatzes wichtig.

Sieht dann so aus:

$text = html_entity_decode($text, ENT_QUOTES, 'UTF-8');
UTF-8 Angabe im CSS File

Auch in CSS-Dateien lässt sich die Kodierung angeben, die der Browser beim Parsen anwenden soll.

Wichtig ist dabei auch, dass die CSS-Datei in der angegeben Kodierung ohne BOM gespeichert wird.

Dazu wird in die erste Zeile der CSS-Datei folgendes geschrieben:

@charset "utf-8";
UTF8 in der MySQL Datenbank berücksichtigen

Datenbankverbindung richtig einstellen

Werden Daten per PHP in der Datenbank gespeichert muss der Verbindung zur MySQL-Datenbank noch gesagt werden, welcher Art die übertragenen Zeichen sein sollen.

Dies geschieht mit dem folgenden Code vor Ausführen des SQL-Befehls:
(wichtig ist, dass in MySQL das UTF8 wirklich ohne den Bindestrich geschrieben wird!)

mysql_query("SET NAMES 'utf8'");

Am besten kommt diese Zeile direkt nach mysql_select_db :

mysql_select_db("database");
mysql_query("SET NAMES 'utf8'");

Damit weiß die Datenbank, wie sie mit den übergebenen Zeichen umgehen muss.

Datenbank-Collation richtig einstellen

Die Kollation in der Datenbank gibt an, welche (interne) Tabelle MySQL zu Vergleichen heranziehen soll. Wirkt sich also bei der Sortierung von Datensätzen aus. Je nach angegebener Kollation erscheint z.B. Ärger nicht nach Argument.

Ein Einfluß auf die Darstellung der Zeichen auf der Webseite ist nicht vorhanden. Fehlerhafte Umlaute liegen also nicht an der Kollation von Datenbank, Tabelle oder Felder.

Die Beschreibung der Kollationen findet sich auf der MySQL Seite

Für den europäischen Raum dürfte wohl utf8_unicode_ci interessant sein, funktioniert in Deutschland und Frankreich einwandfrei.

Umlaut in Webverzeichnis richtig anzeigen

Wer seine Webseite bekannnt machen möchte, trägt diese auch in Webverzeichnisse ein. Hier wird dann gerne vorbereiteter Text in die Eingabeformulare des Webverzeichnis reinkopiert.
Wird das Webverzeichnis in ISO angezeigt, der kopierte Text aber aus einer UTF-8 Datei kopiert, könnten Umlaute im Webverzeichnis falsch angezeigt werden. Um Umlaute im Webverzeichnis richtig anzeigen zu lassen muss also darauf geachtet werden, dass das Webverzeichnis und der Text, der darin angezeigt werden soll, die gleiche Kodierung haben.

Dazu kann im Browser unter Anzeige -> Zeichenkodierung der Zeichensatz der Webseite angezeigt werden. Steht hier dann etwas mit ISO-... , dann muss der Beschreibungstext ebenfalls aus einer ISO-... codierten Datei kommen.

Man kann den Text natürlich auch direkt von Hand eingeben.

Damit kann jetzt das Webverzeichnis den Umlaut richtig anzeigen.

Natürlich würde ich mich freuen, wenn Sie mir einen Kommentar hinterlassen würden.

Kommentar abgeben: