Couleur pour Emoji Unicode
Il est possible d'inclure des caractères Emoji dans les navigateurs modernes, mais comment peut-on en faire une seule couleur et choisir cette couleur?
Par exemple, voici quelques Emoji et quelques symboles Unicode réguliers (plan 0). Tous doivent être rouges, mais seuls les symboles sont affichés en rouge.
Associé HTML + CSS :
<p>
????????????
</p>
<p>
♥★ℹ
</div>
p {
font-size: 3em;
color: red
}
Oui, vous pouvez les colorer!
div {
color: transparent;
text-shadow: 0 0 0 red;
}<div>????????????</div>Tous les emoji ne fonctionnent pas de la même manière. Certains sont d'anciens symboles textuels qui ont maintenant une représentation colorée (facultative ou par défaut), d'autres étaient explicitement (uniquement) des emojis. Cela signifie que certains points de code Unicode devraient avoir deux représentations possibles, text et emoji. Les auteurs et les utilisateurs devraient pouvoir exprimer leur préférence pour l'un ou l'autre. Cela se fait actuellement avec des invisibles sélecteurs de variation U + FE0E (text, VS-15) et U + FE0F (emoji, VS-16), mais - solutions de niveau supérieur (par exemple pour CSS) ont été proposées.
Les emojis de style texte sont monochromatiques et doivent être affichés dans la couleur de premier plan, c'est-à-dire currentcolor en CSS, comme tout autre glyphe. Le Consortium Unicode fournit un aperçu des emojis par style ( version beta ). Vous devriez pouvoir ajouter ︎ en HTML pour sélectionner la variante textuelle avec n'importe quoi dans les colonnes intitulées "Style de texte par défaut; a des VS "et" Style Emoji par défaut; a des VS ". Cela n'inclut pas les exemples d'emojis ???????????? et bien d'autres, cependant.
p {
color: red; font-size: 3em; margin: 0;
text-transform: text; /* proposed */
font-variant-emoji: text; /* proposed */
font-variant-color: monochrome; /* proposed */
font-color: monochrome; /* proposed */
font-palette: dark; /* drafted for CSS Fonts Level 4 */
}
p.hack {
color: rgba(100%, 0%, 0%, 0);
text-shadow: 0 0 0 red;
}
p.font {
font-family: Emojione, Noto, Twemoji, Symbola;
}
@font-face { /* http://emojione.com/developers/ */
font-family: Emojione;
src: local("EmojiOne BW"), local("EmojiOne"), local("Emoji One"),
/* https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-bw.otf – monochrome only, deprecated, removed
https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-Android.ttf – with hack
https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-Apple.ttf – with hack */
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff2") format("woff2"),
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff") format("woff"),
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.otf") format("truetype");
}
@font-face { /* https://www.google.com/get/noto/#noto-emoji-zsye */
font-family: Noto;
src: local("Noto Emoji"), local("Noto Color Emoji"), local("Noto"),
url("https://cdn.rawgit.com/googlei18n/noto-emoji/master/fonts/NotoEmoji-Regular.ttf");
}
@font-face { /* https://github.com/eosrei/twemoji-color-font/releases */
font-family: Twemoji;
src: local("Twemoji");
}
@font-face { /* http://users.teilar.gr/~g1951d/ */
font-family: Symbola;
src: local("Symbola");
}<p title="????????????♥★ℹ???????? without variation selectors">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>
<p title="????????????♥★ℹ???????? with text variation selector 15">🐘︎ 🐧︎ 🐼︎ ♥︎ ★︎ ℹ︎ 💀︎ 👌︎</p>
<p title="????????????♥★ℹ???????? with emoji variation selector 16">🐘️ 🐧️ 🐼️ ♥️ ★️ ℹ️ 💀️ 👌️</p>
<p title="????????????♥★ℹ???????? with `text-shadow` hack" class="hack">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>
<p title="????????????♥★ℹ???????? with custom font" class="font">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>J'ai ajouté ???? U + 1F480 Skull et ???? U + 1F44C OK signe de la main parce que l'arrière-plan doit apparaître à travers leurs "yeux" et j'ai utilisé des références de caractères numériques juste pour rendre le code plus évident et plus robuste contre les erreurs de copier-coller.
Il a été proposé, cependant, que les deux sélecteurs de variation puissent être appliqués à n'importe quel caractère, ce qui n'aurait aucun effet dans la plupart des cas. Notez que certains fournisseurs, en particulier Samsung, expédient déjà (par défaut) glyphes emoji pour plusieurs autres caractères (goo.gl/a4yK6p ou goo.gl/DqtHcc).
Vous pouvez les remplir d'une couleur unie:
p {
font-size: 20px;
color: transparent;
text-shadow: 0 0 0 blue;
}<p>????</p>
<p>????</p>
<p>????</p>Ou vous pouvez les décrire:
body {
background: #fff;
}
p {
margin: 0;
color: transparent;
text-shadow: 0 0 3px blue;
font-size: 20px;
position: relative;
}
p::before {
content: attr(title);
position: absolute;
text-shadow: 0 0 0 #fff;
}<p title="????">????</p>
<p title="????">????</p>
<p title="????">????</p>Je voulais le faire moi-même, j'ai donc récemment trouvé une solution utilisant de nouveaux effets CSS qui fonctionne également sur Firefox et Edge.
En utilisant un filtre, vous normalisez d'abord la couleur en utilisant le sépia (1), puis vous en saturez le diable pour obtenir un rouge pur. Si vous voulez vous débarrasser des lignes noires, aspirez le contraste des emoji avant d'appliquer d'autres filtres en utilisant le contraste (0). Après cela, il vous suffit de faire tourner la roue chromatique du rouge à la couleur de votre choix à l'aide de la teinte-rotation (). Notez que parce que j'ai utilisé des valeurs décimales au lieu de%, une valeur de 100 signifie 10000%.
Les décalages de teinte sont définis comme commençant au rouge. Nous avons de la chance que le sépia soit principalement rouge, donc la roue démarre parfaitement à 0 degrés. Vous pouvez calculer le décalage souhaité à l'aide d'un convertisseur RVB en HSL. J'ai trouvé un Nice écrit en Javascript ici: https://web.archive.org/web/20180808220922/http://axonflux.com/handy-rgb-to-hsl-and-rgb-to- hsv-color-model-c
Vous devez multiplier la valeur de teinte par 360 pour obtenir le résultat souhaité de cette fonction. Un exemple serait rgbToHsl(0,100,100)[0]*360. Ce qui retournerait 180. Comme il n'y a pas de rouge, ce serait le résultat attendu, vous tourneriez à 180 degrés par rapport au rouge.
Comme l'a souligné Litherium an Crissov, il existe également des emojis texte. Ceux-ci fonctionnent mieux avec les transformations et ont souvent une meilleure apparence. Cependant, vous ne pouvez pas appliquer la méthode que j'ai décrite ci-dessus jusqu'à ce que vous appliquiez d'abord invert(.5) sur les emojis de texte, c'est parce que les fonctions ont besoin d'une sorte d'ombre pour fonctionner. Donc, simplement ajouter invert(.5) au début de chaque formule, leur permet d'opérer sur les deux points de code sur tous les navigateurs.
.a { /* Normalize colour to a primary red */
filter: sepia(1) saturate(100);
}
.b { /* Less saturation so more features, shifted colour 90-degrees */
filter: sepia(1) saturate(5) hue-rotate(90deg);
}
.c { /* Remove black outlines if desired by removing contrast */
filter: contrast(0) sepia(1) saturate(100) hue-rotate(180deg);
}
.d { /* Other shades possible by lowering brightness */
filter: contrast(0) sepia(1) saturate(100) brightness(.05) hue-rotate(180deg);
}
.e { /* Weird possibilities with no colour normalization */
filter: contrast(100) hue-rotate(180deg);
}
.ma { /* Invert to provide a gray shade to apply sepia*/
filter: invert(.5) sepia(1) saturate(100);
}
div {
font-size: 25px;
}
.Emo > div::after {
content: "????⛄????????";
}
.mono > div::after {
content: "\1F30D\FE0E\26C4\FE0E\1F60D\FE0E\1F431\FE0E";
}<div class="Emo">
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
<span>Change the code point to text mode:</span>
<div class="mono">
<div class="a"></div>
<div class="ma"></div>
</div>Mise à jour: Il existe maintenant de nouveaux packages disponibles sur npm qui peuvent calculer les teintes, etc. Vous n'avez pas besoin d'utiliser cet extrait sur le site Web que j'avais précédemment lié. Voici un exemple: https://stackoverflow.com/a/56082323/5078765
Certains points de code, mais pas tous, peuvent être dessinés sous forme de texte (glyphe non basé sur une image) ou sous forme d'emoji (glyphe basé sur une image). Unicode décrit que ces deux formes peuvent être sélectionnées en utilisant l'un des deux sélecteurs de variation: U + FE0E (VARIATION SELECTOR-15) ou U + FE0F (VARIATION SELECTOR-16). Lorsqu'elle est dessinée sous forme non basée sur une image, la propriété CSS color doit s'appliquer.
Exemple:
U + 2603 (SNOWMAN) est dessiné de cette façon: ☃
La séquence de points de code U + 2603 U + FE0E est dessinée de cette façon: ☃︎
La séquence de points de code U + 2603 U + FE0F est dessinée de cette façon: ☃️
Plus d'informations, ainsi qu'une liste complète des points de code qui participent à ces séquences de variation, peuvent être trouvées sur http://unicode.org/emoji/charts/emoji-variants.html
(Notez que différents systèmes d'exploitation peuvent choisir une valeur par défaut différente lorsque le point de code nu est utilisé. Par exemple, essayez d'afficher ce message dans macOS et iOS - le point de code nu ci-dessus est différent!)
Comme Emoji est assez nouveau, le style n'est pas encore pris en charge nativement.
La solution consiste à utiliser une police Emoji telle que Twemoji de Twitter . Ensuite, il peut être stylisé de la même manière que Font Awesome ou Unicode natif.
Si vous souhaitez conserver les détails dans les emoji, vous pouvez utiliser filter: url(svg) où url() prendra un filtre svg
svg {
display: none;
}
div {
-webkit-filter: url(#red);
filter: url(#red);
}<svg>
<filter id="red">
<feColorMatrix type="matrix" values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
</svg>
<div>????????????</div>Bien que l'utilisation de feColorMatrix puisse sembler intimidante au début, il est en fait simple de définir vos propres couleurs. Prenons l'exemple suivant qui représente la couleur rouge:
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
Si vous saisissez les valeurs en gras ci-dessus, nous pouvons voir comment elles se rapportent au mode de couleur RGBA:
1 - rouge (r) 0 - vert (g) 0 - bleu (b) 1 - alpha (a)
Ici, chaque couleur se rapporte à une valeur de 0 à 255 divisée par 255. Ainsi, si vous aviez la couleur verte, qui a un RGBA de:
R G B A (0, 255, 0, 1)
Vos valeurs seraient alors:
0/255 -> 0 (r) 255/255 -> 1 (g) 0/255 -> 0 (b) 1 -> 1 (a) - ne divisez pas
Et donc, en utilisant ces valeurs dans notre matrice, nous obtenons:
0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1 0
Vous pouvez maintenant l'ajouter en tant que filtre supplémentaire (ou supprimer l'ancien) et lui donner un id afin qu'il puisse être référencé dans css filter: url(#filterID)
Voir la version implémentée ci-dessous:
svg {
display: none;
}
.red {
-webkit-filter: url(#red);
filter: url(#red);
}
.green {
-webkit-filter: url(#green);
filter: url(#green);
}<svg>
<filter id="red">
<feColorMatrix type="matrix" values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
<!-- \/ --- change id to be refrenced within css -->
<filter id="green">
<feColorMatrix type="matrix" values="
0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
</svg>
<div class="red">????????????</div>
<div class="green">????????????</div>Veuillez noter Actuellement, cette solution a un support de navigateur très limité. Pour voir la liste complète des navigateurs pris en charge par cette fonctionnalité, veuillez consulter ici .