1

I want to display the following symbol : "\ud83c\uddfa\ud83c\uddf8" This, in HTML, is supposed to display the flag of the USA. The first half displays "U", and the 2nd half displays "S". Put together, it displays a little symbol of the flag (by a mechanism I'm not sure about). Well, it does in Firefox at least. It doesn't in Chrome. In Chrome, it just shows "U S".

I wish Chrome could work as well as Firefox :D But stats tell us a large proportion of Internet users use Chrome.

Any idea what I am missing so Chrome displays the flag symbol ? I initially had this in the index.html head :

<meta charset=utf-8">

Another SO comment mentionned it had to be replaced with the following, but that doesn't fix the issue.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

EDIT : this link indicates there is no fix. The way would be to use images (.png/.webp/.svg) instead. This is a bit dumb. I feel like the unicode solution would be the lightest.

John Doe
  • 1,092
  • 3
  • 12
  • 25
  • Note: your question lacks of fundamental details: where you put the symbol `"\ud83c\uddfa\ud83c\uddf8"`? It is important to know the context (and your linked solution use entities, so it is also not applicable here. (and yeah: `select/option` tags are badly defined in HTML. it is a well known problem). – Giacomo Catenazzi Dec 08 '21 at 08:32
  • as follows :

    {"\ud83c\uddfa\ud83c\uddf8"}

    . Or the following HTML equivalent :

    🇺🇸

    . In both cases, Firefox displays the flag, while Chrome displays letters U and S     – John Doe Dec 08 '21 at 11:11

1 Answers1

1

[...] "\ud83c\uddfa\ud83c\uddf8" This, in HTML, is supposed to display the flag of the USA.

No "\ud83c\uddfa\ud83c\uddf8" in HTML is supposed to read "\ud83c\uddfa\ud83c\uddf8".
HTML uses HTML entities, the ones for this glyph are &#x1F1FA;&#x1F1F8;.

&#x1F1FA; + &#x1F1F8; = &#x1F1FA;&#x1F1F8;
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Well, my code speaks for itself. The code mentioned does display the flag as expected. Again, in Firefox, not in Chrome. – John Doe Dec 08 '21 at 05:37
  • Then your code is not HTML. https://jsfiddle.net/y5b3dcvo/ run this fiddle in any browser you'll have `"\ud83c\uddfa\ud83c\uddf8"` – Kaiido Dec 08 '21 at 05:37
  • 1
    ... The string `"\ud83c\uddfa\ud83c\uddf8"` when parsed as HTML will generate a TextNode whose value will be `"\ud83c\uddfa\ud83c\uddf8"`. That's how HTML works. If you have something else, then your sequence hasn't been parsed by an HTML parser. If this happens it's because your code is not HTML. `elem.innerHTML = "\ud83c\uddfa\ud83c\uddf8";` is JavaScript, not HTML, the sequence is parsed by the JS engine. For HTML what you need is HTML entities. – Kaiido Dec 08 '21 at 05:49