Zeichenkodierung - Schriftzeichen richtig darstellen

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örter, Überprüfung, Schaltfläche, Änderung, 
Dateigröße, Ökosystem, Fußball, Kü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.

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

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 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');
?>

Datenbank (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: utf8_unicode_ci oder utf8mb4_unicode_ci.
Mit utf8mb4_unicode_ci können auch Unicode Symbol-Zeichen dargestellt werden.

Tipps

Artikel über Checkboxen auswählen
Hier können Artikel (Bilder) ausgewählt werden die bestimmte Kriterien der Checkboxen erfüllen. Die Daten werden in einer CSV-Datei gespeichert und können individuell angepasst werden.
Dateibrowser
Ein einfacher Dateibrowser, ideal um PHP-Scripte auf einem lokalen Webserver zu testen, die PHP-Scripte müssen dann nicht mehr umständlich über die Adresszeile des Browsers aufgerufen werden.
Mit PHP zeichnen - Eine Grafik mit PHP erstellen
Mit den Grafikfunktionen können Sie zur Laufzeit des PHP-Scripts auch Grafiken erzeugen.
Diese Schlagwörter könnten Sie interessieren:
Kommentar-Box Dateibrowser Datenschutz-Hinweis Rahmen Canvas Mimetypen Fotoalbum Diashow Metadaten Linkliste Sicherheit Zebra-Tabelle PHPMailer Event-Kalender Seitenformatierung ASCII Sitemaps-Protokoll Formulare AJAX Silbentrennung