Emoji Version Detection and Graceful Degradation

EmojiEmoji
Mot japonais (絵文字) signifiant 'caractère image' — petits symboles graphiques utilisés dans la communication numérique pour exprimer des idées, des émotions et des objets. Versioning and Support Detection

UnicodeUnicode
Standard universel d'encodage des caractères qui attribue un numéro unique à chaque caractère de tous les systèmes d'écriture et ensembles de symboles, y compris les emoji. releases a new emoji set roughly every year. Emoji 15.0 introduced 31 new characters; Emoji 16.0 (released in late 2024) added more. Platforms (iOS, Android, Windows) update their emoji fonts with operating system releases, meaning users on older OS versions cannot see newer emoji.

When a platform does not support an emoji, it renders as a tofu box (☐) or as the text description in brackets. Understanding how to detect and handle this gracefully keeps your UI from looking broken.

How Emoji Versions Work

Emoji versions are distinct from Unicode versions, though they track together. Key milestones:

Each emoji in emoji-test.txtemoji-test.txt
Le fichier officiel Unicode répertoriant toutes les séquences emoji avec leur statut de qualification, leurs points de code et leurs noms abrégés CLDR. carries a version annotation in a comment:

1F600 ; fully-qualified     # 😀 E1.0 grinning face
1FAE8 ; fully-qualified     # 🫨 E15.0 shaking face

Platform Support Lag

After Unicode releases an emoji version, platforms deploy support through OS updates:

This means users on iOS 16 cannot display Emoji 15.0 characters — they see a tofu box instead.

Detecting Emoji Support in the Browser

Canvas Pixel Comparison Method

The most reliable client-side detection renders the emoji on a canvas and checks whether the pixels differ from a known unsupported character:

const emojiSupportCache = new Map();

function supportsEmoji(emoji) {
  if (emojiSupportCache.has(emoji)) {
    return emojiSupportCache.get(emoji);
  }

  const canvas = document.createElement('canvas');
  canvas.width = 2;
  canvas.height = 2;
  const ctx = canvas.getContext('2d', { willReadFrequently: true });
  ctx.font = '14px Arial';

  // Baseline: a character definitely not supported (use a PUA code point)
  ctx.fillText('\uDB40\uDC00', 0, 14); // Tag character fallback
  const baseline = ctx.getImageData(0, 0, 1, 1).data.slice(0, 3);

  ctx.clearRect(0, 0, 2, 2);
  ctx.fillText(emoji, 0, 14);
  const tested = ctx.getImageData(0, 0, 1, 1).data.slice(0, 3);

  // If color data differs, the emoji rendered as a glyph
  const supported = !baseline.every((v, i) => v === tested[i]);
  emojiSupportCache.set(emoji, supported);
  return supported;
}

// Check specific emoji versions
const checks = {
  emoji12: "🥲",   // E12.0 — 2020
  emoji13: "🫀",   // E13.0 — 2021
  emoji14: "🫣",   // E14.0 — 2022
  emoji15: "🫨",   // E15.0 — 2022
  emoji16: "🫩",   // E16.0 — 2024
};

for (const [version, char] of Object.entries(checks)) {
  console.log(`${version} (${char}): ${supportsEmoji(char) ? '✅ supported' : '❌ not supported'}`);
}

Detecting ZWJJointure sans chasse (ZWJ)
Caractère Unicode invisible (U+200D) utilisé pour combiner plusieurs emoji en un seul emoji composite, comme l'assemblage de personnes et d'objets pour former des emoji de professions. Sequence Support

ZWJ sequences can partially render even when the combined glyph is not supported — the individual components show instead. To detect whether a ZWJ sequence renders as one glyph vsSélecteur de variante (VS)
Caractères Unicode (VS-15 U+FE0E et VS-16 U+FE0F) qui déterminent si un caractère s'affiche en présentation texte (monochrome) ou en présentation emoji (en couleur).. multiple:

function supportsZWJSequence(zwjEmoji) {
  const canvas = document.createElement('canvas');
  canvas.width = 80;
  canvas.height = 20;
  const ctx = canvas.getContext('2d', { willReadFrequently: true });
  ctx.font = '14px Arial';

  // Measure the ZWJ sequence
  const zwjWidth = ctx.measureText(zwjEmoji).width;

  // Measure the components separately (without ZWJ)
  const parts = [...zwjEmoji].filter(c => c !== '\u200D');
  const partsWidth = ctx.measureText(parts.join('')).width;

  // If widths are similar, ZWJ sequence is not supported (renders as parts)
  // If ZWJ is narrower, it's a single glyph
  return zwjWidth < partsWidth * 0.9;
}

console.log(supportsZWJSequence("👨‍💻")); // true on modern platforms
console.log(supportsZWJSequence("🧑‍🦲")); // may vary by platform/OS version

Detecting Emoji Support in Python

Server-side detection is less reliable since you don't have access to the client's font stack. The best approach is to use the client's User-Agent to infer emoji support:

from dataclasses import dataclass
import re

@dataclass
class EmojiVersionInfo:
    min_emoji_version: float
    os_name: str

def detect_emoji_version(user_agent: str) -> EmojiVersionInfo:
    """Approximate emoji version support from User-Agent string."""

    # iOS version → emoji version mapping
    if "iPhone OS" in user_agent or "iPad; CPU OS" in user_agent:
        match = re.search(r'OS (\d+)_', user_agent)
        if match:
            ios_ver = int(match.group(1))
            version_map = {18: 16.0, 17: 15.1, 16: 15.0, 15: 14.0, 14: 13.0}
            for ios, emoji in version_map.items():
                if ios_ver >= ios:
                    return EmojiVersionInfo(emoji, "iOS")
        return EmojiVersionInfo(11.0, "iOS")

    # Android version → emoji version (via Noto updates)
    if "Android" in user_agent:
        match = re.search(r'Android (\d+)', user_agent)
        if match:
            android_ver = int(match.group(1))
            version_map = {15: 16.0, 14: 15.1, 13: 15.0, 12: 13.1, 11: 13.0}
            for android, emoji in version_map.items():
                if android_ver >= android:
                    return EmojiVersionInfo(emoji, "Android")
        return EmojiVersionInfo(11.0, "Android")

    # Windows 11 generally has recent emoji support
    if "Windows NT 10.0" in user_agent:
        return EmojiVersionInfo(15.0, "Windows")

    return EmojiVersionInfo(11.0, "Unknown")

Graceful Degradation Strategies

1. Image Fallback for Specific New Emoji

If you use a specific new emoji that may not be supported, provide an image fallback:

<!-- Fallback: emoji → image for unsupported platforms -->
<picture>
  <source media="(min-resolution: 1dpi)" srcset="/emoji/shaking-face.png">
  <!-- Modern platforms show this text, which triggers the image source on older -->
  <img src="/emoji/shaking-face.png" alt="Shaking face" width="20" height="20">
</picture>

Or use JavaScript to replace unsupported emoji dynamically:

const NEW_EMOJI = ["🫨", "🪼", "🩵", "🫷", "🫸"]; // E15.0+

document.addEventListener('DOMContentLoaded', () => {
  NEW_EMOJI.forEach(emoji => {
    if (!supportsEmoji(emoji)) {
      // Replace with TwemojiTwemoji
Un ensemble d'emoji open source créé à l'origine par Twitter, fournissant des ressources emoji en SVG et PNG utilisables dans n'importe quel projet. image
      const imgUrl = getTwemojiUrl(emoji);
      document.querySelectorAll('*').forEach(el => {
        if (el.childNodes.length === 1 && el.childNodes[0].nodeType === 3) {
          el.innerHTML = el.innerHTML.replace(
            emoji,
            `<img src="${imgUrl}" alt="${emoji}" style="height:1em;vertical-align:-0.1em;">`
          );
        }
      });
    }
  });
});

2. Twemoji for Universal Rendering

Twemoji (from Twitter/X) renders all emoji as SVG/PNG images from a CDN, ensuring consistent display across all platforms regardless of OS emoji version:

import twemoji from 'twemoji';

// Replace emoji with images sitewide
twemoji.parse(document.body, {
  folder: 'svg',
  ext: '.svg',
  base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/',
  className: 'twemoji',
});

.twemoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}

3. Emoji Version Tag in Your Data

When storing user-generated emoji content, record the minimum emoji version required:

import regex

# Map emoji to their version (from emoji-data.txt parsing)
EMOJI_VERSION_MAP: dict[str, float] = {
    "🫨": 15.0,
    "🪼": 15.0,
    "🥲": 13.0,
    "🤣": 3.0,
    "😀": 1.0,
    # ... full dataset
}

def required_emoji_version(text: str) -> float:
    """Return the minimum emoji version needed to display this text."""
    found = regex.findall(r'\X', text)
    max_version = 0.0
    for grapheme in found:
        # Use the first code point of the cluster for lookup
        version = EMOJI_VERSION_MAP.get(grapheme, 0.0)
        max_version = max(max_version, version)
    return max_version

Explore More on EmojiFYI

• Compare emoji rendering across platforms: Compare Tool
• Inspect emoji version data: Sequence Analyzer
• Unicode emoji version history: Glossary
• Query emoji version data via API: API Reference