Thomas Maier | Magento & WordPress Develover post@webzunft.de | +49 162 9313 708

Antworten auf die Fragen – nicht nur meiner Kunden 

RSS
Home für Entwickler Wie werden Unicode-Zeichen zu HTML?

Wie werden Unicode-Zeichen zu HTML?

Ausgestellt am 16. Oktober 2012 von in für Entwickler

Ich ersetze gerade auf einigen meiner Webseiten kleine Grafiken gegen Unicode Sonderzeichen. Darunter ✓ und ✕ für Bestätigung oder Ablehnung einer Option. Eigentlich eine tolle Idee, aber der Code für die beiden Zeichen ist U+2713 bzw. U+2715. Diese Zeichen lassen sich so nicht direkt in HTML verwenden.

Unicode-Zeichen in HTML umwandeln

UTF-8 als Voraussetzung

Eine grundsätzlich gute Voraussetzung ist, dass das Dokument in utf-8 gespeichert bzw. auch als solches interpretiert wird.

Möglichkeiten der Umwandlung

Bei meiner Recherche habe ich zwei Varianten zur Umwandlung des Unicode Codes in einen gültigen HTML-Code gefunden:

Dazu muss vorweggeschoben werden, dass es sich um 2713 in U+2713 um einen Hexadezimalcode handelt.

In HTML wird die 2713 direkt übernommen und sieht dann so aus:

✓

Die zweite Variante ist die Umwandlung der Hexadezimalzahl in eine Dezimalzahl mit folgendem Muster:

✓

weil der Hexadezimalwert 2713 im Dezimalsystem 10003 ist.

Eine weitere Möglichkeit sind die Namen der Zeichen, aber da habe ich bisher keine ausführliche Liste gefunden.

Oder ganz einfach Copy&Paste

Ich bin mir noch nicht sicher, inwieweit es browser- und geräteübergreifend funktioniert, aber zumindest technisch ist es kein Problem in ein als utf-8 kodiertes Dokument einfach das entsprechende Unicode-Zeichen hineinzukopieren.

Probleme mit CSS und JS

Womit ich noch Probleme habe ist die Nutzung der Sonderzeichen in CSS und JavaScript. Bei CSS ist es für Befehle mit :before { content: “} relevant. Hier und im JavaScript habe ich zumindest mit der Copy&Paste-Methode bisher Probleme gehabt. Auch die anderen Varianten funktionieren nicht unbedingt. Hier gilt es ausreichend zu testen.

Ressourcen

Mehr zum Thema findet ihr hier:

Hex-Umrechner

Umfangreiche Liste mit Unicode-Zeichen (Wikipedia)

Unicode und HTML (Wikipedia)

und noch eine Liste sogar mit Hexa- und Dezimalzahlen

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.