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>
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:
- 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.
- 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.)
