How does GitHub detect whether the browser has color emoji support?

Question

When visiting GitHub using a browser without color emoji support, it loads emoji glyphs as image files.

GitHub without color emoji support

But when visiting GitHub using a browser that does have color emoji support, it lets the browser render the glyphs normally instead.

GitHub with color emoji support

How can GitHub know whether the browser supports color emoji or not?

maybe this article could help: https://blog.farrant.me/adding-emoji-support-to-any-website/ — Mohsen Mirhoseini, Nov 02 '16 at 16:32
@MohsenMirhoseiniArgi Nope. I knew about that article. The solution he demonstrates ALWAYS loads the glyphs as images, even if the browser supports them. — jobukkit, Nov 02 '16 at 16:38
@Someone Here's the page: https://github.com/notwaldorf/ama/issues/53 The reason the screenshot looks like Hangouts is because my operating system uses Google's emoji font (coincidentally the subject of that page!). — jobukkit, Nov 02 '16 at 16:45

score 1 · Answer 1 · edited Sep 28 '17 at 17:02

I do that like this :

var canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d");

canvas.style="height:100px;width:100px;position:absolute;top:60%;background:white";
document.body.appendChild(canvas);
ctx.fillStyle ="#FFF";
ctx.font="100px Arial";
ctx.fillText('',100,100);
var d = ctx.getImageData(50, 50, 1, 1).data;
if (d[0] + d[1] + d[2] === 0) {
    //need twemoji or something else
} else {
    //nothing to do   
}

How does GitHub detect whether the browser has color emoji support?

1 Answers1