Displaying unicode symbols in HTML

Question

I want to simply display the tick     and cross     symbols in a HTML page but it shows up as either a box or goop         - obviously something to do with the encoding   I have set the meta tag to show utf-8 but obviously I m missing something    lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt    Edit Solution  From comments made  using FireBug I found the headers being passed by my page were in fact  Content-Type  text html  and not UTF-8  Looking at the file format using Notepad   showed my file was formatted as  UTF-8 without BOM   Changing this to just UTF-8 the symbols now show correctly    but firebug still seems to indicate the same content-type

User · Accepted Answer

You should ensure the HTTP server headers are correct.

In particular, the header:

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

should be present.

The meta tag is ignored by browsers if the HTTP header is present.

Also ensure that your file is actually encoded as UTF-8 before serving it, check/try the following:

Ensure your editor save it as UTF-8.
Ensure your FTP or any file transfer program does not mess with the file.
Try with HTML encoded entities, like &#uuu;.
To be really sure, hexdump the file and look as the character, for the ?, it should be E2 9C 94 .

Note: If you use an unicode character for which your system can't find a glyph (no font with that character), your browser should display a question mark or some block like symbol. But if you see multiple roman characters like you do, this denotes an encoding problem.

User · Answer

Unlike proposed by Nicolas  the meta tag isn   t actually ignored by the browsers  However  the Content-Type HTTP header always has precedence over the presence of a meta tag in the document   So make sure that you either send the correct encoding via the HTTP header  or don   t send this HTTP header at all  not recommended   The meta tag is mainly a fallback option for local documents which aren   t sent via HTTP traffic   Using HTML entities should also be considered a workaround     that   s tiptoeing around the real problem  Configuring the web server properly prevents a lot of nuisance

User · Answer

I know an answer has already been accepted  but wanted to point a few things out   Setting the content-type and charset is obviously a good practice  doing it on the server is much better  because it ensures consistency across your application   However  I would use UTF-8 only when the language of my application uses a lot of characters that are available only in the UTF-8 charset  If you want to show a unicode character or symbol in one of cases  you can do so without changing the charset of your page   HTML renderers have always been able to display symbols which are not part of the encoding character set of the page  as long as you mention the symbol in its numeric character reference  NCR   Sounds weird but its true   So  even if your html has a header that states it has an encoding of ansi or any of the iso charsets  you can display a check mark by using its html character reference  in decimal -  amp  10003  or in hex -  amp  x2713   So its a little difficult to understand why you are facing this issue on your pages  Can you check if the NCR value is correct  this is a good reference http   www fileformat info info unicode char 2713 index htm

User · Answer

I think this is a file problem  you simple saved your file in 1-byte encoding like latin-1  Google up your editor and how to set files to utf-8   I wonder why there are editors that don t default to utf-8

User · Answer

Make sure that you actually save the file as UTF-8  alternatively use HTML entities   amp  nnn   for the special characters

[html] Displaying unicode symbols in HTML

Examples related to html

Examples related to unicode