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 }

Ascii art support in email

 

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