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:

21 days till the Olympics are here ? 21 days to go ? Before they arrive ? Follow @gosurreylive ? 21 days to go! ? Tune: 10 green bottles #FF

— Surrey Police (@SurreyPolice) July 6, 2012

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:

????????????????????????????????????????????????????????????????????????????????????????????????????HAPPY?V?DAY???? #TwitterArt — @tw1tt3rart (@tw1tt3rart) February 14, 2013

who inspired a Halloween attempt from me:

?????????????????Scared?????????????????of?????????????????????Halloween?????????????????????????????????????????delivr.com/1kjue— Surrey Police (@SurreyPolice) October 30, 2012

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 #TwitterArt

— @tw1tt3rart (@tw1tt3rart) March 31, 2013

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:
   

   

4. This was to suggest Battenburg (the chequer pattern on the side of a police car) to promote an event for emergency service workers:
   

   ????????????????????????Work in uniform? Or work with those that do?#FF @bluelightcamp unconference 27/4/2013 – blc13.eventbrite.com
   — Andrew Fielding (@wobable) March 15, 2013

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.
   

   

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!:

   

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:
   • Miscellaneous symbols (includes weather, phone, musical notes and chess pieces)
   • Box drawing characters (includes various blocks and lines)
   • Dingbats (includes stars, arrows, scissors, ticks and crosses)
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.