Sep

Sonderzeichen Buchstabensalat mit HTML-Entities

Karierter Blog Category

Wer internationale Websites erstellt könnte ebenfalls dieses doch etwas kuriose Problem bekommen.
Werden Umlaute und Sonderzeichen nicht richtig angezeigt zum Beispiel von einer Sprache wie Polnisch mit sehr vielen Sonderzeichen, dann gibt es ein paar Dinge zu beachten.

Achtung alle folgenden HTML-Entity Beispiele ohne Leerzeichen!

1) Du hast einen Text den du in HTML-Code veröffentlichen möchtest. Beim kopieren des Textes verschwinden die Sonderzeichen!
Dazu mußt du die HTML-Datei Kodierung konvertieren in UTF-8, das geht beispielweise mit einem Texteditor wie Notepad++.
Sonst wird ein Zeichen wie ł, ó, ż oder ą ohne den Akzent angezeigt oder gar nicht übernommen.

2) Trotzdem werden die Sonderzeichen auch wenn sie nun im Texteditor richtig angezeigt werden möglicherweise im Browser nicht richtig angezeigt. Abhilfe schaffen hier die sogenannten HTML-Entities. Diese sind der HTML-Ersatz um die Buchstaben mit jeder Browser- bzw. Landeseinstellung richtig anzuzeigen.
Aus einem ä wird beispielsweise ein & auml ; und aus einem ß ein & szlig ;.
Eine Liste von HTML-Entities erhält man auf Seiten wie
http://www.w3schools.com/tags/ref_entities.asp
http://unicode.e-workers.de/entities.php

3) Sonderzeichen werden trotzdem nicht angezeigt?
Hier ist nun ein sonderbarer Fall bei Zeichen wie ś und ń.
Nach der HTML-Entitie schreibweise wird aus einem á ein á.
Da diese Sonderzeichen nicht in den gängigen HTML-Entite Referenzen auftauchen, wäre es daher logisch, dass aus ś ein & sacute ; wird und aus ń ein & nacute ; wird.
Das wird auch im Firefox 6 richtig dargestellt, ABER im Internet Explorer 9 nicht!
Internet Explorer 9 zeigt statt ś ein & sacute ; und statt ń ein & nacute ;. Der Text wird dadurch natürlich unlesbar.
Abhilfe bringt nur der Einsatz der HTML-Entity-Unicode-Nummer anstatt des HTML-Entity-Namens den du zum Beispiel hier findest, dann wird es auch in allen Browsern korrekt dargestellt.
Aus ś wird somit ein & #347 ; wird und aus ń ein & #324 ;