Affichage des symboles Unicode en HTML

Question

Je veux simplement afficher les symboles de coche () et de croix () dans une page HTML mais ils apparaissent comme une boîte ou une bouillie - évidemment quelque chose à voir avec l'encodage.

J'ai défini la balise meta pour afficher utf-8 mais évidemment, je dois manquer quelque chose.

Éditer/Solution : Suite aux commentaires, en utilisant FireBug j'ai trouvé que les en-têtes envoyés par ma page étaient en fait "Content-Type: text/html" et non UTF-8. En regardant le format du fichier avec Notepad++ j'ai vu que mon fichier était formaté en "UTF-8 sans BOM". En changeant cela en juste UTF-8 les symboles s'affichent maintenant correctement... mais firebug semble toujours indiquer le même type de contenu.

Answer 1

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 en UTF-8.
• Vérifiez que votre FTP ou tout autre programme de transfert de fichiers ne modifie pas le fichier.
• Essayez avec des entités encodées en HTML, comme &#uuu;.
• Pour être vraiment sûr, faites un hexdump du fichier et regardez le caractère, pour le ✔, il devrait être E2 9C 94 .

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

Answer 2

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

Définir le type de contenu et charset est évidemment une bonne pratique, le faire côté serveur est beaucoup mieux, car cela garantit une cohérence dans toute votre application.

Cependant, j'utiliserais UTF-8 uniquement lorsque la langue de mon application utilise beaucoup de caractères disponibles uniquement dans le jeu de caractères UTF-8. Si vous voulez afficher un caractère ou un symbole unicode dans l'un des cas, vous pouvez le faire sans changer le charset de votre page.

Les moteurs de rendu HTML ont toujours été capables d'afficher des symboles qui ne font pas partie de l'ensemble de caractères d'encodage de la page, tant que vous mentionnez le symbole dans sa référence de caractère numérique (NCR). Cela semble étrange mais c'est vrai.

Par conséquent, même si votre html a un en-tête indiquant qu'il a un encodage de ansi ou de l'un des jeux de caractères iso, vous pouvez afficher une coche en utilisant sa référence de caractère html, en décimal - ✓ ou en hexadécimal - ✓

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

Answer 3

Assurez-vous réellement d'enregistrer le fichier en UTF-8, sinon utilisez des entités HTML (&#nnn;) pour les caractères spéciaux.

Answer 4

Contrairement à ce que propose Nicolas, la balise meta n'est en fait pas ignorée par les navigateurs. Cependant, l'en-tête HTTP Content-Type a toujours la priorité sur la présence d'une balise meta dans le document.

Assurez-vous donc d'envoyer le codage correct via l'en-tête HTTP, ou de ne pas envoyer du tout cet en-tête HTTP (ce qui n'est pas recommandé). La balise meta 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 contourner le vrai problème. Configurer correctement le serveur web permet d'éviter beaucoup de tracas.

Answer 5

Je vous suggère de lire Unicode and HTML, jetez un coup d'œil sur le tableau à ce sujet.