Affichage des symboles Unicode en HTML

89

Je veux simplement afficher les symboles de coche (✔) et de croix (✘) dans une page HTML, mais cela apparaît sous forme de boîte ou de goop - évidemment quelque chose à voir avec l'encodage.

J'ai défini la balise meta pour afficher utf-8 mais il me manque évidemment quelque chose.

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

Edit / Solution: D'après les commentaires faits, en utilisant FireBug, j'ai trouvé que les en-têtes passés par ma page étaient en fait "Content-Type: text / html" et non UTF-8. L'examen du format de fichier à l'aide de Notepad ++ a montré que mon fichier était formaté en "UTF-8 sans nomenclature". En changeant cela en seulement UTF-8, les symboles s'affichent désormais correctement ... mais Firebug semble toujours indiquer le même type de contenu.

html  unicode 
— Peter Craig
source

Réponses:

56

Vous devez vous assurer que les en-têtes du serveur HTTP sont corrects.

En particulier, l'en-tête:

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

devrait être présent.

La balise meta est ignorée par les navigateurs si l'en-tête HTTP est présent.

Assurez-vous également que votre fichier est réellement encodé en UTF-8 avant de le servir, vérifiez / essayez ce qui suit:

  • Assurez-vous que votre éditeur l'enregistre au format UTF-8.
  • Assurez-vous que votre FTP ou tout autre programme de transfert de fichiers ne gâche pas le fichier.
  • Essayez avec des entités encodées en HTML, comme &#uuu;.
  • Pour être vraiment sûr, videz le fichier en hexadécimal et regardez comme le caractère, pour le ✔, il devrait s'agir de E2 9C 94.

Remarque: Si vous utilisez un caractère Unicode pour lequel votre système ne trouve pas de glyphe (aucune police avec ce caractère), votre navigateur devrait afficher un point d'interrogation ou un symbole semblable à un bloc. Mais si vous voyez plusieurs caractères romains comme vous le faites, cela dénote un problème d'encodage.

En fait, la balise meta n'est pas ignorée, mais l'en-tête HTTP a la priorité. Merci Konrad pour cette précision.
8
Notez que pour utiliser un caractère unicode dans la contentpropriété d'un ::beforesélecteur CSS , il faudrait utiliser la notation anti-slash. par exemple: '\ 2713' au lieu de '& # 2713'.
— Fabien Snauwaert
18

Je sais qu'une réponse a déjà été acceptée, mais je voulais souligner quelques points.

Définir le content-typeet charsetest évidemment une bonne pratique, le faire sur le serveur est bien meilleur, car cela garantit la cohérence dans votre application.

Cependant, je n'utiliserais UTF-8que lorsque la langue de mon application utilise beaucoup de caractères qui ne sont disponibles que dans le UTF-8jeu de caractères. Si vous souhaitez afficher un caractère ou un symbole Unicode dans l'un des cas, vous pouvez le faire sans changer le charsetde votre page.

HTMLles moteurs de rendu ont toujours été en mesure d'afficher des symboles qui ne font pas partie du jeu de caractères d'encodage de la page, tant que vous mentionnez le symbole dans son numeric character reference (NCR). Cela semble étrange mais c'est vrai.

Ainsi, même si votre htmla un en-tête indiquant qu'il a un encodage de ansiou de l'un des isojeux de caractères, vous pouvez afficher une coche en utilisant sa référence de caractère html, en décimal - & # 10003; ou en hexadécimal - & # x2713;

Il est donc un peu difficile de comprendre pourquoi vous rencontrez ce problème sur vos pages. Pouvez-vous vérifier si la valeur NCR est correcte, c'est une bonne référence http://www.fileformat.info/info/unicode/char/2713/index.htm

— Akshay
source
6
"Cependant, j'utiliserais UTF-8 uniquement lorsque la langue de mon application utilise beaucoup de caractères qui ne sont disponibles que dans le jeu de caractères UTF-8" Pourquoi? Quel est l'inconvénient de changer?
— dumbledad
3
@dumbledad: Très bonne question, je suppose que je laisse mon propre biais obscurcir ma réponse. Ce que je voulais dire, c'est que si votre application entière est déjà non utf-8, la changer d'application pour une seule page pourrait être trop de travail. De plus, si votre langage de programmation et votre contenu n'ont pas besoin de caractères utf-8, vous pouvez accidentellement copier-coller un caractère indésirable avec lequel votre éditeur conviendra (car il est en mode utf-8), mais le code échouera pendant l'exécution. Cela dit, lorsque vous le pouvez, mettez à jour votre encodage et votre jeu de caractères
— Akshay
6

Assurez-vous que vous enregistrez réellement le fichier au format UTF-8, ou utilisez des entités HTML ( &#nnn;) pour les caractères spéciaux.

— Guffa
source
Il ne semble pas y avoir d'entité HTML pour ✔ ou ai-je manqué? Comment enregistrez-vous "réellement" le fichier au format UTF-8 et comment pouvez-vous le vérifier?
— Peter Craig
@Peter: en utilisant un éditeur décent. La plupart des éditeurs de texte ont une option dans leur boîte de dialogue «Enregistrer sous» pour spécifier le codage du fichier, ou ils ont une autre option cachée quelque part dans leur menu. Vim utilise le fileencodingparamètre.
— Konrad Rudolph
8
@Peter, vous pouvez faire référence à n'importe quel caractère par son code. Essayez & # x2714; pour une tique.
— Dan Dyer
enregistrer sous utf-8. concept intéressant. fonctionne bien si vous créez des pages HTML statiques. mais ... qu'en est-il des pages Web dynamiques? ce truc de caractère unicode / utf-8 / wide est vraiment assez déroutant pour moi. mon code backend est perl. l'en-tête http est correctement défini, tout comme l'en-tête html. Le vérificateur d'internationalisation du W3C confirme que le document est défini sur utf-8. est-ce que CaSinG est important? enfin, qu'en est-il des zones de saisie de texte? je reçois toujours goop! :(
— Jarett Lloyd
addendum au commentaire précédent: ma base de données montre que les données ont été saisies correctement et que les caractères s'affichent correctement. donc, pas de problème de base de données. mon script perl (ou plutôt l'éditeur) est configuré pour enregistrer les scripts sous utf-8. mon serveur, apache2, je suis assez certain qu'il n'interfère pas ou qu'il est bien réglé. tout cela dit, je ne sais toujours pas pourquoi les caractères sont goop. Pouah. il doit y avoir un meilleur moyen
— Jarett Lloyd
5

Contrairement à la proposition de Nicolas, la metabalise n'est en fait pas ignorée par les navigateurs. Cependant, l' Content-Typeen-tête HTTP a toujours la priorité sur la présence d'une metabalise dans le document.

Assurez-vous donc d'envoyer le bon encodage via l'en-tête HTTP, ou de ne pas envoyer du tout cet en-tête HTTP (non recommandé). La metabalise est principalement une option de secours pour les documents locaux qui ne sont pas envoyés via le trafic HTTP.

L'utilisation d'entités HTML devrait également être considérée comme une solution de contournement - c'est la pointe des pieds autour du vrai problème. La configuration correcte du serveur Web évite de nombreuses nuisances.

— Konrad Rudolph
source
0

Je pense que c'est un problème de fichier, vous avez simplement enregistré votre fichier en encodage 1 octet comme latin-1. Google votre éditeur et comment définir des fichiers sur utf-8.

Je me demande pourquoi il existe des éditeurs qui n'utilisent pas par défaut utf-8.

— Kugel
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.