Ever wondered why some emojis take up more character count than expected? (Especially when dealing with input character count) Turns out many emojis are actually combinations of simpler ones!
Examples of composite emojis:
- π¨βπ¨βπ¦βπ¦ = π¨+π¨+π¦+π¦ (family of four men)
- π©βπ» = π©+π» (woman technologist)
- π³οΈβπ = π³οΈ+π (rainbow flag)
- π¨βπ³ = π¨+π³ (man cook)
- π§π»βπ¨ = π§ + π» + π¨ (artist: light skin tone)
Developer gotcha: Different programming languages handle Unicode differently, so emoji length calculations can vary between frontend and backend. Always test your character limits with composite emojis.
JavaScript examples:
For javascript, Intl.Segmenter can be a great help
const family = 'π¨βπ¨βπ¦βπ¦';
// Default length - counts UTF-16 code units
console.log(family.length); // 11
// Destructuring - counts grapheme clusters
console.log([...family].length); // 7
// See the actual components
console.log(Array.from(family));
// ['π¨', 'β', 'π¨', 'β', 'π¦', 'β', 'π¦']
// For accurate user-visible character count
const segmenter = new Intl.Segmenter('en', {granularity: 'grapheme'});
console.log([...segmenter.segment(family)].length); // 1
Playground
I got curious about all possible combinations, so I made "Emoji Architect" to explore these emojis, with this tool you can:
- Browse all composite emojis
- See the breakdown of any emoji
- Filter combinations by base emoji components
π https://www.thingsaboutweb.dev/en/emojiarchitect
More explanation and ways of building emojis coming soon...
Reference
Best reference is the spec
Top comments (0)