How To Check If A Character Will Display In The Browser

If I want to display a special character like ⬀, ⤴ or ➶, How can I see if the user's browser can display it? I don't want the character to come out as ▯; if it would, I'd r

Solution 1:

Use more than one character

Say you're not using a monospace font, Use 3+ characters from different languages that chances are no one have them all installed.

Then measure their width in an environment that can render them and provide this data to your app.

For example:

• A is wider than B
• and B is wider than C

A simple algorithm would be:

1. Gather A, B and C's width in users environment. Use the technique you described.

2. If A is wider than B, B wider than C. Fallback to safe character.

3. If One or All of these isn't in right order. Use that one as ▯.

Conclusion

I understand this is basic, but this is best way I can think of.