ASCII art in email

Jim Ducharme contacted me over Xmas, asking about ASCII art support. While I'm guilty of using this ~~cow with horns~~ reindeer in my sig occasionally. I'd never looked at how it renders beyond a few clients.

___ ___ ___ ___

/\ \ /\__\ /\ \ ___ /\__\

/::\ \ /::| | /::\ \ /\ \ /:/ /

/:/\:\ \ /:|:| | /:/\:\ \ \:\ \ /:/ /

/::\~\:\ \ /:/|:|__|__ /::\~\:\ \ /::\__\ /:/ /

/:/\:\ \:\__\ /:/ |::::\__\ /:/\:\ \:\__\ __/:/\/__/ /:/__/

\:\~\:\ \/__/ \/__/~~/:/ / \/__\:\/:/ / /\/:/ / \:\ \

\:\ \:\__\ /:/ / \::/ / \::/__/ \:\ \

\:\ \/__/ /:/ / /:/ / \:\__\ \:\ \

\:\__\ /:/ / /:/ / \/__/ \:\__\

\/__/ \/__/ \/__/ \/__/

Support

It looked fine almost everywhere I tested, under a range of browsers. The only clients it looked skewed in, were MobileMe and Symbian S60.

Support for ASCII art with pre tag

Email clients

Outlook 2000 & 2003 Yes

Gmail Yes

Hotmail Yes

AOL Yes

Outlook 2007, 2010 & XP Yes

Thunderbird Yes

YahooMail! Yes

MobileMe Kinda

Apple mail Yes

Lotus 6.5- 8 Yes

Facebook Messages Yes

Mobile

iPhone Yes

iPad Yes

Kindle Fire Yes

Android 2.2 Yes

BB Yes

Windows Yes

ASCII into clean HTML

If you copy from Notepad into HTML, it collapses, as it doesn't retain the spacing. If you save HTML from Word, it retains the spacing but adds excess code and styling in the header. Eventually I copied from Notepad into HTML, but wrapped the ASCII in a <pre> tag, which maintains preformatted text.

Ascii art support in email

iPhone

Using the spacing character nbsp instead of the pre-tag, wide layouts wrap and become jumbled on the iPhone (below left). Once I narrowed the width, it rendered fine. Though the pre tag is more reliable.

Ascii art support in email

ASCII with marquee tag?

I couldn't resist...not only does it render with images off but the file size is only 1.3K. I've only seen two emails, using the marquee tag.

                                     ,-~ |
        ________________          o==]___|
       |                |            \ \
       |________________|            /\ \
  __  /  _,-----._      )           |  \ \.
 |_||/_-~         `.   /()          |  /|]_|_____
   |//              \ |              \/ /_-~     ~-_
   //________________||              / //___________\
  //__|______________| \____________/ //___/-\ \~-_
 ((_________________/_-o___________/_//___/  /\,\  \
  |__/(  ((====)o===--~~                 (  ( (o/)  )
       \  ``==' /                         \  `--'  /
        `-.__,-'       Vespa P-200 E       `-.__,-'

Fonts

Use a mono-spaced font like Courier New, which uses uniform spacing between each character. One problem with generating ASCII from a photo - besides being naff and your HTML possibly exceeding 100K - is you can't control the output. The resulting, "image" can looked warped in different clients. I also used charset=UTF-8.

{ I look wide under iOS and elongated in Outlook 07 with img converter }

Ascii art support in email

,---,/// Snippet text

You may want to place some copy before the ASCII, otherwise it will show up in the snippet text.

{ Gmail snippet text }

Old school

My favorite ASCII art uses as few characters as possible, its minimal and lite. Though I've a hankering to mix ASCII and imagery. If you want to delve more, I've listed some resources below.

                            ,
                           //\
                          / | ;
                          | /_|
                        .-"`  `"-.
                      /`          `\
                     /              \
               .-.,_|      .-""""-. |
              |     `",_,-'  (((-. '(
               \ (`"=._.'/   (  (o>'-`"#
    ,           '.`"-'` /     `--`  '==;
   /\\            `'--'`\         _.'~~
  / | \                  `.,___,-}
  | |  |                   )  {  }
   \ \ (.--==---==-------=' o {  }
    ",/` (_) (_)  (_)    (_)   \ /
     / ()   o   ()    ()        ^|
     \   ()  (    () o        ;  /
      `\      \         ;    / } |
        )      \       /   /`  } /
     ,-'       |=,_   |   /,_ ,'/
     |    _,.-`/   `"=\   \\   \
     | ."` \  |        \   \`\  \
     | |    \ \         `\  \ `\ \
     | |     \ \          `\ \  \ \
     | |      \ \           \ \  \ \
     | |       \ \           \ \  \ \
     | |        \ \           \ \  \ \
     | |         ) \           \ \  ) \
 jgs `) \        ^ww            ) \ ^ww
      ^ww                       ^ww

Inspiration

www.heartnsoul.com/keyboard_art.htm#Gallery »

www.story.en.utf8art.com/ »

www.chris.com/ascii/ »

Converters

www.network-science.de/ascii/ (Created the text at the the top of this page) »

www.degraeve.com/img2txt.php (Photo to text converter) »

Tutorials

www.ascii-art.de/info/tut_jro.txt »

Related

Using HTML symbols in email

img-html app and pixel art in email

Posted 2012-01-23 17:59:21