Wie kann verhindert werden, dass Unicode-Zeichen in HTML aus JavaScript als Emoji in HTML gerendert werden?

119

Ich finde Unicode für Sonderzeichen aus der Suche von FileFormat.Info .

Einige Zeichen werden als klassische Schwarz-Weiß-Glyphen dargestellt, z. B. ⚠ (Warnzeichen \u26A0oder ⚠). Diese sind vorzuziehen, da ich CSS-Stile (z. B. Farbe) auf sie anwenden kann.

Andere rendern als neuere Cartoony-Emoji, wie z. B. ⌛ (Sanduhr \u231Boder ⌛). Diese sind nicht vorzuziehen, da ich sie nicht vollständig stylen kann.

Es scheint, dass der Browser diese Änderung vornimmt, da ich die Sanduhr-Glyphe auf Mac Firefox sehen kann, nur nicht auf Mac Chrome oder Mac Safari.

Gibt es eine Möglichkeit, Browser zu zwingen, die älteren (flach monotonen) Versionen anzuzeigen?

Update : Es scheint (von Kommentaren unten) gibt es einen Text Presentation - Selektor , FE0Eerhältlich Text-vs-Emojis zu erzwingen. Der Selektor wird als Suffix ohne Leerzeichen im Code des Zeichens verkettet, z. B. ⌛︎für HTML-Hex oder \u231B\uFE0Efür JS. Allerdings ist es einfach nicht von allen Browsern geehrt (zB Chrom und Kante).

javascript html css unicode emoji Arithmomanisch
quelle

Legen Sie in Ihren CSS-Regeln eine Schriftfamilie fest?

G-Cyrillus

2

Mögliches Duplikat inkonsistenter Unicode-Emoji-Glyphen /

-Symbole

1

@janaspage ︎und \uFE0Esind korrekt (2 und 8) und funktionieren gut in Safari (8 und 9), aber wie die Antwort sagt: Die Browserunterstützung ist fleckig und Chrome (46) ist vollständig defekt.

一二三

2

Es gibt einfach keine Standardmethode, um das Rendern von Emojis zu steuern.

Nwellnhof

1

Alles, was Sie tun müssen, ist eine Schriftart zu erzwingen, die Glyphen für diese Zeichen enthält und deren Glyphen so aussehen, wie Sie es möchten (keine Farben, keine Formen oder was auch immer Sie bevorzugen).

ShreevatsaR

133

Fügen Sie das Unicode-Variationsauswahlzeichen zum Erzwingen von Text VS15 , ︎.
Dadurch wird das vorherige Zeichen als Text und nicht als Emoji-Symbol gerendert.

<p>🔒&#xFE0E;</p>

Ergebnis: 🔒︎

Weitere Informationen finden Sie unter: Unicode-Symbol als Text oder Emoji

Huang
quelle

1

Das ist super hilfreich, weshalb ich es neulich positiv bewertet habe. Ich frage mich, wie ich ein Emoji und dieses unsichtbare Zeichen in eine Facebook-Anzeige einfügen kann , die ich schreibe. PS Das war auch interessant: apple.stackexchange.com/a/240450/53510

Ryan

3

Ich habe gerade festgestellt, dass dieser ︎Trick bei bestimmten Schriftarten bei mir nicht funktioniert. Es fällt mir schwer, eine Schriftart zu finden, von der ich vernünftigerweise erwarten kann, dass sie auf allen Computern (Windows, iOS, Mac, Android usw.) installiert ist.

Ryan

12

Diese Lösung ist für Symbole, die sogar in Eingabefeldern auftreten können, nicht akzeptabel. Ich habe dieses Problem mit dem in der Logik verwendeten Symbol and, und ich kann für mein ganzes Leben nicht verstehen, warum jemand denkt, dass dies jemals ein Emoji sein sollte!

Frabjous

2

Die folgende Seite ist hilfreich, um dieses Sonderzeichen unmittelbar nach einem Emoji zu kopieren und einzufügen, damit es flach und nicht stilisiert erscheint. Zum Beispiel könnten Sie 💬︎ anstelle von 💬 und 🌟︎ anstelle von 🌟 und ⌛︎ anstelle von ⌛ und 🔒︎ anstelle von 🔒 sehen (abhängig von Ihrem Gerät). Unicode-symbol.com/u/FE0E.html

Ryan

14

Dies wird im Beispiel für mich als Emoji dargestellt, Chrome 71 auf Mac 10.11.6.

Lahwran

12

Ich hatte ein Unicode-Zeichen in der contentvon a span::beforeund ich hatte das font-familyvon der spanEinstellung "Segoe UI Symbol". Aber Chrome verwendete "Segoe UI Emoji" als Schriftart, um es zu rendern.

Wenn ich jedoch das font-family"Segoe UI Symbol" explizit für das span::beforeund nicht nur für das eingestellt habe span, hat es funktioniert.

Glia
quelle

2

Für eine Nur-CSS-Lösung, die verhindert, dass iOS Emojis anzeigt, können Sie font-family: monospacedie Standardvariante des Glyphen anstelle der Emoji-Variante verwenden.

cmbuckley
quelle

1

Android-Schriftarten sind nicht so umfangreich, wie Sie es vielleicht erwarten. Schriftdateien haben diese exotische Glyphe nicht und Android hat einen Hack für wenige Zeichen ohne Glyphe. Sie werden durch Symbole ersetzt.

Die Lösung besteht also darin, die Site in eine Webschrift (woff) zu integrieren. Erstellen Sie mit FontForge eine neue Schriftartdatei und wählen Sie beispielsweise die gewünschte Glyphe aus der kostenlosen Serifen-TTF aus. Jede Glyphe benötigt 1k. Woff-Datei generieren.

Bereiten Sie einfaches CSS vor, um die benutzerdefinierte Schriftfamilie zu importieren.

style.css:

@font-face {
  font-family: 'Exotic Icons';
  src: url('exotic-icons.woff') format('woff');
}

.exotic-symbol-font {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Exotic Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

index.html Datei:

<html>
  <head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet"></head>
    <title>Test custom glyphs</title>
  </head>
  <body>
    <table>
      <tr>
        <td class="exotic-symbol-font">
            😭 ☠ &#x2660; a  g
        </td>       
      </tr>
    </table>
  </body>
</html>

Daneel S. Yaitskov
quelle

1

Wenn Ihr Hauptanliegen darin besteht, die monochromatische Anzeige zu erzwingen, damit sich das Emoji nicht zu stark vom Text abhebt, sind CSS-Filter entweder allein oder in Kombination mit dem Unicode-Variationswähler möglicherweise das Richtige für Sie.

p.gscale { 
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
a {
  color: #999;
  -webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
   filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}

<p class="gscale">You've now got emoji display on 🔒lockdown🔒.</p>

<p>External Link: <a href="https://knowyourmeme.com/memes/party-hard">celebrate 🎉</a></p>

Erweitern Sie das Snippet

Im Gegensatz zur Variationsauswahl sollte es keine Rolle spielen, wie die Emoji gerendert werden, da CSS-Filter für alles gelten. (Ich verwende sie, um "Link-Typ" -Symbole im PNG-Format in Hyperlinks zu skalieren, die so geändert wurden, dass sie auf die Wayback-Maschine verweisen.)

Nur beachten Sie die Einschränkung . Sie können den Filter eines übergeordneten Elements in einem untergeordneten Element nicht überschreiben. Daher kann diese Technik nicht verwendet werden, um einen Absatz in Graustufen zu skalieren und die darin enthaltenen Links neu zu färben. 😢

... dennoch ist es nützlich für Situationen, in denen Sie entweder das Ganze zu einem Hyperlink machen oder ein umfangreiches Markup darin nicht zulassen. (zB Titel und Beschreibungen)

Dies funktioniert jedoch nur, wenn CSS tatsächlich angewendet wird. Daher gebe ich eine zweite Option an, die in <title>Elementen zuverlässiger ist als der Unicode-Variationsselektor (ich sehe dich an, GitHub. Ich mag keine gefälschten Symbole in meinem Browser-Registerkarten):

Wenn Sie eine vom Benutzer bereitgestellte Zeichenfolge in ein <title>Element einfügen, filtern Sie das Emoji zusammen mit Fett / Kursiv / Unterstrichen / etc. Heraus. Markup. (Ja, für diejenigen, die es verpasst haben, fordert der Standard, dass der Inhalt von <title>Klartext abgesehen von den kaufmännischen Und-Zeichen und den Browsern, die ich getestet habe, alle Interpretations-Tags als wörtlichen Text enthält.)

Ich kann mir zwei Möglichkeiten vorstellen:

Verwenden Sie direkt einen manuell verwalteten regulären Ausdruck, der den Blöcken entspricht, in denen die neueste Version von Unicode das Emoji und ihre Modifikatoren platziert.
Durchlaufen Sie die Graphemcluster und verwerfen Sie alle, die erkannte Emoji-Codepunkte enthalten. (Ein Graphemcluster ist eine Basis-Glyphe sowie alle diakritischen Zeichen und andere Modifikatoren, aus denen das sichtbare Zeichen besteht. Das Beispiel, auf das ich verweise, verwendet die Regex-Engine von Python zum Tokenisieren und dann das emojiPaket für die Datenbank, aber Rust ist ein gutes Beispiel für eine Sprache wo das Iterieren von Graphemclustern schnell und einfach über eine Kiste wie unicode-segmentation.)

ssokolow
quelle

0

Google Chrome, Desktop-Version 75, scheint seinen Ansatz zum Rendern von Unicode-Zeichen basierend auf dem ersten Unicode-Escape, auf das es beim Laden einer Seite stößt, eindeutig zu definieren. Wenn beispielsweise als erstes HTML-Unicode-Escape in einer Seitenquelle analysiert wird und kein Emoji-Äquivalent vorhanden ist, & # 9207; scheint Chrome zu verdeutlichen, dass die Seite Escapezeichen enthält, die nicht als Emoji gerendert werden sollen.

Clay Allen
quelle

0

Wenn Sie die Antwort von ssokolow erweitern , ist die Verwendung eines Filters hilfreich und macht zumindest die Konturen sichtbar, anstatt eine einfache Schriftart zu verwenden. Die Konvertierung einer RGB-Farbe in eine Folge von CSS-Filtern ist jedoch sehr schwierig, wenn Sie eine bestimmte Farbe verwenden möchten.

Eine bessere (wenn auch ziemlich wortreiche) Option ist die Verwendung des <feColorMatrix>SVG-Filters. In Kombination mit dem Graustufenfilter und dem Daten-URI-Schema können Sie die Farbe über RGB und Inline-CSS darstellen:

.violet {
  color: white;
  filter: grayscale(100%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='0.78 0 0 0 0  0 0.082 0 0 0  0 0 0.522 0 0  0 0 0 1 0'/></filter></svg>#f");
}

Leider können Sie die URL nicht mit Daten (aus Attributen oder Variablen) interpolieren, aber zumindest müssen Sie keine CSS-Filter aus RGB berechnen.

IllidanS4 will Monica zurück
quelle

-2

Ich kenne keine Möglichkeit, das Rendern vom Typ Emoji auszuschalten. Normalerweise verwende ich eine Symbolschrift wie Font Awesome oder Glyphicons (wird mit Bootstrap 3 geliefert ).

Der Vorteil dieser Verwendung gegenüber den Unicode-Zeichen besteht darin, dass

Sie können aus vielen verschiedenen Stilen auswählen, damit sie zum Design Ihrer Website passen.
Sie sind in allen Browsern konsistent (wenn Sie jemals versucht haben, ein Unicode-Sternzeichen zu erstellen, werden Sie feststellen, dass es im IE anders ist als in anderen Browsern).
Außerdem sind sie vollständig stilisierbar, wie die Unicode-Zeichen, die Sie verwenden möchten.

Der einzige Nachteil ist, dass der Browser beim Anzeigen Ihrer Seite noch etwas herunterladen muss.

dave.mcalpine
quelle

-2

Unter OSX bestand die Lösung darin, die Schriftfamilie auf zu setzen EmojiSymbols

Nathan
quelle

-3

Keine der oben genannten Lösungen funktionierte für die Erweiterung "Emoji für Google Chrome".

So wie das Problem zu umgehen ich einen Screenshot des Unicode - Zeichens 'BALLOT BOX WITH CHECK' (U + 2611) hergestellt und hinzugefügt , um es als Bild mit php:

 $ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611

Siehe: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

rubo77
quelle

Mit ziemlicher Sicherheit ist es besser, es mit dem Textwerkzeug (mit einer Schriftart, für die eine geeignete Lizenz ausgewählt wurde) in Inkscape einzufügen und dann eine automatische Ablaufverfolgung auszuführen, damit Sie eine SVG-Datei daraus erstellen können, die auf die gewünschte Größe skaliert werden kann. (Um es so klein wie möglich zu machen, koppeln Sie einen SVG-Minifier mit einer manuellen Bearbeitung, um die Anzahl der Knoten in Pfaden zu verringern, in denen die automatische Ablaufverfolgung fehlerhaft war.)

ssokolow

Wie kann verhindert werden, dass Unicode-Zeichen in HTML aus JavaScript als Emoji in HTML gerendert werden?

Antworten: