Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Last active March 20, 2022 19:22
Show Gist options
  • Save nolanlawson/1f068557e82d8c0bb6592d317b9265ce to your computer and use it in GitHub Desktop.
Save nolanlawson/1f068557e82d8c0bb6592d317b9265ce to your computer and use it in GitHub Desktop.
Download ZIP
Twemoji fallback, prepend font to font-family list
Raw
index.html
<!doctype html>
<html lang=en>
<head>
<title>emoji-picker-element: Windows flag emoji fallback (prepend font)</title>
<!-- Use non-existent "only x" media to toggle this style on/off -->
<style id="twemojiFlagsStyle" media="only x">
@font-face {
/* Use Apple Color Emoji because emoji-picker-element places that first in the font-family list */
font-family: "Custom Mozilla Twemoji";
src: url("https://cdn.jsdelivr.net/npm/twemoji-colr-font@0.0.4/twemoji.woff2") format("woff2");
unicode-range:
/* Regional Indicator Symbol Letters A to Z, e.g. "U" and "S" for the US flag */
U+1F1E6-1F1FF,
/* The following are required to match England, Scotland, and Wales flags */
/* Waving Black Flag */
U+1F3F4,
/* Latin small letters a to z */
U+E0061-E007A,
/* Cancel tag */
U+E007F
}
</style>
</head>
<body>
<h1>emoji-picker-element: Windows flag emoji fallback (prepend font)</h1>
<div>
On Windows 10/11, country flag emoji are currently
<a href="https://github.com/nolanlawson/emoji-picker-element/issues/269">not rendered as flags</a>.
This demo shows how to use emoji-picker-element to detect missing flag emoji, and fall back to using
Mozilla's <a href="https://github.com/mozilla/twemoji-colr">twemoji-colr</a>, via the
<a href="https://github.com/mrdrogdrog/twemoji-color-font">twemoji-colr-font</a> package. Only the flags
are replaced, and only using a simple webfont.
</div>
<emoji-picker></emoji-picker>
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
<script type="module">
import { isEmojiSupported } from 'https://cdn.jsdelivr.net/npm/is-emoji-supported@0.0.5/dist/esm/is-emoji-supported.js'
// If US flag is not supported, assume we're in a Windows no-flag environment, and fall back to Twemoji
if (!isEmojiSupported('\ud83c\uddfa\ud83c\uddf8')) {
document.getElementById('twemojiFlagsStyle').media = 'all' // enable style
const pickerInternal = document.querySelector('emoji-picker').shadowRoot.querySelector('.picker')
const fontFamily = pickerInternal.style.getPropertyValue('--font-family')
pickerInternal.style.setProperty('--font-family', '"Custom Mozilla Twemoji",' + fontFamily)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment