9

Is there a work around to make country flag emoji visible on windows 10 through HTML?

<!DOCTYPE html>
  <html>
    <style>
      body {
        font-size: 40px;
      }
    </style>
    <body>
      <p>9983 will display &#9983;</p>
      <p>How to display American or Japanese flags?</p>
      <p> is just letters on Windows 10 &#128531;</p>
    </body>
  </html>

I found this on https://mdbootstrap.com/docs/jquery/content/flag/

I don't see a flag emoji on https://www.w3schools.com/charsets/ref_emoji.asp

I can view them on https://www.emojicopy.com/ but cannot use.

I found a CSS flag on https://github.com/pixelastic/css-flags/blob/master/app/styles/_flags/usa.scss

I'm still learning to use stackOverflow, and I'm new at coding. This is my fourth try at this question.

MoKi
  • 157
  • 1
  • 2
  • 15
  • 2
    Welcome to Stackoverflow! You have basically posted the same question again, which was closed. It will be better to edit the previous question and add some relevant details, posting the question multiple times is not going to get you an answer. Please read [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) and [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and edit your question accordingly. – isAif Jul 04 '20 at 17:33
  • 1
    Where is the flag not rendered, in code or in browser? – isAif Jul 04 '20 at 18:08
  • 1
    Try this: https://emojipedia.org/flag-barbados/ – shuberman Jul 05 '20 at 07:38
  • 1
    Looks like the two rectangular boxes in your code represents the flag. You shouldn't use those emojis in HTML because they don't look the same on all devices. Instead, you should create an image of that emoji (preferably SVG) and then use the `img` tag to embed it in HTML and then make its height equal to `1em`. – Puspam Jul 05 '20 at 10:58

4 Answers4

13

Use Noto Color Emoji font.

First, write a @font-face rule with the unicode-range property. Then add the font to the top of your font stack:

(Source)

@font-face {
  font-family: NotoColorEmojiLimited;
  unicode-range: U+1F1E6-1F1FF;
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

div {
  font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont, 
  'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 
  'Segoe UI Emoji', 'Segoe UI Symbol';
}
<div>
  <p>
                                                                                                                                                                                                   
  </p>
  <p>
    Noto Color Emoji abcdefghijklmnopqrstuvwxyz0123456789
  </p>
</div>
Felipe Saldanha
  • 1,087
  • 8
  • 17
11

Flags don't seem to work on Windows due to political reasons, see https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05?page=1

This thread seems to have found a workaround Flag Emojis not rendering

ppt
  • 946
  • 8
  • 18
  • 1
    What I stated in my answer is correct: flag emoji do work on Windows 10, but require a different font than the Segoe UI Emoji font. – Peter Constable May 21 '21 at 15:30
  • @PeterConstable are there some default fonts on Windows that would support emojis? – ppt May 22 '21 at 11:09
  • On Windows, the Segoe UI Emoji font is used to support emoji. It supports over 50000 family combinations (more than other platforms) but doesn't support flags. But if you have a different emoji font that supports flags, the flag emoji can be displayed. – Peter Constable May 23 '21 at 18:25
6

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 &#x1f1ef;&#x1f1f5;: "". 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".

Peter Constable
  • 2,707
  • 10
  • 23
1

The problem is that the Windows' default emoji font, Segoe UI Emoji, has the 26 country flag letter codepoints the country flags are composed of, but has only letters representing them, so the flags will always be rendered as the Segoe UI Emoji letters unless an application explicitly declares that another Emoji Font is to be preferred.

Luckily, you can just replace the Windows Emoji font by taking another Emoji Font and changing its internal name to Segoe UI Emoji.

I did that for Google's Noto Emoji font, which you can download at https://github.com/perguto/Country-Flag-Emojis-for-Windows.

Dominik
  • 135
  • 1
  • 7