Displaying Unicode Symbols in Html

Displaying unicode symbols in HTML

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.

how to display unicode in html without javascript?

The codepoints website appears to have a solution. They use the Symbola font which is added to the page using @font-face, and that renders some unicode symbols correctly, including the one specified in your question.

@font-face include (for testing, don't actually link to codepoints stylesheet when in production, instead copy it locally and link there instead):

<link rel="stylesheet" href="http://codepoints.net/api/font-face/Symbola.css">

Displaying the character:

<span style="font-family: Symbola, serif;">🚘</span>

Special character not displaying as expected

1 - Replace your

<meta charset="utf-8">

with

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

2 - Check if your HTML Editor's encoding is in UTF8. Usually this option is found on the tabs on the top of the program, like in Notepad++.

3 - Check if your browser is compatible with your font, if you're somehow importing a font. Or try and add a css to set your fonts to a default/generally accepted one like

body
{
    font-family: "Times New Roman", Times, serif;
}

Hope it helps :)

How to specify emoji version of a Unicode character in HTML?

I think you just specify the "emoji version" as a second entity. Like this:

<p>
 ✔<br/>
 ✔️<br/>
</p>

---

Related Topics