Visualizzazione di simboli Unicode in HTML

89

Voglio semplicemente visualizzare i simboli di spunta (✔) e croce (✘) in una pagina HTML ma si presenta come una scatola o un goop - ovviamente qualcosa a che fare con la codifica.

Ho impostato il meta tag per mostrare utf-8 ma ovviamente mi manca qualcosa.

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

Modifica / Soluzione: Dai commenti fatti, usando FireBug ho scoperto che le intestazioni passate dalla mia pagina erano in realtà "Content-Type: text / html" e non UTF-8. Guardando il formato del file utilizzando Notepad ++ ha mostrato che il mio file era formattato come "UTF-8 senza BOM". Modificandolo solo in UTF-8, i simboli ora vengono visualizzati correttamente ... ma firebug sembra ancora indicare lo stesso tipo di contenuto.

html  unicode 
— Peter Craig
fonte

Risposte:

56

È necessario assicurarsi che le intestazioni del server HTTP siano corrette.

In particolare, l'intestazione:

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

dovrebbe essere presente.

Il meta tag viene ignorato dai browser se è presente l'intestazione HTTP.

Assicurati inoltre che il tuo file sia effettivamente codificato come UTF-8 prima di pubblicarlo, controlla / prova quanto segue:

  • Assicurati che il tuo editor lo salvi come UTF-8.
  • Assicurati che il tuo FTP o qualsiasi programma di trasferimento file non interferisca con il file.
  • Prova con entità codificate HTML, come &#uuu;.
  • Per essere veramente sicuri, esegui il dump del file e guarda come il carattere, per il ✔, dovrebbe essere E2 9C 94.

Nota: se utilizzi un carattere Unicode per il quale il tuo sistema non riesce a trovare un glifo (nessun carattere con quel carattere), il tuo browser dovrebbe visualizzare un punto interrogativo o un simbolo simile a un blocco. Ma se vedi più caratteri romani come te, questo denota un problema di codifica.

In realtà, il meta tag non viene ignorato, ma l'intestazione HTTP ha la precedenza. Grazie Konrad per quella precisione.
8
Si noti che per utilizzare un carattere Unicode nella contentproprietà di un ::beforeselettore CSS , è necessario utilizzare la notazione backslash. ad esempio: "\ 2713" invece di "& # 2713".
— Fabien Snauwaert
18

So che una risposta è già stata accettata, ma volevo sottolineare alcune cose.

L'impostazione di content-typee charsetè ovviamente una buona pratica, farlo sul server è molto meglio, perché garantisce la coerenza in tutta l'applicazione.

Tuttavia, lo userei UTF-8solo quando la lingua della mia applicazione utilizza molti caratteri che sono disponibili solo nel UTF-8set di caratteri. Se vuoi mostrare un carattere o un simbolo Unicode in uno dei casi, puoi farlo senza cambiare il simbolo charsetdella tua pagina.

HTMLi renderizzatori sono sempre stati in grado di visualizzare simboli che non fanno parte del set di caratteri di codifica della pagina, purché tu menzioni il simbolo nel suo file numeric character reference (NCR). Sembra strano ma è vero.

Quindi, anche se hai htmlun'intestazione che afferma che ha una codifica ansio uno qualsiasi dei isoset di caratteri, puoi visualizzare un segno di spunta utilizzando il suo riferimento al carattere html, in decimale - & # 10003; o in esadecimale - & # x2713;

Quindi è un po 'difficile capire perché stai affrontando questo problema sulle tue pagine. Puoi controllare se il valore NCR è corretto, questo è un buon riferimento http://www.fileformat.info/info/unicode/char/2713/index.htm

— Akshay
fonte
6
"Tuttavia, utilizzerei UTF-8 solo quando la lingua della mia applicazione utilizza molti caratteri disponibili solo nel set di caratteri UTF-8" Perché? Qual è lo svantaggio nel passaggio?
— Dumbledad
3
@ silente: domanda molto buona, immagino di aver lasciato che il mio pregiudizio offuscasse la mia risposta. Quello che volevo dire era che se l'intera applicazione non è già utf-8, cambiarla per una singola pagina potrebbe essere troppo faticoso. Inoltre, se il tuo linguaggio di programmazione e il tuo contenuto non necessitano di caratteri utf-8, puoi accidentalmente copiare e incollare un carattere spazzatura con cui il tuo editor andrà bene (dato che è in modalità utf-8), ma il codice fallirà durante l'esecuzione. Detto questo, quando puoi, aggiorna la codifica e il set di caratteri
— Akshay
6

Assicurati di salvare effettivamente il file come UTF-8, in alternativa usa entità HTML ( &#nnn;) per i caratteri speciali.

— Guffa
fonte
Non sembra esserci un'entità HTML per ✔ o me la sono persa? Come si salva "effettivamente" il file come UTF-8 e come si può controllare?
— Peter Craig
@ Peter: usando un editor decente. La maggior parte degli editor di testo ha un'opzione nella finestra di dialogo "salva con nome" per specificare la codifica del file, oppure ha un'altra opzione nascosta da qualche parte nel menu. Vim usa l' fileencodingimpostazione.
— Konrad Rudolph
8
@Peter, puoi fare riferimento a qualsiasi carattere tramite il suo codice. Prova & # x2714; per un segno di spunta.
— Dan Dyer,
salva come utf-8. concetto interessante. funziona bene se stai creando pagine HTML statiche. ma ... che dire delle pagine web dinamiche? questa roba di carattere unicode / utf-8 / wide è davvero abbastanza confusa per me. il mio codice di backend è perl. l'intestazione http è impostata correttamente e lo è anche l'intestazione html. Il controllo internazionalizzazione W3C conferma che il documento è impostato su utf-8. cosa importa? infine, che dire delle caselle di input di testo? ottengo ancora goop! :(
— Jarett Lloyd
addendum al commento precedente: il mio database mostra che i dati sono stati inseriti correttamente e i caratteri vengono visualizzati correttamente. quindi, non problema di database. il mio script perl (o meglio, l'editor) è impostato per salvare gli script come utf-8. il mio server, apache2, sono abbastanza certo che non stia interferendo o che sia impostato correttamente. tutto questo ha detto, ancora non sono sicuro del motivo per cui i caratteri sono goop. ugh. ci deve essere un modo migliore
— Jarett Lloyd
5

A differenza di quanto proposto da Nicolas, il metatag non viene effettivamente ignorato dai browser. Tuttavia, l' Content-Typeintestazione HTTP ha sempre la precedenza sulla presenza di un metatag nel documento.

Quindi assicurati di inviare la codifica corretta tramite l'intestazione HTTP o di non inviare affatto questa intestazione HTTP (non consigliato). Il metatag è principalmente un'opzione di fallback per i documenti locali che non vengono inviati tramite traffico HTTP.

Anche l'utilizzo di entità HTML dovrebbe essere considerato una soluzione alternativa, ovvero aggirare il vero problema in punta di piedi. Configurare correttamente il server web previene molti fastidi.

— Konrad Rudolph
fonte
0

Penso che questo sia un problema di file, hai semplicemente salvato il tuo file con una codifica a 1 byte come latin-1. Google il tuo editor e come impostare i file su utf-8.

Mi chiedo perché ci sono editor che non utilizzano di default utf-8.

— Kugel
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.