Chapter 15¾: serenity-emoji, two hundred and fifty-nine tiny flags and two thumbs

Hover "online" in the top bar and every open page is listed with its country's flag. A flag emoji is a strange thing: there is no "US flag" character. There are 26 letters, the regional indicators 🇦 to 🇿, and a font that knows two of them side by side draws one flag for the pair. So whether you see a flag or just the letters "US" depends on the fonts you have. Windows, famously, has none: it shows the letters.

So the site brings its own, and since everything else here is pixel type and dithered dots, it brings pixel flags: the ones the SerenityOS project drew for its emoji set, which Linus Groh packed into a TrueType font. This folder holds just the flags from it, 259 of them, and the 👍 and 👎 of the vote under each answer: 23 KB.

flowchart LR
  S["SerenityOS emoji, as PNGs"] -->|"linusg/serenityos-emoji-font"| T["SerenityOS-Emoji.ttf, 650 KB"]
  T -->|"pyftsubset: the 26 letters, two thumbs"| F["emoji.woff2, 23 KB"]
  F -->|"/emoji.woff2"| P["the online list, the vote buttons"]

Aside: why the whole font is not needed. A font can say which characters it covers (unicode-range), and the browser downloads it only when a page uses one of them. Even so, it downloads the whole file. Cutting it down to the letters means a visitor fetches 23 KB, once, and only when the page shows one of them.

Try it. Open https://lmjtfy.fun/emoji.woff2: that is the whole font. Or hover "online" in the top bar of any page here.

For the people who maintain it

The Worker embeds emoji.woff2 at build time and serves it at /emoji.woff2; page.css declares it as the font for the list's flags and the vote buttons' thumbs.

← Previous: Chapter 15⅝, jerrys-pixel-icons/ · Up: third-party · Next: Chapter 16, jevcrates/ →