Is there a way to determine Unicode character browser compatibility? - unicode

Question

Is there a way to determine unicode compatibility, particularly with newer sets? I want to use the Unicode 6.0 character ❌ (❌), but was not sure which browsers it was compatible with. Searched on caniuse.com, but could not find compatability tables.

Answer 1

This is not a browser issue. Any browser can handle the character ❌, but the user would need to have a font installed that has a shape for it otherwise they'll see some kind of placeholder.
A glyph for U+274C Cross Mark ❌ is supplied as part of fonts bundled with Windows 7, and at least the Android and Ubuntu versions I have here, so that's not bad. If you need to be sure, you can use an embedded font that has such a glyph.
Alternatively there's the very old and well-supported U+00D7 Multiplication Sign ×, or other alternatives.
(There are cases when a browser—or, more specifically, the text layout engine used by the browser—does need to understand what a character is to render it correctly, in addition to having font support. But that's for when characters are added as part of complex scripts like Arabic where characters change their shape in response to context. Not a concern for simple standalone characters like ❌.)

Answer 2

You can check if an emoji is supported by:
Rendering it into a Canvas.
Resizing it to a 1 × 1 to get a single pixel average of it.
Comparing that average value to the one you get when rendering the square character that shows up when an emoji is missing.
Something like this (just a starting point, it just works on Chrome):
function emojiExists(emoji) {
try {
const canvas = document.createElement('CANVAS');
const context = canvas.getContext('2d');
// Set font baseline, size and family:
context.textBaseline = 'top';
context.font = '100px sans-serif';
// Scale so that we get a 1 x 1 representation of the emoji
// (just an average of all the pixels):
context.scale(0.01, 0.01);
// Write the emoji:
context.fillText(emoji, 0, 0);
// Just for testing. Uncoment this line and comment context.scale(...);
// document.body.appendChild(canvas);
// [0, 0, 0, 42] is the value returned for the rectangle character that shows
// up for missing emojis:
return context.getImageData(0, 0, 1, 1).data.join(',') !== '0,0,0,42';
} catch (err) {
// Canvas might not be suported...
}
}
console.log(emojiExists('😃')); // https://emojipedia.org/smiling-face-with-open-mouth/
console.log(emojiExists('💭')); // https://emojipedia.org/right-anger-bubble/
console.log(emojiExists('🛹')); // https://emojipedia.org/skateboard/
console.log(emojiExists('🇨🇳')); // https://emojipedia.org/flag-for-china/
For me, with Chrome Version 63.0.3239.132 (Official Build) (64-bit), I get true, true, false, false, but it doesn't work right in Firefox. It seems to be a known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1209480
You might need to adapt the code (and change or dynamically calculate the '0,0,0,42' value) when using custom fonts or different browsers.