Drawing pictures with text (the joys and annoyances of Unicode and Ascii text).

For reasons that are not entirely clear to me, I have a bit of a soft spot for symbols and pictures in text based updates. More often than not this is done using Unicode – no doubt you’ve seen people (let’s face it, they are usually beliebers!) who include hearts, squiggles, smiley faces and weird letters in their twitter “real names”.

The ability to add these is because Twitter, Facebook et al support non western character sets…so they have to support a wide range of Unicode characters. A cool side effect is that your tweet or Facebook post can contain symbols that aren’t normal characters…

I have played with a couple of the simple symbols in the past – adding musical notes to tweets:

or umbrellas (?) to tweets about the weather. I have also seen people use the telephone symbol (?) to save the letters required to type “telephone” or “call”. This principle is taken to high art by the twitterarti such as Tw1tt3rart:

who inspired a Halloween attempt from me:

Since mid March 2013 Twitter has supported line breaks on the twitter.com website (with the implication that other twitter clients – many of whom already did – should also support them). This makes creating twitterart with Unicode far easier – previously you had to force the line break by creating a “word” over half the width of the window (16 characters). However, they haven’t implemented line breaks in embedded tweets – compare the screengrab on the left with the embedded tweet on the right (and note that these won’t look the same in every twitter client):

Easter Bunny Twitterart by Tw1tt3rart

Easter Bunny Twitterart by Tw1tt3rart

Before I get to some hints and tips on doing this kind of work, there are a couple of other examples of great twitter art to share…

  1. The @WSJ account (Wall Street Journal) tweeted graphs made out of blocks (similar to those annoying “summer loading…56% complete” tweets).
  2. The Smart Car twitter account for Argentina launched with an AMAZING ASCII  “flickbook” effect. You can still see the tweets today if you scroll past their more recent tweets (hint, press J to scroll through them all and get the effect, or just watch the youtube video!)
  3. I have also tried some on my own account. This one was to celebrate International TableTop day:
    A tweet for International Table Top Day

    A tweet for International Table Top Day

  4. This was to suggest Battenburg (the chequer pattern on the side of a police car) to promote an event for emergency service workers:
  5. And I made this QR code completely out of unicode characters for Facebook (it was too many characters for Twitter). Remarkably it scans OK! It would also work in LinkedIn – perhaps as a clever (or annoying) end to the “Summary” section? Each character is two blocks in the QR code on top of each other. I spent a long time searching for a space that was the same width as the blocks, but couldn’t find one (which you need in order for them to line up). That’s why I used the light grey square instead.
    A QR code made out of Unicode that I posted on Facebook.

    A QR code made out of Unicode that I posted on Facebook

Hints, tips and links for doing it yourself…

  1. Don’t rely on it looking good in all browsers, and all clients. Not every system will show every shape. For instance…the QR Code above works fine in Facebook on Chrome, but the shape (2580) with a black top and a white bottom doesn’t show in the Facebook app on my android phone.
  2. Even if the client shows the shape, don’t rely on it being the same (relative) dimensions. For instance the “Boo” tweet above lines up perfectly in a twitter timeline, but not when it’s embedded!:

    Screengrab of the "boo" tweet in the timeline.

    Screengrab of the “boo” tweet in the timeline.

  3. There is a funky little website called pixidraw.com that helps you to create twitterart that is widely supported by most browsers/clients.
  4. There is also a cute list of some of the most common characters you might want in twitter at http://twsym.com/
  5. To see (and use) every Unicode character you could ever think of, take a browse through http://www.branah.com/picker. I did the QR code in that, with the picture of the QR code open in another tab, and a post it note stuck over the top so I could concentrate on the row I was encoding!
  6. If Branah.com is a little too much, and you just want a couple of pretty characters, check out these Wikipedia pages for a good place to start/copy and paste from:
  7. You can add Unicode straight from the keyboard (if you know the shortcut – it usually involves the Alt key (windows) or Option key (mac) but it is a lot easier to copy and paste it from the internet or your computers character map.
  8. You can also use Unicode on your website (use unicodetools.com to convert Unicode to HTML). However, WordPress doesn’t support Unicode at all out of the box (apparently you need to make a change to the config file. This post would contain more examples if I hadn’t left my server password at home, thus making me unable to use Unicode in the text itself!).
  9. Unicode is not the only way to get pretty pictures in your text based updates – Facebook also includes some emoticons that render as images on the web based client. These originally only worked in the chat window, but now work in comments and messages too…(though annoyingly not in status updates)
  10.  TEST IT WIDELY. If your campaign relies on using these sort of images, check it on a spare account, in lots of different browsers and know how it will degrade (and how that will affect your campaign). One of my favourites is to tweet a tick list using the tick in a box (unicode &#9745) because it degrades into an empty box (which still looks fine in the context of a tick list) if the tickbox isn’t supported!

I hope you enjoyed this post – let me know of any other cool examples you might have in the comments section below.

2 comments to Drawing pictures with text (the joys and annoyances of Unicode and Ascii text).

  • While not Unicode, the latest thing that has started appearing on Twitter is Emoji. These special characters rely on the device that uploads them, and the device that reads them, having the fonts installed (mostly this means having an iPhone).

    Luckily, for those of us that don’t use iPhones, there is a really helpful translation service available here: http://www.iemoji.com/

    You can also see what the symbols will look like on different devices here: http://apps.timwhitlock.info/emoji

  • I don’t know if you ever found this out, but I fell over the “ideographic space” (Unicode U+3000) which is a space that is as wide as an ideograph. Whatever one of them is… but it makes things line up!

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>