Comment empêcher les caractères Unicode de s'afficher sous forme d'emoji dans HTML à partir de JavaScript?

119

Je trouve Unicode pour les caractères spéciaux à partir de la recherche de FileFormat.Info .

Certains caractères sont rendus comme les glyphes classiques en noir et blanc, tels que ⚠ (signe d'avertissement, \u26A0ou ⚠). Ceux-ci sont préférables, car je peux leur appliquer des styles CSS (tels que la couleur).

image du glyphe d'avertissement

D'autres sont rendus sous forme d'emoji de dessin animé plus récents, tels que ⌛ (sablier \u231Bou ⌛). Celles-ci ne sont pas préférables, car je ne peux pas les styliser complètement.

image de sablier emoji

Il semble que le navigateur effectue ce changement, car je suis capable de voir le glyphe de sablier sur Mac Firefox, mais pas sur Mac Chrome ni sur Mac Safari.

Existe-t-il un moyen de forcer les navigateurs à afficher les anciennes versions (monotone plat) à afficher?

Mise à jour : Il semble (des commentaires ci - dessous) il y a un sélecteur de présentation du texte , FE0Edisponible pour appliquer le texte-vs-emoji. Le sélecteur est concaténé en tant que suffixe sans espace sur le code du caractère, comme ⌛︎pour HTML hex ou \u231B\uFE0Epour JS. Cependant, il n'est tout simplement pas respecté par tous les navigateurs (par exemple Chrome et Edge).

javascript html css unicode emoji Arithmomane
la source
définissez-vous une famille de polices dans vos règles CSS?
G-Cyrillus
2
Copie
1
@janaspage ︎et \uFE0Esont corrects (2 et 8) et fonctionnent correctement dans Safari (8 et 9), mais comme le dit la réponse: la prise en charge du navigateur est inégale et Chrome (46) est complètement cassé.
一 二三
2
Il n'y a tout simplement aucun moyen standard de contrôler le rendu des Emojis.
nwellnhof
1
Tout ce que vous avez à faire est d'appliquer une police qui contient des glyphes pour ces caractères, et dont les glyphes ressemblent à ce que vous voulez (pas de couleurs, pas de formes ou ce que vous préférez).
ShreevatsaR

Réponses:

133

Append le sélecteur variation Unicode caractère pour forcer le texte, VS15, ︎.
Cela force le caractère précédent à être rendu sous forme de texte plutôt que sous forme de symbole Emoji.

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

Résultat: 🔒︎

En savoir plus sur: Symbole Unicode sous forme de texte ou d'emoji

Huang
la source
1
C'est très utile, c'est pourquoi je l'ai voté pour l'autre jour. Je me demande comment je peux coller un emoji et ce personnage invisible dans une publicité Facebook que j'écris? PS C'était également intéressant: apple.stackexchange.com/a/240450/53510
Ryan
3
Je viens de réaliser que cette &#xFE0E;astuce ne fonctionne pas pour moi pour certaines polices. J'ai du mal à trouver une police dont je peux raisonnablement m'attendre à être installée sur toutes les machines (Windows, iOS, Mac, Android, etc.).
Ryan
12
Cette solution n'est vraiment pas acceptable pour les symboles qui peuvent même apparaître dans les champs de saisie. J'ai ce problème avec le symbole ↔ utilisé dans la logique, et je ne peux pas pour la vie de moi comprendre pourquoi quelqu'un pense que cela devrait jamais être un emoji!
frabjous
2
La page suivante est utile pour copier-coller ce caractère spécial immédiatement après un emoji pour le faire apparaître plat plutôt que stylisé. Par exemple, vous pourriez voir 💬︎ au lieu de 💬 et 🌟︎ au lieu de 🌟 et ⌛︎ au lieu de ⌛ et 🔒︎ au lieu de 🔒 (selon votre appareil) unicode-symbol.com/u/FE0E.html
Ryan
15
Cela se traduit par un emoji dans l'exemple pour moi, chrome 71 sur mac 10.11.6.
lahwran
13

J'avais un caractère Unicode dans le contentde a span::before, et j'avais le font-familyde l' spanensemble sur "Segoe UI Symbol". Mais Chrome a utilisé "Segoe UI Emoji" comme police pour le rendre.

Cependant, lorsque j'ai défini le font-familysur "Segoe UI Symbol" explicitement pour le span::before, plutôt que juste pour le span, cela a fonctionné.

Glia
la source
Cela devrait être la bonne réponse, d'autant plus que l'ancienne méthode des caractères invisibles n'est pas respectée par la plupart des principaux navigateurs.
Sarah C. Corriher
2

Pour une solution CSS uniquement pour empêcher iOS d'afficher des emojis, vous pouvez utiliser par font-family: monospacedéfaut la variante de texte du glyphe plutôt que la variante d'emoji.

cmbuckley
la source
1

Les polices Android ne sont pas riches comme vous pouvez vous y attendre. Les fichiers de polices n'ont pas ces glyphes exotiques et Android a un hack pour quelques caractères sans glyphe. Ils sont remplacés par des icônes.

La solution est donc d'intégrer le site avec une police web (woff). Créez un nouveau fichier de police avec FontForge et choisissez le glyphe requis dans le TTF serif gratuit par exemple. Chaque glyphe prend 1k. Générez un fichier woff.

Préparez du CSS simple pour importer la famille de polices personnalisée.

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;
}

fichier index.html:

<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
la source
1

Si votre principale préoccupation est de forcer l'affichage monochromatique afin que les emoji ne se détachent pas trop du texte, les filtres CSS, seuls ou en combinaison avec le sélecteur de variation Unicode, peuvent être quelque chose que vous voulez.

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>
Développer l'extrait

Contrairement au sélecteur de variantes, la façon dont les emoji sont rendus ne devrait pas avoir d'importance, car les filtres CSS s'appliquent à tout. (Je les utilise pour les icônes de "type de lien" au format PNG en niveaux de gris sur des liens hypertexte qui ont été modifiés pour pointer vers la Wayback Machine.)

Faites attention à la mise en garde . Vous ne pouvez pas remplacer le filtre d'un élément parent dans un enfant, donc cette technique ne peut pas être utilisée pour mettre à l'échelle un paragraphe en niveaux de gris, puis re-coloriser les liens qu'il contient. 😢

... encore, c'est utile dans les situations où vous allez soit faire de tout un lien hypertexte, soit interdire le balisage riche en son sein. (par exemple, titres et descriptions)

Cependant, cela ne fonctionnera pas à moins que CSS ne soit réellement appliqué, donc je vais donner une deuxième option qui est plus fiable dans les <title>éléments que le sélecteur de variation Unicode (je vous regarde GitHub. Je n'aime pas les fausses icônes dans mon onglets du navigateur):

Si vous insérez une chaîne fournie par l'utilisateur dans un <title>élément, filtrez les emoji avec tout gras / italique / souligné / etc. balisage. (Oui, pour ceux qui l'ont manqué, la norme exige que le contenu de <title>soit du texte brut à part les esperluettes et les échappements et les navigateurs que j'ai testés interprètent toutes les balises comme du texte littéral.)

Les deux façons dont je peux penser sont:

  1. Utilisez directement une expression régulière gérée manuellement qui correspond aux blocs où la dernière version d'Unicode place ses emoji et leurs modificateurs.
  2. Parcourez les groupes de graphèmes et supprimez ceux qui contiennent des points de code emoji reconnus. (Un cluster de graphèmes est un glyphe de base plus tous les signes diacritiques et autres modificateurs qui composent le caractère visible. L'exemple auquel je lie utilise le moteur regex de Python pour tokenize, puis le emojipackage pour la base de données, mais Rust est un bon exemple de langage où l'itération des grappes de graphèmes est rapide et facile via une caisse comme unicode-segmentation.)
ssokolow
la source
0

Google Chrome, version de bureau 75, semble lever l'ambiguïté de son approche du rendu des caractères Unicode en fonction du premier échappement Unicode qu'il rencontre lors du chargement d'une page. Par exemple, lorsqu'il est analysé comme le premier échappement HTML Unicode dans une source de page, et n'ayant pas d'équivalent emoji, & # 9207; semble clarifier à Chrome que la page contient des échappements qui ne doivent pas être rendus sous forme d'emoji.

Clay Allen
la source
0

En développant la réponse de ssokolow , utiliser un filtre est agréable et rend au moins les contours visibles au lieu d'utiliser une simple police, mais la conversion d'une couleur RVB en une séquence de filtres CSS est très difficile lorsque vous souhaitez utiliser une couleur spécifique.

Une meilleure option (quoique assez verbeuse) consiste à utiliser le <feColorMatrix>filtre SVG. Combiné avec le filtre en niveaux de gris et le schéma d'URI de données, vous pouvez représenter la couleur via RVB et CSS en ligne:

.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");
}

Malheureusement, vous ne pouvez pas interpoler l'URL avec des données (issues d'attributs ou de variables), mais au moins vous n'avez pas à calculer les filtres CSS à partir de RVB.

IllidanS4 veut que Monica revienne
la source
-2

Je ne connais pas de moyen de désactiver le rendu de type emoji. J'utilise généralement une police d'icônes telle que font awesome ou glyphicons (livré avec Bootstrap 3).

L'avantage de les utiliser par rapport aux caractères Unicode est que

  1. vous pouvez choisir parmi de nombreux styles différents afin qu'il s'adapte à la conception de votre site;
  2. ils sont cohérents entre les navigateurs (si vous avez déjà essayé de faire un caractère d'étoile unicode, vous remarquerez que c'est différent dans IE par rapport à un autre navigateur);
  3. De plus, ils sont entièrement stylables, comme les caractères Unicode que vous essayez d'utiliser.

Le seul inconvénient est que c'est une autre chose que le navigateur doit télécharger lorsqu'il consulte votre page.

dave.mcalpine
la source
-2

Pour moi, sur OSX, la solution était de définir la famille de polices sur EmojiSymbols

Nathan
la source
-3

Aucune des solutions ci-dessus ne fonctionnait pour l'extension "Emoji pour Google Chrome".

Donc, comme solution de contournement, j'ai fait une capture d'écran du caractère Unicode 'BALLOT BOX WITH CHECK' (U + 2611) et l'ai ajouté comme image avec php:

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

entrez la description de l'image ici

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

rubo77
la source
Il est certainement préférable de le coller dans Inkscape à l'aide de l'outil de texte (avec une police avec une licence appropriée sélectionnée), puis d'exécuter un suivi automatique, afin que vous puissiez en extraire un SVG qui s'adaptera à la taille dont vous avez besoin. (Pour le rendre aussi petit que possible, associez un minificateur SVG à une édition manuelle pour réduire le nombre de nœuds dans les chemins où la trace automatique a gaffé.)
ssokolow