A QR code built from Emoji

by @edent | # # | 8 comments | Read ~9,750 times.

It’s possible to encode QR images as text. In this case, Emoji!

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

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 21×21 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.

8 thoughts on “A QR code built from Emoji

  1. Alan Bell says:

    tweetable with this lot? ▖▗▘▙▚▛▜▝▞▟ not easy to construct!


  2. Alan Bell says:

    looks like all the bits are there, constructing by hand is tedious!
    ▗▄▄▄
    ▐▗▄▐
    ▐▐█▐
    ▐▄▄▟


  3. Lee says:

    The iPhone (at least) will still detect QR codes using Unicode “quarter” blocks, even though they’re not connected squares. There’s a program, qrencode, that can generate QR codes to the terminal.

    example here: https://www.godo.dev/tutorials/terminal-qr-code-generation/

  4. Chris Midgley says:

    How about unicode block elements? You can get up to 4 black pixels per characters using the quadrant versions. You’d need a light background to work as white, though.

  5. Never thought of using emoji, but I have a Lego QR code in my house that triggers wifi login when scanned. Seems like something you’d build 😉


  6. Richard says:

    Scanned eventually on my Samsung tablet, but took a while of fiddling to make it recognise it. Possibly because the code wasn’t square on my screen


Leave a Reply

Your email address will not be published. Required fields are marked *