How to handle missing emojis?

[ollelauribostrom]

Some of the rebuses use emojis that are not supported by every system. Does anyone have an idea on how we could solve his?

My current idea:

1. Somehow check if an emoji is supported by the users browser/system
2. If not, replace that emoji with a twemoji

[andyn95]

Can I contribute to this issue?

[ollelauribostrom]

@andyn95 Sure, do you have any ideas on how to solve this? 🙂

[CodeWithOz]

@ollelauribostrom I'd like to implement your suggested idea of detecting lack of support and replacing with Twemoji. Do you think it should be a check for emoji support in general or for specific emojis that may not be present in a particular environment? I did a little research and Modernizr can be used to check for emoji support in the browser, although it's not a test of support for specific emojis. The general implementation would be something like this:

if (!Modernizr.emoji) {
  twemoji.parse(document.body);
}

What do you think?

[CodeWithOz]

@ollelauribostrom what's an ideal test for this feature? I am thinking of placing the functionality in a module and exposing a method that accepts an emoji string or DOM element, converts it to the appropriate <img> element using twemoji, and returns the <img> element. This method can then be tested to ensure it works as expected. My only concern is that this method will basically just wrap twemoji's .parse() method and provide the exact same functionality, so testing it feels redundant. What do you think?

[ollelauribostrom]

@CodeWithOz Since most devices now a days have some kind of emoji support we would probably want to detect the lack of specific emojis (like for instance I'm using OSX 10.11.1 and can't see all emojis used in this project). We probably don't need to pull in the entire Modernizr library, instead we could try working off this and create our own implementation. One problem however seems to be the fact that all rebuses in this project uses actual emojis and not their codes which will probably make it hard to check for support.

[LuisARodr]

Did a little reasearch and found this piece of code:

function toUTF16(codePoint) {
    var TEN_BITS = parseInt('1111111111', 2);
    function u(codeUnit) {
        return '\\u'+codeUnit.toString(16).toUpperCase();
    }

    if (codePoint <= 0xFFFF) {
        return u(codePoint);
    }
    codePoint -= 0x10000;

    // Shift right to get to most significant 10 bits
    var leadSurrogate = 0xD800 + (codePoint >> 10);

    // Mask to get least significant 10 bits
    var tailSurrogate = 0xDC00 + (codePoint & TEN_BITS);

    return u(leadSurrogate) + u(tailSurrogate);
}
const pill = '💊';
pillCodepoint = pill.codePointAt(0);//returns 128138
pillCodepoint.toString(16);      //returns "1f48a"
UTF16 = toUTF16(pillCodepoint);  //returns "\uD83D\uDC8A"

This can be used to convert emojis into their UTF16 counter part. The emoji tree package could be used to find emojis on a string. Implementing this could be a good way to start implementing how to handle missing emojis with the method that @ollelauribostrom sugested.

[sans-clue]

Is replacing emojis with icon sets (like font awesome) out of the question?

[mohd-anas-ansari]

@sans-clue I don't think we can find icons for every emoji we want to use.