web-dev-qa-db-fra.com

Comment empêcher les caractères Unicode d'être rendus en emoji en HTML à partir de JavaScript?

Je recherche Unicode pour les caractères spéciaux de recherche de FileFormat.Info .

Certains caractères sont rendus sous forme de glyphes classiques en noir et blanc, tels que (panneau d’avertissement, \u26A0 ou ⚠). Celles-ci sont préférables, car je peux leur appliquer des styles CSS (tels que la couleur).

image of warning glyph

D'autres affichent un emoji plus récent, tel que hour (sablier, \u231B ou ⌛). Ce ne sont pas préférables, car je ne peux pas les dénommer complètement.

image of hourglass emoji

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

Existe-t-il un moyen de forcer les navigateurs à afficher les versions plus anciennes (monotones plates)?

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

javascripthtmlcssunicodeemoji
96
anon

Ajoutez le caractère sélecteur de variation Unicode pour forcer le texte, VS15, ︎ .
Ceci 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 emoji

109
Huang

J'avais un caractère Unicode tel que span::before contenu. Chrome a utilisé "Segoe UI Emoji" comme police de rendu. Même lorsque j'ai réglé la famille de polices sur "Segoe UI Symbol", cela ne fonctionnait pas.

Mais, lorsque je règle la famille de polices sur "Segoe UI Symbol" explicitement pour le span::before, plutôt que juste pour le span, alors cela a fonctionné.

9
Glia

Les polices Android ne sont pas riches, contrairement à ce que vous pouvez vous attendre. Les fichiers de polices ne contiennent pas ces glyphes exotiques et Android contient un hack pour quelques caractères sans glyph. Ils sont remplacés par des icônes.

La solution consiste donc à intégrer le site avec une police Web (woff). Créez un nouveau fichier de police avec FontForge et sélectionnez le glyphe requis dans TTF libre par exemple. Chaque glyphe prend 1k. Générer le fichier woff.

Préparez un 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>
1
Daneel S. Yaitskov

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

J'ai donc fait une capture d'écran du caractère Unicode 'BALLOT BOX WITH CHECK' (U + 2611) et l'a ajoutée sous forme d'image avec php:

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

enter image description here

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

0
rubo77

Google Chrome, version de bureau 75, semble désambiguiser son approche en matière de rendu des caractères Unicode en fonction du premier échappement Unicode rencontré lors du chargement d'une page. Par exemple, lorsqu’il est analysé comme le premier échappement Unicode HTML dans une source de page et qu’il n’a pas d’équivalent emoji, # 9207; semble clarifier à Chrome) que la page contient des échappements ne devant pas être rendus sous forme d’emoji.

0
Clay Allen

Pour moi sur OSX, la solution consistait à définir font-family sur EmojiSymbols

0
Nathan