Zeichenkodierung - Schriftzeichen richtig darstellen (Tutorial)

Oft werden Umlaute (Ä Ö Ü), Akzentzeichen (À É Å Ç Š) oder andere Schriftzeichen (€ ß Σ) falsch auf der Website angezeigt. Auch der Inhalt einer E-Mail, vom Kontaktformular oder Daten aus der Datenbank können fehlerhafte Zeichen enthalten wie zum Beispiel:

Eine vermeintliche Lösung für dieses Problem ist es, die Umlaute durch benannte Zeichen (Buchstabencode) zu ersetzen. Im Quelltext vieler Websites sieht man dann zum Beispiel folgendes:

W&ouml;rter, &Uuml;berpr&uuml;fung, Schaltfl&auml;che, &Auml;nderung, 
Dateigr&ouml;&szlig;e, &Ouml;kosystem, Fu&szlig;ball, K&uuml;nstler, …

➤ Es ist absolut nicht notwendig das man Umlaute (per Hand oder durch ein Programm) ersetzt, wenn man die richtige Zeichenkodierung verwendet.

Man kann nämlich festlegen, welche Zeichenkodierung benutzt werden soll – das ist nötig, um die verschiedenen Zeichenkodierungen (Zeichensätze) und Sonderzeichen korrekt darstellen zu können. Wurde diese Zeichenkodierung nicht oder falsch hinterlegt, muss der Browser die Zeichenkodierung „erraten”. Meistens klappt das, aber nicht immer. Falls nicht, erscheinen vor allem Umlaute und Sonderzeichen unleserlich.

1. Browser

➤ Jede ausgelieferte HTML-Seite ~~sollte~~ muss im Header die (richtige) Meta-Tag Angabe besitzen, in der die Zeichenkodierung geregelt wird. Der Browser orientiert sich daran und stellt die Zeichen gemäß dieser Angabe dar. In den meisten Fällen hilft es schon wenn Sie zwischen den <head>-Tags folgende (HTML 5 - Angabe) einfügen:

<meta charset="UTF-8">
UTF-8 hat eine zentrale Bedeutung als globale Zeichenkodierung. Sollen ganze Sätze in einer anderen Sprache dargestellt werden, bietet sich UTF-8 mit einem größeren Zeichenvorrat an.

🖝 Da sich in den vergangenen Jahren UTF-8 (Unicode) in der Programmierung immer mehr durchgesetzt hat, um eines Tages das ganze durcheinander mit den Zeichenkodierungen zu lösen, sollten auch Sie an Ihrer Website (von Anfang an) konsequent mit UTF-8 arbeiten.

Fügen Sie den Meta-Tag noch vor dem <title>-Tag ein, damit auch dieser korrekt angezeigt wird.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Titel der Seite</title>
 </head>
<body>
...
</body>
</html>

2. Editoren

Es ist unbedingt notwendig, dass der Editor die Datei speichert mit welcher die Zeichenkodierung im Dokument (Meta-Tag) angegeben wurde. Sie sollten daher einen Editor verwenden, bei dem Sie die Zeichenkodierung wählen können.

➤ Wählen Sie die Option: UTF-8 ohne BOM aus.

Was ist BOM? Erklärung auf: https://de.wikipedia.org/wiki/Byte_Order_Mark

[Bildschirmfoto] Kodierung beim speichern wählen (Windows Notepad). — Kodierung beim speichern wählen (Windows Notepad).

[Bildschirmfoto] Kodierung wählen (Notepad++). — Kodierung wählen (Notepad++).

[Bildschirmfoto] Format für neue Dateien wählen (Notepad++). — Format für neue Dateien wählen (Notepad++).

Bildschirmfotos: Notepad++ (kostenlos, notepad-plus.sourceforge.net)

3. Eine einheitliche Zeichenkodierung in allen Dateien setzen

➤ Wenn andere Dateien in die Seite eingebunden werden, zum Beispiel mit der PHP-Include()-Funktion, von einer Datenbank oder über externe Text-, CSS-, JavaScript-Dateien, müssen diese die gleiche Zeichenkodierung haben ansonsten können Probleme bei der Darstellung der Zeichen auftreten.

PHP

Einen PHP-Header mit der angegebenen Zeichenkodierung senden. Die Funktion muss vor jeglicher Ausgabe an den Browser erfolgen.

<php
header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="de">
 <head>
  …

Arbeitet man mit PHP, dann sollte die: "php.ini"-Datei folgende Einstellung haben: default_charset = "utf-8"

Datenbanken (MySQL / MariaDB, …)

Die Zeichenkodierung bei der Verbindung zur Datenbank einstellen.

<php
// PDO()
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'user', 'pass');

// mysqli()
$db = new mysqli("localhost", "user", "pass", "test");
mysqli_set_charset($db, "utf8");
?>

➤ Die Datenbank-Tabelle sollte auch umgestellt werden, dabei hilft das Programm: phpMyAdmin (ist bei vielen Webhostern bereits auf dem Server verfügbar) die richtige Zeichenkodierung zu setzen.

🖝 Ich empfehle bei MySQL/MariaDB, für Tabellen-Spalten mit Textinhalt (VARCHAR, TEXT, …) entweder die Kollation: utf8_unicode_ci oder utf8mb4_unicode_ci.

Mit utf8mb4_unicode_ci können auch Unicode Symbol-Zeichen (sogenannte Emoji) dargestellt werden.

Tipps

Lokalen Webserver einrichten und verwenden: Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.

Berechnungen mit dem Datum: Feiertage, Mondphase, Wochentag, Sonnenaufgang und Sonnenuntergang, Julianisches Datum, Sternzeichen, ...

Spalten einer Tabelle dynamisch ändern: Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können, wie das geht wird hier an einem Beispiel demonstriert.

Download-Archiv: Mit dem Download-Archiv können Sie Bilder, PDF-Dateien, ZIP-Archive und so weiter auf dem Server hochladen. Die Datei-Infos (Dateiname, Beschreibung, Dateigröße und das Datum) werden in einer SQLite-Datenbank gespeichert.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.