Flag Emojis Not Rendering

Flag Emojis not rendering

The flag emojis may not render regardless of what you do, depending on the platform (rather than merely the browser and/or the browser font). To find out, go to https://emojipedia.org/search/?q=emoji+flags and look at the rendering of the emoji flag for Djibouti, to the left of the text "Flag: Djibouti".

If you see an image of a flag all is well but if you only see DJ then the emoji flags may not be supported. I visited that page on an iPad, Linux Mint 18.2 and Windows 10, and this is what I found:

The Djibouti flag emoji rendered on the iPad.
The Djibouti flag was rendered as DJ on Linux Mint 18.2 using Firefox.
The Djibouti flag was rendered as DJ on Windows 10 using Firefox, although this was expected since "Microsoft doesn't support any country flags on Windows, instead showing the two-letter country codes".

So if you only want to render emoji flags in the browser on Apple platforms you should be fine, and if you want to render emoji flags in the browser on Windows it will render the two character country code instead. I'm not sure about the situation on Linux since although it didn't work for me in my environment, I couldn't find anything explicitly stating that it should or should not work.

An alternative to using Unicode emoji flags if you need this working on all platforms is to download free emojis which are actually just small png images. Here are some samples for the Argentinian flag.

Update:

In the absence of a true solution as explained above, here's an alternative approach which does not use Unicode emojis, but instead uses downloaded .png images:

<!DOCTYPE html>
<html>
    <head>
        <title>Flag demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!–– Credit to Alvaro Montoro for this approach - see https://stackoverflow.com/a/41189982/2985643 ––>
        <link rel="StyleSheet" href="css/flagdemo.css">
    </head>
    <body>
        <h1>Flag demo</h1>
        <div class="select-sim" id="select-color">
            <div class="options">
                <div class="option">
                    <input type="radio" name="flag" value="" id="flag-" checked />
                    <label for="flag-">⚐ Pick a country</label>
                </div>
                <div class="option">
                    <input type="radio" name="flag" value="Argentina" id="flag-argentina" />
                    <label for="flag-argentina"><img src="img/argentina-flag-round-icon-16.png" alt="Sample Image" /> Argentina</label>
                </div>
                <div class="option">
                    <input type="radio" name="flag" value="Brazil" id="flag-brazil" />
                    <label for="flag-brazil"><img src="img/brazil-flag-round-icon-16.png" alt="Sample Image" /> Brazil</label>
                </div>
                <div class="option">
                    <input type="radio" name="flag" value="Chile" id="flag-chile" />
                    <label for="flag-chile"><img src="img/chile-flag-round-icon-16.png" alt="Sample Image" /> Chile</label>
                </div>
            </div>
        </div>
    </body>
</html>

The content of the .css file (flagdemo.css) is identical to that provided by Alvaro Montoro in this SO answer to the question How to add images in select list?.

Since this approach only uses standard HTML and CCS (no Javascript or JQuery) it should work on any platform:

htmlExample

How do I view country flags on Windows 10 through HTML?

Windows includes the Segoe UI Emoji font, but it does not support flags. To see flag emoji on Windows 10, you'll have to provide a custom emoji font that does support flags.

There's an ISO standard with two-letter codes for countries, like "JP" for Japan. In Unicode, the emoji flags are encoded as a pair of special characters that correspond to "A" to "Z", but that are different characters from A-Z. You can see the different sequences at https://unicode.org/emoji/charts/full-emoji-list.html#country-flag. For example, for the Japanese flag the sequence U+1F1EF U+1F1F5 is used. To encode those in a Web page, you can use character entities 🇯🇵: "quot;. If the browser / host OS support display of emoji flags, that's what you'll see. If not, you'll probably see something that looks like "JP".

How can I detect rendering support for emoji in JavaScript?

Paint a glyph (in the Emoji range that is the one most popular by vendors, in the range of Emojis by the Unicode Consortium like Happy face, Kiss, Sad face etc) to canvas and read a pixel using getImageData. If the pixel's Alpha channel data[3] you're interested-in is not transparent (like for example in the center of ) , else, it might be an Emoji /p>

function supportsEmoji () {
  const ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = ctx.canvas.height = 1;
  ctx.fillText(", -4, 4);
  return ctx.getImageData(0, 0, 1, 1).data[3] > 0; // Not a transparent pixel
}

console.log( supportsEmoji() );

Displaying Emoji in Google Chrome

I just implemented Emoji support in my extension using the open-source Twemoji library.

In the simplest form, it involves adding a .js file and calling a function on a DOM element to replace Unicode emoji with Twitter CDN provided images:

twemoji.parse(node);

See the repository readme for more options.

Flag Emojis Not Rendering