Anzeigen von Unicode-Symbolen in HTML

89

Ich möchte einfach die Häkchen (✔) und Kreuzsymbole (✘) in einer HTML-Seite anzeigen, aber es wird entweder als Box oder als Goop angezeigt - offensichtlich etwas, das mit der Codierung zu tun hat.

Ich habe das Meta-Tag so eingestellt, dass utf-8 angezeigt wird, aber offensichtlich fehlt mir etwas.

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

Bearbeiten / Lösung: Aus Kommentaren mit FireBug ging hervor, dass die von meiner Seite übergebenen Header tatsächlich "Inhaltstyp: Text / HTML" und nicht UTF-8 waren. Ein Blick auf das Dateiformat mit Notepad ++ zeigte, dass meine Datei als "UTF-8 ohne Stückliste" formatiert war. Wenn Sie dies auf UTF-8 ändern, werden die Symbole jetzt korrekt angezeigt ... aber Firebug scheint immer noch denselben Inhaltstyp anzuzeigen.

html unicode

— Peter Craig
quelle

56

Sie sollten sicherstellen, dass die HTTP-Server-Header korrekt sind.

Insbesondere der Header:

Content-Type: text/html; charset=utf-8

sollte vorhanden sein.

Das Meta-Tag wird von Browsern ignoriert, wenn der HTTP-Header vorhanden ist.

Stellen Sie außerdem sicher, dass Ihre Datei tatsächlich als UTF-8 codiert ist, bevor Sie sie bereitstellen. Überprüfen / versuchen Sie Folgendes:

Stellen Sie sicher, dass Ihr Editor es als UTF-8 speichert.
Stellen Sie sicher, dass Ihr FTP- oder Dateiübertragungsprogramm nicht mit der Datei in Konflikt gerät.
Versuchen Sie es mit HTML-codierten Entitäten wie &#uuu;.
Um wirklich sicher zu sein, hexdump die Datei und sehen Sie als das Zeichen, für das ✔ sollte es E2 9C 94 sein.

Hinweis: Wenn Sie ein Unicode-Zeichen verwenden, für das Ihr System keine Glyphe finden kann (keine Schriftart mit diesem Zeichen), sollte Ihr Browser ein Fragezeichen oder ein blockartiges Symbol anzeigen. Wenn Sie jedoch mehrere römische Zeichen sehen, wie Sie es tun, weist dies auf ein Codierungsproblem hin.

Eigentlich wird das Meta-Tag nicht ignoriert, aber der HTTP-Header hat Vorrang. Danke Konrad für diese Präzision.

8

Beachten Sie, dass zur Verwendung eines Unicode-Zeichens in der contentEigenschaft eines CSS- ::beforeSelektors die Backslash-Notation verwendet werden muss. Beispiel: '\ 2713' anstelle von '& # 2713'.

— Fabien Snauwaert

18

Ich weiß, dass eine Antwort bereits akzeptiert wurde, wollte aber auf einige Dinge hinweisen.

Das Einstellen von content-typeund charsetist offensichtlich eine gute Vorgehensweise. Das Ausführen auf dem Server ist viel besser, da dadurch die Konsistenz in Ihrer Anwendung sichergestellt wird.

Ich würde es jedoch UTF-8nur verwenden, wenn die Sprache meiner Anwendung viele Zeichen verwendet, die nur im UTF-8Zeichensatz verfügbar sind . Wenn Sie in einem Fall ein Unicode-Zeichen oder -Symbol anzeigen möchten, können Sie dies tun, ohne die charsetSeite zu ändern .

HTMLRenderer waren immer in der Lage, Symbole anzuzeigen, die nicht Teil des Kodierungszeichensatzes der Seite sind, solange Sie das Symbol in der Seite erwähnen numeric character reference (NCR). Klingt komisch, ist aber wahr.

Selbst wenn Ihr htmlHeader über eine Codierung ansioder einen der isoZeichensätze verfügt, können Sie ein Häkchen mithilfe der HTML-Zeichenreferenz in Dezimalzahl anzeigen - & # 10003; oder in hex - & # x2713;

Es ist daher etwas schwierig zu verstehen, warum Sie auf Ihren Seiten mit diesem Problem konfrontiert sind. Können Sie überprüfen, ob der NCR-Wert korrekt ist? Dies ist eine gute Referenz. Http://www.fileformat.info/info/unicode/char/2713/index.htm

— Akshay
quelle

6

"Ich würde UTF-8 jedoch nur verwenden, wenn die Sprache meiner Anwendung viele Zeichen verwendet, die nur im UTF-8-Zeichensatz verfügbar sind." Warum? Was ist der Nachteil beim Umschalten?

— Dumbledad

3

@dumbledad: Sehr gute Frage, ich denke, ich lasse meine eigene Voreingenommenheit meine Antwort trüben. Was ich damit sagen wollte war, wenn Ihre gesamte Anwendung bereits nicht utf-8 ist, könnte es zu viel Arbeit sein, das Anwendungsvideo für eine einzelne Seite zu ändern. Wenn Ihre Programmiersprache und Ihr Inhalt keine utf-8-Zeichen benötigen, können Sie versehentlich ein Junk-Zeichen kopieren und einfügen, mit dem Ihr Editor gut zurechtkommt (da es sich im utf-8-Modus befindet), aber der Code schlägt während der Ausführung fehl. Allerdings, wenn Sie können, aktualisieren Sie Ihre Codierung und Zeichensatz

— Akshay

6

Stellen Sie sicher, dass Sie die Datei tatsächlich als UTF-8 speichern, oder verwenden Sie alternativ HTML-Entitäten ( &#nnn;) für die Sonderzeichen.

— Guffa
quelle

Es scheint keine HTML-Entität für ✔ zu geben, oder habe ich sie verpasst? Wie können Sie die Datei "tatsächlich" als UTF-8 speichern und wie können Sie dies überprüfen?

— Peter Craig

@ Peter: mit einem anständigen Editor. Die meisten Texteditoren haben eine Option in ihrem Dialogfeld "Speichern unter", um die Dateicodierung festzulegen, oder sie haben eine andere Option, die irgendwo in ihrem Menü versteckt ist. Vim verwendet die fileencodingEinstellung.

— Konrad Rudolph

8

@Peter, Sie können durch seinen Code auf jedes Zeichen verweisen. Versuchen Sie & # x2714; für eine Zecke.

— Dan Dyer

als utf-8 speichern. interessantes Konzept. funktioniert gut, wenn Sie statische HTML-Seiten erstellen. aber ... was ist mit dynamischen Webseiten? Dieses Unicode / Utf-8 / Wide-Charakter-Zeug ist für mich wirklich ziemlich verwirrend. Mein Backend-Code ist Perl. Der http-Header ist richtig gesetzt, ebenso der HTML-Header. W3C Internationalization Checker bestätigt, dass ich das Dokument auf utf-8 gesetzt habe. spielt CaSinG eine Rolle? Was ist schließlich mit Texteingabefeldern? Ich bekomme immer noch Goop! :(

— Jarett Lloyd

Nachtrag zum vorherigen Kommentar: Meine Datenbank zeigt an, dass die Daten korrekt eingegeben wurden und die Zeichen korrekt angezeigt werden. Also kein Datenbankproblem. Mein Perl-Skript (oder besser gesagt der Editor) ist so eingestellt, dass die Skripte als utf-8 gespeichert werden. Mein Server, Apache2, ich bin ziemlich sicher, dass er nicht stört oder richtig eingestellt ist. All dies sagte, immer noch nicht sicher, warum Zeichen goop sind. Pfui. Es muss einen besseren Weg geben

— Jarett Lloyd

5

Anders als von Nicolas vorgeschlagen, wird das metaTag von den Browsern nicht ignoriert. Der Content-TypeHTTP-Header hat jedoch immer Vorrang vor dem Vorhandensein eines metaTags im Dokument.

Stellen Sie daher sicher, dass Sie entweder die richtige Codierung über den HTTP-Header senden oder diesen HTTP-Header überhaupt nicht senden (nicht empfohlen). Das metaTag ist hauptsächlich eine Fallback-Option für lokale Dokumente, die nicht über HTTP-Verkehr gesendet werden.

Die Verwendung von HTML-Entitäten sollte auch als Problemumgehung betrachtet werden - das umgeht das eigentliche Problem. Durch die ordnungsgemäße Konfiguration des Webservers werden viele Belästigungen vermieden.

— Konrad Rudolph
quelle

0

Ich denke, dies ist ein Dateiproblem. Sie haben Ihre Datei einfach in einer 1-Byte-Codierung wie Latin-1 gespeichert. Google deinen Editor und wie man Dateien auf utf-8 setzt.

Ich frage mich, warum es Editoren gibt, die nicht standardmäßig utf-8 verwenden.

— Kugel
quelle