Is It Safe To Use Unicode Literals in HTML?

Question

I am making an application, and I want to add a "HOME" button.

After much struggling with various icon libraries, I stumbled upon this site,

http://graphemica.com/%F0%9F%8F%A0, with this

🏠

A unicode symbol, which is more akin to a letter than an image.

I pasted it into my HTML, and it just worked^TM.

All this seems a little too easy, though. Are unicode symbols widely supported? Is there some kind of problem with them that leads people to use icon libraries instead?

Answer 1

Some things you want to make sure you’re doing:

• Save your HTML file as UTF-8. In fact, save all text files as UTF-8 unless there’s some reason you can’t.
• Put the line <meta charset="utf-8" /> near the top of your HTML file.
• Make sure your server isn’t misconfigured to tell all browsers that webpages are in the wrong encoding.
• If, somehow, it is and you can’t fix it, fall back on &entities;.
• Specify a font stack for your emoji in CSS with a set of fonts that cover nearly every system, perhaps including Apple Color Emoji, Noto Color Emoji, Segoe UI Emoji and Twemoji.
• If a free font such as Noto or Symbola contains the emoji you use, you can package it as a WOFF to be sure it will always display the way you want. (As of 2018, Tor browser does not show most emoji correctly by default, but mainstream browsers do.)

Answer 2

It depends on what do you mean for "safe".

User should have the fonts, so you must include the relative font, and in various formats: there is not yet a format recognized by most used web-browsers.

Additionally, font with multiple colours are not fully understood by various systems, so you should care about what do you expect from users (click, select, copy, etc.).

Additionally, every fonts has own design, so between different fonts (so browsers and operating system) things can look differently. We do not have yet a "Helvetica 'Home'", a "Times New Roman 'Home'".

All this points, could be solved by using a web font, with monochrome glyphs (but it could be huge, if it includes all Unicode code points (+ usual combinations).

It seems that various recent browser crashes if there are many different glyphs, but usually it should not be a problem.

I also recommend aria stuffs so that you page could be used also by e.g. readers (and braille screen).

Note: on the plus side, the few people that use text browser can better see the HOME (not the case in case of an image), if somebody still care about this use case.