Color For Unicode Emoji
Answer :
Yes, you can color them!
div { color: transparent; text-shadow: 0 0 0 red; }<div></div>Not every emoji works the same. Some are old textual symbols that now have an (optional or default) colorful representation, others were explicitly (only) as emojis. That means, some Unicode codepoints should have two possible representations, text and emoji. Authors and users should be able to express their preference for one or the other. This is currently done with otherwise invisible variation selectors U+FE0E (text, VS-15) and U+FE0F (emoji, VS-16), but higher-level solutions (e.g. for CSS) have been proposed.
The text-style emojis are monochromatic and should be displayed in the foreground color, i.e. currentcolor in CSS, just like any other glyph. The Unicode Consortium provides an overview of emojis by style (beta version). You should be able to append ︎ in HTML to select the textual variant with anything in the columns labeled “Default Text Style; has VSs” and “Default Emoji Style; has VSs”. This doesn’t include the example emojis and many others, though.
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>I’ve added U+1F480 Skull and U+1F44C OK Hand Sign because the background should show through their “eyes” and I’ve used numeric character references just to make the code more obvious and more robust against copy-and-paste errors.
It has been proposed, however, that both variation selectors can be applied to any character, which would have no effect in most cases. Note that some vendors, especially Samsung, are already shipping (default) emoji glyphs for several other characters (goo.gl/a4yK6p or goo.gl/DqtHcc).
I wanted to do this myself so I've recently come up with a solution using newer CSS effects that works on Firefox and Edge as well.
Using filter, you first normalize the color by using sepia(1), you then saturate the heck out of it to get a pure red. If you want to get rid of black lines, suck the contrast out of the emoji before applying other filters using contrast(0). After that you just spin the colour wheel from red to whatever color you'd like using hue-rotate(). Note that because I used decimal values instead of %'s, a value of 100 means 10000%.
Hue offsets are defined as beginning at red. We are lucky that sepia is mostly red so the wheel starts off perfectly at 0-degrees. You can calculate what offset you want using a RGB to HSL converter. I found a nice one written in Javascript here: https://web.archive.org/web/20180808220922/http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
You must multiply the hue value by 360 to get the desired result from that function. An example would be rgbToHsl(0,100,100)[0]*360. Which would return 180. Since there is no red, this would be the expected result, you would be spinning 180 degrees away from red.
As Litherium an Crissov pointed out, there are text emojis as well. These work better with transformations and often look better. You can't apply the method I have described above however, until you first apply invert(.5) on the text emojis, this is because the functions need some sort of shade to operate on. So simply adding invert(.5) to the beginning of each formula, allows for them to operate on both code points on all browsers.
.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">a:</div> <div class="b">b:</div> <div class="c">c:</div> <div class="d">d:</div> <div class="e">e:</div> </div> <span>Change the code point to text mode:</span> <div class="mono"> <div class="a">a:</div> <div class="ma">ma:</div> </div>Update: There are newer packages available on npm now that can calculate hues etc. You don't need to use that snippet on the website I had previously linked. Here's an example: https://stackoverflow.com/a/56082323/5078765
Comments
Post a Comment