Flag Emojis werden nicht gerendert

Question 1

Ich habe ein Dropdown-Menü in meiner Kopfzeile, das ich verwende, um Telefonnummern für verschiedene Länder anzuzeigen, und ich muss eine Flagge auf die Seite legen, aber es werden keine Flaggen angezeigt, nur die Buchstabendarstellung der Flaggen (zum Beispiel sieht die argentinische Flagge so aus this 🇦🇷 aber es zeigt das Emoji für den Brief A und der Brief R) als das, wie Flaggen-Emojis funktionieren, soweit ich weiß, wie kann ich dies umgehen (einen Hamburger in der zweiten Telefonnummer anzeigen, nur um zu zeigen, dass Emojis tatsächlich auf meiner Website funktionieren).

<select name="Telefonos" id="group">
    <option value="+543515296002">&#x1F1E6;&#x1F1F7; +54351529600
    <option value="+12398105440">🍔 +12398105440
    <option value="+12398105440">🇺🇸 +12398105440
</select>

Das habe ich versucht, entweder mit dem Code oder dem Kopieren des Emojis funktioniert nicht, obwohl es angezeigt wird, wenn ich es codiere.

und das ist es, was tatsächlich gerendert wird

Question 2

Je nach Plattform werden die Flaggen-Emojis möglicherweise nicht angezeigt, unabhängig davon, was Sie tun (und nicht nur der Browser und/oder die Browserschriftart). Um es herauszufinden, gehen Sie zu https://emojipedia.org/search/?q=emoji+flags und sehen Sie sich die Darstellung der Emoji-Flagge für Dschibuti an, links neben dem Text “Flagge: Dschibuti“.

Wenn Sie ein Bild einer Flagge sehen, ist alles in Ordnung, aber wenn Sie nur sehen DJ dann werden die Emoji-Flags möglicherweise nicht unterstützt. Ich habe diese Seite auf einem iPad, Linux Mint 18.2 und Windows 10 besucht und Folgendes gefunden:

Das Emoji der Dschibuti-Flagge wird auf dem iPad gerendert.

Die Dschibuti-Flagge wurde als gerendert DJ auf Linux Mint 18.2 mit Firefox.
Die Dschibuti-Flagge wurde als gerendert DJ unter Windows 10 mit Firefox, obwohl dies seitdem erwartet wurde “Microsoft unterstützt keine Länderflaggen unter Windowsstattdessen werden die aus zwei Buchstaben bestehenden Ländercodes angezeigt.”.

Wenn Sie also nur Emoji-Flags im Browser auf Apple-Plattformen rendern möchten, sollte das in Ordnung sein, und wenn Sie Emoji-Flags im Browser unter Windows rendern möchten, wird stattdessen der zweistellige Ländercode gerendert. Ich bin mir über die Situation unter Linux nicht sicher, da ich, obwohl es in meiner Umgebung für mich nicht funktioniert hat, nichts finden konnte, was ausdrücklich besagt, dass es funktionieren sollte oder nicht.

Eine Alternative zur Verwendung von Unicode-Emoji-Flags, wenn dies auf allen Plattformen funktionieren soll, ist das Herunterladen kostenloser Emojis, die eigentlich nur klein sind png Bilder. Hier sind einige Muster für die argentinische Flagge.

Aktualisieren:

In Ermangelung einer echten Lösung, wie oben erläutert, ist hier ein alternativer Ansatz, der keine Unicode-Emojis verwendet, sondern stattdessen heruntergeladene .png Bilder:

<!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="https://stackoverflow.com/questions/54519758/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-">&#x2690; 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="" /> 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="" /> 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="" /> Chile</label>
                </div>
            </div>
        </div>
    </body>
</html>

Der Inhalt der .css Datei (flagdemo.css) ist identisch mit der von Alvaro Montoro in dieser SO-Antwort auf die Frage How to add images in select list?.

Da dieser Ansatz nur Standard-HTML und CCS (kein Javascript oder JQuery) verwendet, sollte er auf jeder Plattform funktionieren:

Question 3

Microsofts Emoji-Schriftart Segoe UI Emoji unterstützt bewusst keine Flags. Sie müssen Ihre eigenen Schriftdateien bereitstellen, wenn Ihnen die Farbdarstellung für Windows-Benutzer wichtig ist. Leider gibt es kein Farbschriftformat, das von allen gängigen Browsern unterstützt wird. Firefox wird mit Twemoji (dem Emoji-Set von Twitter) ausgeliefert, aber die Verwendung derselben Schriftart in Chrome führt beispielsweise stattdessen zu schwarz-weißen Umrisszeichnungen.

Sie sind ehrlich gesagt besser dran, wenn Sie nur eingebettete Bilder verwenden, wenn dies für Ihr Projekt machbar ist. Alternativ müssen Sie Kompromisse eingehen und akzeptieren, dass die meisten Windows-Benutzer einfach keine Flags angezeigt sehen.

Question 4

Wie von mehreren anderen erwähnt, unterstützen einige Plattformen wie Windows keine Länderflaggen (siehe https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05?page=1 für eine längere Diskussion darüber, warum dies der Fall sein könnte).

Am Ende habe ich ein Skript verwendet, um meine Emojis durch PNGs zu ersetzen. Ich dachte, das könnte für andere hilfreich sein, also los geht’s

HTML-Version:

<html>
<body>
    <h1> 🇺🇸  🇺🇸  🇺🇸 </h1>
    <p>Lets test more emoji replacement 😀 🇬🇧 🇺🇸 .</p>
</body>
<script>
const flagemojiToPNG = (flag) => {
    var countryCode = Array.from(flag, (codeUnit) => codeUnit.codePointAt()).map(char => String.fromCharCode(char-127397).toLowerCase()).join('')
    return "<img src="https://flagcdn.com/24x18/" + countryCode + ".png">"
}
    var reg = new RegExp('(?:\ud83c[\udde6-\uddff]){2}', 'g');
    document.body.innerHTML = document.body.innerHTML.replaceAll(reg, flagemojiToPNG);
</script>
    </html>

Reaktionsversion (zum Ersetzen einzelner Flags):

const flagemojiToPNG = (flag) => {
    var countryCode = Array.from(flag, (codeUnit) => codeUnit.codePointAt()).map(char => String.fromCharCode(char-127397).toLowerCase()).join('')
    return (<img src={`https://flagcdn.com/24x18/${countryCode}.png`} alt="flag" />)
}

Question 5

es kommt darauf an BEIDE Plattform und Browser

Die beste Lösung für die Gegenwart ist also zu Bilder verwenden

Laden Sie hier kostenlose Flaggen herunter: https://flagpedia.net/download

Ich werde die Verwendung von webp empfehlen

Question 6

Kann React-Select verwenden, um ein Dropdown-Menü mit den folgenden Eigenschaften zu erstellen.

Es muss ein Array von Objekten mit einem aus zwei Buchstaben bestehenden Ländercode, einer Bezeichnung und einem Wert für die Dropdown-Liste erstellt werden.

{
      label: `india`,
      value: `+91`,
      emojiFlag: 'IN'
}

Code zum Konvertieren des aus zwei Buchstaben bestehenden Ländercodes in das Flaggen-PNG von Flagcdn.

flagemojiToPNG = (flag: string) => {
    var countryCode = Array.from(flag, (codeUnit: any) => codeUnit.codePointAt()).map(char => String.fromCharCode(char-127397).toLowerCase()).join('')
    return (<img src={`https://flagcdn.com/24x18/${countryCode}.png`} alt="flag" />)
  }

Import Select from 'react-select';
<Select
          options={dataSource}
          formatOptionLabel={data => (
            <>{flagemojiToPNG(data.emojiFlag)}  {data.label}</>
          )}
          placeholder={"Select Country"}
          onChange={}
          value={}
        />

Kann Bilder auf React select mit formatOptionLabel Prop von React-select rendern. Datenquelle – Wird die Datenquelle Ihres Dropdown-Menüs sein.

Question 7

Soweit ich weiß, gibt es keine Möglichkeit, solche Flaggen-Emojis anzuzeigen. Sie könnten versuchen, die Flagge mit einem Bild zu implementieren oder zu verwenden Fontawesome.com (es ist kostenlos).