<?php
$🍞 = "bread";
echo "Some delicious " . $🍞;

I mean, there's no reason why it shouldn't work. An emoji is just a Unicode character (OK, not just a character - but we'll get on to that), so it should be fine to use anywhere.

Emoji work perfectly well as function names:

function 😺🐶() {
   echo "catdog!";
}
😺🐶();

Definitions:

define( "❓", "huh?" );
echo ❓;

And, well, pretty much everywhere:

class 🦜
{
    public int $🐦;
    public ?string $🦃;

    public function __construct(int $🐦, ?string $🦃)
    {
        $this->🐦 = $🐦;
        $this->🦃 = $🦃;
    }
}
$🐓 = new 🦜(1234, "birb");
echo $🐓->🐦;

How about namespaces? Yup!

namespace 😜;
class 😉 {
    public function 😘() {
        echo "Wink!";
    }
}

use 😜\😉;
$😊 = new 😉();
$😊->😘();

Even moderately complex Unicode sequences work:

echo <<<🏳️‍🌈
Unicode is magic!
🏳️‍🌈;

I've written before about the Quirks and Limitations of Emoji Flags. The humble 🏳️‍🌈 is actually the sequence U+1F3F3 (white flag), U+FE0F (Variation Selector 16), U+200D (Zero Width Joiner), U+1F308 (Rainbow).

Take a complex emoji like "Female Astronaut with Medium Dark Skin Tone" - 🧑🏾‍🚀 - that also works!

$🧑🏾‍🚀 = 1;
$👷🏻‍♂️ = 2;
echo $🧑🏾‍🚀 + $👷🏻‍♂️;

Probable the most complex emoji has 10 different codepoints! It looks like this - 🧑🏾‍❤️‍💋‍🧑🏻

And it works!

$🧑🏾‍❤️‍💋‍🧑🏻 = "Kiss Kiss. Bang Bang!";
echo $🧑🏾‍❤️‍💋‍🧑🏻[-1];

There are some emoji which don't work;

$5️⃣ = "five";

The 5️⃣ emoji is U+0035 (Digit Five), U+FE0F (Variation Selector 16), U+20E3 (Combining Enclosing Keycap). PHP doesn't allow variables to start with digits, so it craps out with PHP Parse error: syntax error, unexpected integer "5", expecting variable or "{" or "$" in php shell code on line 1

You also can't use "punctuation" emoji as though they were normal characters:

echo 5 ❗= 6;

And, while not strictly emoji, you can't use mathematical symbols:

echo 5 ≤ 6;

So, there you have it. Is this useful? Well, probably. It is easy to get lost in a sea of text - so little pictograms can make it easier to see what you're doing. If the basic ASCII characters aren't part of your native language, perhaps it is useful to make use of the full range of Unicode.

Does your favourite programming language support Emoji?

Is there a way to use CSS to increase the font size of specific characters without having to wrap them in an extra <span> or similar?

Yes! Although it is a bit of a hack.

This relies on 3 CSS features: src: local(), unicode-range,and size-adjust. Let me walk you through it.

@font-face {
    font-family: "emoji";

    src: local('Apple Color Emoji'),
         local('Android Emoji'),
         local('Segoe UI Emoji'),
         local('Noto Color Emoji'),
         local(EmojiSymbols),
         local(Symbola);

    unicode-range: U+231A-231B, U+23E9-23EC, U+23F0, U+23F3, U+25FD-25FE, U+2614-2615, U+2648-2653, U+267F, U+2693, U+26A1, U+26AA-26AB, U+26BD-26BE, U+26C4-26C5, U+26CE, U+26D4, U+26EA, U+26F2-26F3, U+26F5, U+26FA, U+26FD, U+2705, U+270A-270B, U+2728, U+274C, U+274E, U+2753-2755, U+2757, U+2795-2797, U+27B0, U+27BF, U+2B1B-2B1C, U+2B50, U+2B55, U+FE0F, U+1F004, U+1F0CF, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F21A, U+1F22F, U+1F232-1F236, U+1F238-1F23A, U+1F250-1F251, U+1F300-1F320, U+1F32D-1F335, U+1F337-1F393, U+1F3A0-1F3CA, U+1F3CF-1F3D3, U+1F3E0-1F3F0, U+1F3F4, U+1F3F8-1F43E, U+1F440, U+1F442-1F4FC, U+1F4FF-1F53D, U+1F54B-1F567, U+1F57A, U+1F595-1F596, U+1F5A4, U+1F5FB-1F64F, U+1F680-1F6CC, U+1F6D0-1F6D2, U+1F6D5-1F6D7, U+1F6DC-1F6DF, U+1F6EB-1F6EC, U+1F6F4-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1FA7C, U+1FA80-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8;

    size-adjust: 300%;
}

body {
    font-family: "emoji", sans-serif;
}

Here's how it works.

@font-face this tells the browser that we're defining a new font which will be referenced later.

font-family this is the name we're going to be using as a reference.

src: local('Apple Color Emoji') ... CSS can reference local fonts. We don't know what device this page is being viewed on, so we've included a number of popular fallback fonts which should work with all major browsers. You can also reference a webfont if you want - although Emoji fonts tend to have a large filesize. I've adapted this from Marc Fornós' CSS and added a few more common default emoji fonts.

unicode-range this tells the browser to use this font only for the specific codepoints mentioned. This is where the magic happens.

Emoji codepoints are complicated - especially when it comes to combining characters. You can see a full list of every sequence in Unicode 15.1. There are currently 3,782 different emoji.

There was some talk of using named ranges but that doesn't seem to have gone anywhere. So, instead, I've extracted all the Emoji codepoints and manually grouped them. It's a pretty long sequence, and I'm sure I've made a few mistakes.

size-adjust this is used to increase or decrease the apparent size of a font.

Finally, the body { font-family: "emoji", sans-serif; } tells the browser to use the Emoji font (remember, this will only work on the specified Unicode range) and then fall back to the defaults sans-serif font. Obviously, you can specify whatever fonts you like.

Have a play with it

This is a nifty little hack if you want to make Emoji (or any other text) bigger than its surroundings.

I am indebted to Šime Vidas who demonstrated this trick to me.

Like all good geeks, I have far too many domain names that I acquired for interesting projects which never took off. My latest is a bit different though.

https://⏻.ga/🔗

That's "Unicode Power Symbol Dot Gabon". Because why not.

Regular readers will know that I helped get ⏻ and several power symbols into Unicode. When I do talks about this, I usually refer to them as Emoji because, to most people, Emoji are simply little pictures in text. But that is a gross oversimplification. You know the meme that real Champagne must be from the Champagne region of France - otherwise it is merely sparkling wine? Well, Emoji must come from the Supplementary Multilingual Plane of Unicode otherwise they're just ✨sparkling✨ characters.

Except... That's not quite true. There are a bunch of symbols stuffed in the Miscellaneous block of the Basic Multilingual Plane which are also Emoji.

The Power Symbol appears in the block Miscellaneous Technical. The symbol itself is not an Emoji, but it is in a block which has 18 Emoji. Confused? Good⁰!

Domain names can only contain the ASCII characters A-Z, 0-9, and -. That's a problem if you speak anything other than basic English. Luckily, there's a workaround! I have a Chinese language domain 莎士比亚.org - through the magic of the Punycode Algorithm, it becomes xn--jlq54w7ypemw.org. This use of non-Latin letters in domains is known as IDN - Internationalised¹ Domain Names.

IDNs have several officially supported "scripts" - for example Thai, Greek, Hebrew, Cyrillic, Chinese etc. Each top level domain (like .uk, .com, .中国) can choose which scripts they'll accept. For example, a Chinese Top Level Domain may only accept Chinese characters and not Greek characters. IANA maintains a list of which domains support which scripts. But it is incomplete. Because it doesn't mention Emoji.

The Punycode algorithm works with emoji. This means you can have Emoji in domain names! Mostly. And that "mostly" is important.

Not every Top Level Domain accepts Emoji domain names (because they hate having fun, I guess?²)

The .ga registry doesn't publish any rules showing which scripts it will accept³. But seems quite happy to take registrations for Punycode domains. So I registered https://xn--soh.ga/ and, after an unusually long delay, it worked!

Does this mean ⏻.ga is an Emoji domain? No! ⏻ is not an Emoji! It is a small pictographic symbol encoded in Unicode.

Does this mean ⏻.ga is an IDN? No! ⏻ is not an international script. It is a language-neutral technical symbol.

So what the fuck kind of domain is it?

Drop an answer in the box bellow.

⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟦
⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟦
⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟦
⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟦
⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️
🟩⬛️🟧⬛️⬛️🟥🟥⬛️⬛️⬛️
🟩🟩🟧⬛️🟨🟨🟥🟥⬛️⬛️
🟫🟩🟧🟧🟨🟨⬛️⬛️⬛️⬛️
🟫🟫🟫🟧🟪🟫🟫🟥🟦⬛️
🟦🟧🟧🟧🟪🟪🟥🟥🟦⬛️
🟦🟨🟨🟩🟪🟦🟥⬛️🟦⬛️

And the individual pieces:

🟦
🟦
🟦
🟦

🟩
🟩🟩
⬛️🟩

🟨🟨
🟨🟨

🟪
🟪🟪
🟪

⬛️🟥
🟥🟥
🟥

⬛️🟫
⬛️🟫
🟫🟫

🟧
🟧
🟧🟧

Yes, I'm sick of seeing all those Wordle Tweets as well!

What is this 🧙‍♀️ craft?

In your keyboard settings, you should see an option like this:

You can set the "Compose" key to be anything you like. Personally, I use the otherwise-useless Scroll Lock button.

Now, once you press ScrLck you'll see this symbol .

The next few letters you type will be "absorbed" by that symbol and combined to make something new.

What's available

You can see the default symbols in /usr/share/X11/locale/en_US.UTF-8/Compose

You can add your own, either in the file or in ~/.XCompose

Note!

The short-cuts you type are case-sensitive. Typing ScrLck, f, u does nothing, but typing ScrLck, F, U will get you 🖕!

Alternatives

There is a menu driven way of selecting emoji if you can't remember keyboard shortcuts.

Credit

I've shameless stolen this tip from:

Claudia Pellegrino @claudi@darmstadt.social

@c_pellegrino

I love #Linux so much!
Typing Compose+p,o,o gives you: 💩
Typing Compose+F,U gives you:🖕
I’m absolutely not making this up. It’s in the Compose map that comes with X11. (Works in the terminal but not in the browser)

---

Although, I've found that it does work in the browser on Wayland 🤷

🖖

That is pretty cool - but has one slight problem. If someone changes their Twitter avatar, or deletes their account, the image disappears and I'm left with a broken image.

Booo!

So, how do we fix this? With the awesome power of SVG and Emoji!

As pointed out by Lea Verou, SVGs can contain Emoji. Which makes them easy to use for favicons:

Lea Verou

@LeaVerou

Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg:

<svg xmlns="w3.org/2000/svg" viewBox="0 0 100 100">
<text y=".9em" font-size="90">💩</text>
</svg>

Useful for quick apps when you can't be bothered to design a favicon! pic.x.com/s2f8iqxazu

---

This can also be used with CSS's background property:

.avatar {
  background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.85em%22 font-size=%22100%22>🗣</text></svg>");
}

That's just a URl encoded version of:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".85em" font-size="100">🗣</text>
</svg>"

The background image shows up before the contents of the <img> element have loaded. If the src is missing, your users will see this instead:

Nifty!

You can see it in action here:

There are a few downsides with this approach:

• Transparent images will show the SVG underneath them.
• Not every system renders emoji in the same way.
• Sizing of text within an SVG can be inconsistent.
• A "broken image" icon might display in the foreground.

Enjoy!

Further Reading

• Ire Aderinokun's Styling Broken Images
• Taylor Hunt's Optimizing SVGs in data URIs

tl;dr you can't register Punycode .ss domains.

This also means Internet users in South Sudan can't register domains using their own writing system.

Background

The Republic of South Sudan became independent and joined the United Nations back in 2011. A decade later, and it's now possible to register .ss domains.

Partly due to the history of the letters SS, and partly because of the way domains are usually organised, you cannot register a .ss domain directly. You can have .com.ss, .edu.ss, .biz.ss, .sch.ss, .gov.ss, .net.ss, and - my new favourite - .me.ss!

This allows for some interesting domain hacks. Perhaps host a recipe page for Eton Mess? Or complain about trash at your_town.me.ss?

I was looking at hot.me.ss - but someone already snapped that up. However, the registrar said they allowed Punycode registration. Which means... EMOJI DOMAINS!

So, for €24, Afriregister.com.ss sold me...

🔥.me.ss

For the Punycode minded among you, that's xn--4v8h.me.ss

The process

This wasn't quite as simple as I hoped. There are several registries which claim to support .me.ss - but halfway through the process, they'd decide that they couldn't register it. Some of the registrars outside of Africa wanted extortionate prices for domains. But Afriregister.com.ss were relatively cheap and hassle-free. They let you pay via PayPal.

Domains have to be approved. There is a long list of banned terms. Some of those restrictions are very specific to the people of South Sudan - so it is worth reading.

The failure

The registration still hadn't completed after 12 hours. So the next day I chatted to the registrar.

Damnit!

Looking more closely at nic.ss's registration policies, they say

4.1 All .SS Domain Names MUST have a minimum of THREE (3) characters. 4.2 All .SS Domain Names should not have more than 63 characters. 4.3 All .SS Domain Names should have a syntax pattern of [a-z 0-9].

It didn't explicitly allow or deny hyphens - so I thought I'd risk it.

Oh well, that would have been fun if it worked.

As I said, it's important to publish about things which don't work. It stops other people from wasting their time on futile pursuits.

So, I've now got credit with the registrar. What .me.ss domain should I get?

So I was delighted to find this brilliant little Gnome Extension called Emoji Selector.

It sits in your dash, until you click it or press 💠+e. Then you get this pop up.

The search bar focuses as soon as you open it, and the results are keyboard selectable.

There's the usual groupings of emoji, if you just want to scroll.

Click the emoji you want and it copies to your clipboard, ready to be pasted in.

And... that's it! Simple and effective. You can check out the source code on GitHub.

I want to use emoji in my passwords. They're easy to type on a mobile keyboard, easy to remember, and a lot more fun than boring ASCII characters.

Let's go with ✅🐎🔋📎

(As close as possible to Correct Horse Battery Staple)

I use BitWarden as my password manager. It saves emoji passwords into its database, but has trouble displaying them:

Android

Browser Plugin

Linux App

Bug Report

I've raised this (minor) bug on GitHub. I wonder which other password managers also struggle with the more "exotic" parts of Unicode?

⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️
⬜️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬜️⬜️⬜️⬛️⬜️⬜️⬜️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬜️
⬜️⬛️⬜️⬜️⬜️⬜️⬜️⬛️⬜️⬛️⬛️⬜️⬛️⬛️⬜️⬛️⬜️⬜️⬜️⬜️⬜️⬛️⬜️
⬜️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️⬜️⬛️⬜️⬛️⬛️⬜️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️
⬜️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️⬛️⬛️⬜️⬛️⬛️⬜️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️
⬜️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️⬜️⬜️⬛️⬜️⬜️⬜️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️
⬜️⬛️⬜️⬜️⬜️⬜️⬜️⬛️⬜️⬛️⬛️⬛️⬛️⬛️⬜️⬛️⬜️⬜️⬜️⬜️⬜️⬛️⬜️
⬜️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬜️⬛️⬜️⬛️⬜️⬛️⬜️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬜️
⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬛️⬜️⬛️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️
⬜️⬛️⬛️⬛️⬛️⬛️⬜️⬛️⬛️⬛️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️⬛️⬜️⬛️⬜️⬜️
⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬛️⬛️⬛️⬛️⬛️⬜️⬛️⬜️⬛️⬛️⬛️⬛️⬛️⬛️⬜️
⬜️⬛️⬛️⬜️⬜️⬜️⬜️⬛️⬛️⬜️⬜️⬛️⬛️⬛️⬛️⬜️⬜️⬜️⬜️⬛️⬛️⬜️⬜️
⬜️⬛️⬜️⬜️⬜️⬜️⬛️⬜️⬜️⬛️⬛️⬜️⬜️⬜️⬛️⬜️⬜️⬛️⬛️⬛️⬜️⬜️⬜️
⬜️⬜️⬛️⬜️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬜️⬜️⬛️⬜️⬛️⬛️⬜️⬜️⬛️⬜️
⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬛️⬛️⬜️⬜️⬜️⬛️⬜️⬛️⬛️⬛️⬛️⬜️⬛️⬜️
⬜️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬜️⬛️⬜️⬜️⬜️⬛️⬜️⬜️⬛️⬜️⬜️⬛️⬛️⬜️⬜️
⬜️⬛️⬜️⬜️⬜️⬜️⬜️⬛️⬜️⬜️⬛️⬛️⬜️⬛️⬛️⬜️⬜️⬛️⬛️⬛️⬜️⬜️⬜️
⬜️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️⬛️⬛️⬛️⬛️⬛️⬜️⬛️⬜️⬛️⬛️⬜️⬜️⬜️⬜️
⬜️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️⬛️⬜️⬜️⬛️⬜️⬛️⬜️⬛️⬛️⬜️⬛️⬛️⬜️⬜️
⬜️⬛️⬜️⬛️⬛️⬛️⬜️⬛️⬜️⬛️⬜️⬜️⬛️⬛️⬛️⬜️⬛️⬜️⬜️⬛️⬜️⬜️⬜️
⬜️⬛️⬜️⬜️⬜️⬜️⬜️⬛️⬜️⬛️⬛️⬜️⬜️⬜️⬛️⬜️⬛️⬛️⬜️⬛️⬜️⬜️⬜️
⬜️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬜️⬛️⬛️⬜️⬛️⬜️⬜️⬛️⬛️⬛️⬛️⬜️⬛️⬜️⬜️
⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️

How?

There are lots of ASCII block characters, but none are specifically marked as white / empty. Additionally, some fonts don't make the characters pure squares.

There are two characters which, generally, render as square Emoji:

• Unicode character U+2B1B is a large black square ⬛ .
• Unicode character U+2B1C is a large white square ⬜ .

These characters are from the Unicode block "Geometric Shapes". When paired with ️Variation Selector-16, they are given an Emoji presentation.

The above QR code is styled with "line-height:1em;" to make sure there are no vertical gaps between characters, and "letter-spacing:-3px;" to squash any horizontal gaps.

I found that it scanned reliably on my devices.

Why?

I was having a discussion with someone about the limitations of text based communication. How do you send a QR in, say, an email when you aren't allowed to attach anything? We were looking at a text only system which wouldn't allow attachments or BASE64 encoded inline.

So I knocked up a quick scrap of code to see if it would work with Emoji. It sort of works - but only if you can control the exact layout. On mobile screens, it might be too narrow, and you can't easily control the character spacing.

So, a nice idea, but a little pointless!

Can I tweet that??!?

The smallest possible QR code is 21x21 pixels, that's too many characters to fit into a Tweet. Sorry!

You can post it on something like Mastodon but without the fine-grained CSS control, it probably won't be readable.

⏻ ⏼ ⭘ ⏽ ⏾

They’re available to use in the browser, in emails, and messages.

Here’s how they look, in both dark and light mode:

Terence Eden is on Mastodon

@edent

Anyone with iOS 14 able to see these 5 symbols?
If not - who do I still know at Apple that is willing to listen to me grouch at them?

Terence Eden is on Mastodon

@edent

If you've got the new iOS, I'd love to know how our new Unicode Power Symbols render.
⏻ ⏼ ⏽ ⭘ ⏾
UnicodePowerSymbol.com
THANKS GANG!

---

---

Mark Baker

@Mark_Baker_UK

Replying to @edent@edent Yup can see them on iOS 14 👍 pic.x.com/hpue9dgaku

---

Sadly, Android users still can’t take advantage of these new symbols. Although Google have added them to their Noto fonts – they show a curious reluctance in rolling them out to Android. Hopefully this new iOS availability will help them reconsider.

If you’d like to add these symbols to your computer or your website, you can download the Power Symbols font or Google's Noto Sans Symbols 2.

Huge thanks to the gang at Apple for helping bring these characters to millions of users. It's fantastic to see a tiny proposal to a standard suddenly be made available world-wide. Although it isn't technically an emoji, I'm excited to see people using it for all sorts of things.

• bit.ly/󾰀󾰀

You can also use Emoji!

• bit.ly/☹
• bit.ly/♐

Well, OK, not all Emoji. If you try to use most of them, the Bitly system craps out and generates broken URls, like so:

But you can use most Unicode Miscellaneous symbols - some of which may have Emoji style representations on your system.

• bit.ly/♔♕♖♗♘♙♚♛♜♝♞♟

Please use this forbidden knowledge wisely.

The Transgender Flag is a draft candidate for Emoji 13.0 under the name Blue, Pink, and White Flag. A number of platforms include an image for this emoji, but do not show it on the emoji keyboard. As of June 2019 this is now supported on Twitter platforms that use Twemoji. Emojipedia

The (proposed) Transgender Flag looks like this (image) or like this 🏳️‍⚧️ (emoji). It is a composite character consisting of four elements:

• 🏳️ waving white flag (U+1F3F3)
• Variation selector-16 (U+FE0F)
• ⚧️ male with stroke and male and female sign (U+26A7)
• Variation selector-16 (U+FE0F)

The Variation Selector basically says, "treat the preceding character as a colourful emoji rather than a normal character."

So, how do emoji flags work? There are, broadly speaking, 4 types of emoji flags.

Natural Flags

There are seven flag characters in Unicode:

🏁🎌🏳️🏴⛳🚩⛿

They are independent characters. Use them however you like.

Country Flags

(Almost) every country has an emoji flag in Unicode. Here's the UK's 🇬🇧 Rather than take up loads of space in the spec with each flag, Unicode uses "Regional Identifier Letters." Take the country's two letter ISO 3166-1 alpha-2 code, place them next to each other with no spaces, and a flag will magically appear.

The flag of "United Kingdom of Great Britain and Northern Ireland" is the symbol 🇬 and 🇧 placed together. Not 🇺 and 🇰 - because that would make life too easy!

Regional Flags

Wales is a country within the UK. It has its own flag 🏴󠁧󠁢󠁷󠁬󠁳󠁿. Texas is a state within the USA. It has its own flag 🏴󠁵󠁳󠁴󠁸󠁿.

The way these flags are constructed is different from the country flags.

Wales is 🏴 (Waving Black Flag) then the "Tag Latin Small" letters G, B, W, L, S, then the "Cancel Tag" symbol.

Texas uses Tag Latin Small Letters U, S, T, X, and then the Cancel Tag.

The "Tag Latin" block was originally intended for the invisible mark-up of documents - that's no longer recommended. They are now only used for modifying emoji.

Most systems do not support regional flags other than England, Scotland, and Wales.

Symbolic Flags

Finally, we get on to flags which are in widespread use, but don't belong to geographical or regional identities.

• The Pirate Flag 🏴‍☠️ is 🏴, variation selector-16, and ☠ (Skull and Crossbones)
• The Pride / Rainbow Flag is 🏳️‍🌈 - this uses the white 🏳 flag, variation selector-16, and 🌈 (Rainbow).

So, there are six possible ways to write a flag in Unicode:

1. a unique character,
2. a pair of letters,
3. a black flag and tag characters,
4. a black flag with a variation and an emoji
5. a white flag with a variation and an emoji
6. a white flag with a variation and a character with a variation

Limitations

No historic flags. The flag of the USA has changed several times over the country's history - more recently the flag of Afghanistan has changed. The emoji flag is always the most recent version.

Flags of countries which no longer exist. Countries change, merge, and collapse. There's no flag for the Soviet Union or Yugoslavia for example.

Contentious flags. The emoji flag of Taiwan 🇹🇼 is banned in China. There are regions around the world which have their own flag, but aren't always recognised as distinct countries.

Counting is hard. To a human, a single flag looks like one character 🇬🇧. But to a computer, it could look like several. On a service like Twitter which has a 280 character limitation that can cause confusion for the user. The number of characters a user thinks they've written may be at odds with what the computer says.

The biggest limitation is the time it takes for emoji to filter their way down to every computer. Hopefully you'll soon see 🏳️‍⚧️ as a flag, rather than an odd looking emoji sequence.

What happens if you use CSS to change the opacity of an emoji?

Here's a unicorn, with a pink font colour:

🦄 Unicorn

Let's wrap that in this scrap of CSS to make it 50% opaque.

color: rgba(255, 105, 180, 0.5);

🦄 Unicorn

Hopefully, you see a semi-transparent philosophical argument. What if we set the opacity to 0.0 - that is, completely transparent?

🦄 Unicorn

There's a shunicorn there. If you don't believe me, try highlighting it!

Now, let's try a see-though beastie, but this time adding a drop-shadow:

color: rgba(255, 105, 180, 0.5); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

Good! And now fully transparent text plus a drop-shadow:

color: rgba(255, 105, 180, 0); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

On Firefox, the text is invisible, but the emoji is completely visible - like this...

This bug is not present on Firefox for Android, nor Chromium for Linux.

The only way on Firefox, to get a completely invisible pink unicorn plus a drop shadow is to use:

color: rgba(255, 105, 180, 0.002); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

color: rgba(255, 105, 180, 0.001); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

0.002 is invisible, but 0.001 is visible.

I've raised this as a bug on Mozilla's Bugzilla.

In the meantime, if you can see the invisible pink unicorn, please let me know. Or contact a theologian.

I've been toying around with making a version which only uses emoji. Here's what me and my friends have come up with so far. Feel free to add others.

❄+⛄=☃
🌧️+☂=☔
🌦️+🌱=🌳
🔥+💧=♨️
🚰+🦠=🚱
🐟+🍚=🍣
🥕+🥬+🥒+🍅=🥗
🔒+🔑=🔓
🌌+🔭=☄️
🧔+💈=👨
🚬+🚫=🚭
🧬+🧫+🧪=☣️
🦘+🐨=🇦🇺
🥝+🧝+🐉=🇳🇿
🐄+🔪+🧀=🍔
🌽+🔥+🧂=🍿
👩+🎬+🎥+🎞️=📽️
🖌️+🎨=🖼️

From Amanda

🥖+🧂+🔥=🥨
🦅+🌭+🏉+🗽=🇺🇸
☀️+💧=🌈
💁🏼‍♀️+🏺=🧞‍♂️
⏳+⏰=⌛️
🔨+🔧=🛠
👩🏽‍⚖️+🏛=⚖️
🦄+🥃=🏴󠁧󠁢󠁳󠁣󠁴󠁿
🐉+🌼=🏴󠁧󠁢󠁷󠁬󠁳󠁿
🦁+🌹=🏴󠁧󠁢󠁥󠁮󠁧󠁿

From Linda

🎸+🥁+🎤=💃
🌼+🐝=🍯
🤡+🎈=😱
👓+🌞=🕶
🦕+☄=☠
🐛+🌿+⏱=🦋

From Ade

🦏+🌈=🦄

From Thayer

👉+👌+🎊=🤱

If you have any good combinations - stick them in the comments. If you've any idea how I can turn this into a game - do let me know.

Tapes

Long before solid-state drives, we used to record data on long thin strips of magnetic tape. 🖭 📼 I'm sure there's a hipster somewhere who only listens to Kraftwerk on C90 cassettes, and claims that the image quality on Twin Peaks is superior on NTSC VHS tapes - but these have all-but died out now.

If you've ever watched an old episode of the original Star Trek, you'll be familiar with this, the Tape Drive: ✇ I'll bet there's a 3D printed one you can hook up to the GPIO pins of your Raspberry Pi - but tape has bitten the dust. Much like...

Floppy Disks

One is an emoji, the others are mere symbols. 💾 🖫 🖪 🖬 Commonly used as a "save" icon, even though the iMac first killed off the disk drive in 1998.

You get white and black "hard shell" disks - more commonly known as 3½-inch disks. There's also a "soft shell" disk - which could be a 5¼-inch or the even older 8-inch.

CD and DVD

💿 📀

Not quite as obsolete as the magnetic tape - but not far off. 1F4BF is supposed to be a generic "optical disc" but is usually depicted as a CD. Just for fun, there's a separate Optical Disc Icon which is not an emoji: 🖸

I suppose we should be grateful that HD-DVD and LaserDisc didn't make the standard. Which brings us on to...

MiniDisc!

💽 Some people charitably call this a disc-cartridge. But, no, the official name is MINIDISC. For those too young to remember, Sony's MiniDisc was a proprietary, and inconsequential foray into digital music delivery.

If you are that young, you may be blissfully unaware of these two pieces of technology:

Pager and Fax Machines

📟 📠 🖷

The pager was never really a consumer item in the UK - not the way it was in the USA.

The fax machine is sort of a Shibboleth for everything wrong with an organisation. If you want to be scathing, insinuate that their company still relies on fax machines.

Fax also retains the rare distinction of being one of the few Unicode symbols which is represented by a whole word.

℻

We're getting more modern...

Telephones

🕾 🕿 ☏ ☎ To most people, telephones aren't a handset which rest atop of a base with touch-tone buttons. Rotary dial is extinct. For extra archaic points, there's also a telephone perched atop a modem.

🖀

As for that receiver... There's FIVE of them!

📞 🕻 🕽 ✆ 🕼

An emoji receiver, two regular receivers in different direction, a symbol to say there's a phone nearby and, of course, a receiver with a page coming out of it. Back to bloody fax machines!

Finally, not quite obsolete yet, but there is a"clamshell" style flip-phone:

🖁

As a special bonus for making is this far through my digital spelunking, here's the symbol for "telephone recorder"

⌕

No... I don't know either...

Nothing is lost forever

Unicode is a repository for human communications. Some of the letters, languages, and scripts are going to die out. We still have Roman Numerals -Ⅷ - despite that empire crumbling hundreds of years ago.

The Kharosthi script vanished in the 6th century. 𐩔 𐩕 𐩖 𐩗 𐩘

But it is still there, in countless books, inscribed on coins, hewn into the living rock. And now preserved in Unicode.

Our toys and fads and emoji will fade away. This is not a cause for sadness, but rather joy. Joy that someone in millennia hence will be able to feel slightly closer to their ancestors by understanding our primitive pictorial language.

Terence Eden is on Mastodon

@edent

EVERY EMOJI! pic.x.com/2fcuqwu67c

---

Download the WEBM version (19MB).

The Process

Mostly notes to myself, but I thought you lot might be interested 🙂

Get Every Emoji from Twemoji

Twitter maintain the Twemoji Project - it contains high quality SVGs of every emoji. They generously make them available under CC-BY.

But grabbing all the SVGs we want is a little tricky. GitHub don't make it easy to download a single directory - you usually have to download the entire repo, or a ZIP of all the files. I only wanted the SVGs from a specific folder.

What do we do in these situations? HACK THE MAINFRAME Cheat! Twitter has an SVN interface for compatibility reasons. We can export a specific directory using:

svn export https://github.com/twitter/twemoji/branches/gh-pages/2/svg

Convert to PNG

Next, we need to convert to PNG. We also need to resize the images because their default canvas is a miniscule 48x48px. I chose 1024x1024.

mogrify -format png -density 1024 -resize 1024x1024 *.svg

This may take a while depending on the speed of your machine.

I then moved all the PNGs to a new directory.

Rename the files

In order to turn these images into a movie, it's helpful to have them named sequentially. This is a simple(ish) one-liner which renames all the files to 0001.ext, 0002.ext, etc.

ls * | cat -n | while read i f; do mv "$f" `printf "%04d.${f#*.}" "$i"`; done

Convert to MP4

This takes a sequence of images and turns them into a 25fps MP4.

avconv -r 25 -i %04d.png EveryEmoji.mp4

Fix the MP4 and convert to other formats

...or not! For some reason, Twitter and VLC didn't like the MP4 generated by avconv so I used the ever-reliable online-convert.com to regenerate the MP4 and create a WEBM.

And then add sound

As so many people requested it...

The End

You have been visited by the chicken of blogging. May it bring you peace and happiness.

I was wandering along the beach one day, when I noticed some clever chap had drawn some arrows in the sand. Can you guess where they led?

The more astute of you will have realised that these are not human drawn arrows. They are, of course, footprints left by birds.

A bird's foot is a "backwards" arrow. The apex points to the bird's rear.

It is conceivable that had birds evolved greater intelligence and developed a writing system then their → would be the equivalent of our ←.

All this talk of birds leads, naturally, to Aliens!

In the 1970s, the USA launched a pair of space probes - Pioneer 10 and 11 - which contained "a message from mankind". An anodised metal plate designed by Carl Sagan.

Much has been written about whether the message is appropriate. Not just because of the nudity(!) - but whether the abstract design could ever be successfully deciphered by an alien mind.

At the bottom of the plaque is a diagram which, to our human eyes, shows where the spacecraft has come from.

A contemporary complaint from an art historian ran:

The trajectory, it will be noticed, is endowed with a directional arrowhead; it seems to have escaped the designers that this is a conventional symbol unknown to a race that never had the equivalent of bows and arrows.

"The image and the eye" - Ernst Hans Gombrich

Suppose that the plaque is picked up by a race of super-intelligent birds - how will they interpret that message?

To them, an arrow points towards its stem. In this case, the Pioneer craft is on a journey to Earth. Perhaps they will have noticed that our toes are not like theirs - if they even recognise the squiggles as belonging to creatures - but there is nothing fundamental about us which indicates the chirality of our arrows.

Behind the human figures is another arrow. From the Birds' perspective that is also pointing towards the map to our sun. Is the message on the probe "if lost, please return to..."?

Semantic Imagery

When you choose an icon - you're inadvertently assuming that everyone has a similar cultural background.

If you are an alien - or perhaps a teenager - many of these symbols are meaningless.

You may already be familiar with skeuomorphism Let's take a few interesting examples.

Post

📯

For people in two-dozen countries, the Postal Horn is the symbol of the national post office. It makes perfect sense to hide messages behind this icon, right?

Of course, if you are in Japan, you'd probable expect the symbol to be:

〶

Do those symbols mean anything to you?

Settings

🔧 ⚙️

When was the last time you used a spanner to adjust something? On your computer - never! In the physical world, spanners are used mostly for repairing or installing something. What does that have to do with setting your program's preferences?

And cogs? Computers don't have them! I struggle to think of anything I own which has a user replaceable cog which will adjust its function.

Save

💾 🖫 🖬 🖪

The save icon is, even on the most modern interfaces, an image of an antiquated medium. Do you have a floppy disk reader on your computer? Would your website even fit in 1.44MB?

What is the message that you're conveying with this icon?

Health

⚕️

What does a snake twisted around a rod have to do with health? What does this icon say to people without a a detailed knowledge of Greek mythology?

Email

📧 📨 ✉️

Does email come in an envelope? How many envelopes do you get which are white squares with elongated lips? Is the metaphor still relevant?

Telephone

📞 ☎️️ Ask someone under the age of 25 to draw a picture of a telephone. Here's a hint, they're not going to draw either of those two icons!

A few years ago most people would have drawn something like:

Today, telephones are black rectangles.

Search

🔍 🔎

Unless you are a 19th Century detective, I find it hard to believe that you've ever examined the world with a magnifying glass. How has this become the default search icon?

Please Wait

⌛ ⏳

Tell me honestly - when was the last time you used an hourglass?

Perhaps you boil an egg with the precision only sand tumbling to its doom can provide, I certainly don't. It is interesting that most major Operating Systems have rejected this in favour of a more abstract animation.

Responsible Icon Choice

Under some circumstances, it may be sensible to localise an icon based on cultural differences. For example, these could all be substituted depending on the user's demographic:

🏣 🏤 📮 📩

Icons introduce ambiguity. Please remember your cultural biases when you pick a symbol - lest you confuse any of your users who are birds.

🐦🦆🦃🐤🐓🐥🦅🦉🐧🐔🐣🕊️

I was originally going to use this method:

Terence Eden is on Mastodon

@edent

Replying to @6byNine@6byNine it is all I've got so far!

---

Mike

@6byNine

Replying to @edent@edent No idea about getting urls, but this may or may not be useful (cmd is also in image alt-text) pic.x.com/jh3yh4yki0

---

but, sadly, gnome-web-photo crashed repeatedly when I tried to use it. It is a typically unloved Linux program, hundreds of bug reports, but no one looking to fix them.

Instead, I used the Scheenshotlayer API - I passed wget the URLs and got back a bunch of full sized screenshots.

wget doesn't name the files nicely - so you just get the full URl as the filename. Here's a quick bash script to rename them all with padded zeroes.

var=1;
for file in *;
do
   printf -v num '%02d' $var ;
   mv ${file} ${num}.png;
   var=$((var+1));
done

OK, so, how do we grab just the parts that we want? Rather than using any fancy image recognition stuff, I measured the area by hand.

And, to cut the image out? ImageMagick to the rescue! Let's grab a rectangle 624 pixels wide, but 900 tall, starting at 400 pixels from the left and 0 pixels from the top.

convert tweet.png -crop 624x900+400+0 +repage cropped.png

The +repage is needed to prevent offsetting issues.

And, to do that for all images in a directory:

mogrify -crop 624x900+400+0 +repage *.png

Right! Let's lay these out. Without a doubt, the simplest way is using ImageMagick's montage command.

montage *.png -tile 4x10 -geometry +0+0 montage.png

This lays out all the images on a grid 4 images wide and 10 high. The -geometry ensures there is no border around the image.

I then resized the image suitable for sticking on a web page.

The result?

TODO

The only rough spot in this process is cropping the images. At the moment, there's a lot of empty space around the Tweets. Some - with smaller photos - have gaps at the top and bottom. A more intelligent method of extracting the information is needed!

Get The Fonts

If your computer doesn't have the requite font, install the latest version of Symbola.

Simply open up the .zip file, double click on the .ttf font, then choose "Install".

Find The Character

You almost certainly have the GNU CharMap app installed. If not, run apt-get install gucharmap.

You'll find it in "Accessories" or by running charmap from the terminal.

On the left hand side, you'll see a list of all the Unicode Block. Scroll down to "Emoticons":

Or "Miscellaneous Symbols"

Click on the character you want, then press CTRL+C to copy them to your clipboard.

You can also search through all the character names if you're not sure where it lives.

Enjoy!

😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏