Thanks to some absolute positioning, hue-rotation, and even some clipping you can create nice split emoji: I especially like the experiments near the lower part of the demo, where one emoji is used as a modifier for the other (e.g. the 🎩 is placed on top of 😁, yielding a new emoji). They remind me …
Tag Archives: emoji
Text-wrapping, hyphenation, emojis and what not
Earlier today I ran some tests to see how text-wrapping/hyphenation of long uninterrupted strings works in browsers. I tested both “normal” strings and strings of emojis. The tests (and its rendering results per browser) are stored on Codepen and embedded below: 💩 and ⚠️ behave differently (click to enlarge): These tests left me with some …
Continue reading “Text-wrapping, hyphenation, emojis and what not”
Emoji Silhouettes and Emoji Outlines with CSS
From StackOverflow: It’s possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color? Using an (inset) text-shadow in combination with transparent text color this indeed is possible: With some more CSS – and an extra attribute – it’s possible to even achieve a (faux) …
Continue reading “Emoji Silhouettes and Emoji Outlines with CSS”
Fun with JavaScript and Emoji
Today Wes Bos tweeted a few fun things one can do with JavaScript and Emoji: It’s possible to spread emoji sequences into their single parts: […’👨👩👧👦’] // [“👨”, “”, “👩”, “”, “👧”, “”, “👦”] Combining Emoji is also possible: [“👨”, “”, “👩”, “”, “👧”].reduce((prev, curr) => prev + curr) // “👨👩👧” And oh, you can …
Find relevant emoji from text on the command-line with emoj
The Colbert Emoji
Emoji in Chrome on Mac / OS X
Over the weekend an important set of commits (this one amongst others) landed in Chromium, enabling Emoji in Chrome on OS X, and – after 4 years – marking the bug “Emoji does not display in webpage contents on OS X Lion+” as fixed. When using Canary, things like The Pile Of Poo Test will …
Twemoji
twemoji.parse(‘I \u2764\uFE0F emoji!’); // will produce /* I <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/36×36/2764.png"> emoji! */ Nugget of JavaScript to replace astral symbols (emoji) with images in browsers that don’t support them. Yes, looking at you Chrome on OS X. Images are included in the repo, or can be loaded from a CDN. Twitter Emoji for …