Display ASCII Art Properly on Websites and Blogs

Displaying typical monospaced, fixed-width, ASCII art online the way it looked when it was created is a challenge.

After looking online myself at several sites, viewing source code, and trying things out I have working HTML codes (which can be varied). I thought I would share the HTML code for others to include ASCII art on their sites as well.

* Garfield ASCII ART created by Joan G Stark. Her dot com website seems to be invalid (no original links are clickable and has spam text/links all over the page), so I linked to the Geocities account that appears to be the original site.
Publish Post
Example 1
Garfield from Joan G Stark

              .-.,     ,.-.
        '-.  /:::\\   //:::\  .-'
        '-.\|':':' `"` ':':'|/.-'
        `-./`. .-=-. .-=-. .`\.-`
          /=- /     |     \ -=\
         ;   |      |      |   ;
         |=-.|______|______|.-=|
         |==  \  0 /_\ 0  /  ==|
         |=   /'---( )---'\   =|
          \   \:   .'.   :/   /
           `\= '--`   `--' =/'
       jgs   `-=._     _.=-'
                  `"""`  


Example 2
Garfield from Joan G Stark

              .-.,     ,.-.
        '-.  /:::\\   //:::\  .-'
        '-.\|':':' `"` ':':'|/.-'
        `-./`. .-=-. .-=-. .`\.-`
          /=- /     |     \ -=\
         ;   |      |      |   ;
         |=-.|______|______|.-=|
         |==  \  0 /_\ 0  /  ==|
         |=   /'---( )---'\   =|
          \   \:   .'.   :/   /
           `\= '--`   `--' =/'
       jgs   `-=._     _.=-'
                  `"""`  


Example 3
Garfield from Joan G Stark

              .-.,     ,.-.
        '-.  /:::\\   //:::\  .-'
        '-.\|':':' `"` ':':'|/.-'
        `-./`. .-=-. .-=-. .`\.-`
          /=- /     |     \ -=\
         ;   |      |      |   ;
         |=-.|______|______|.-=|
         |==  \  0 /_\ 0  /  ==|
         |=   /'---( )---'\   =|
          \   \:   .'.   :/   /
           `\= '--`   `--' =/'
       jgs   `-=._     _.=-'
                  `"""`  

All three examples above use the same code with variations to the the font-size and line-height.
  • Example 1 uses font-size: 10pt; line-height: 110%;
  • Example 2 uses font-size: 12px; line-height: 99%;
  • Example 3 uses font-size: 12px; line-height: 12px;

Adjusting the line-height to put the text characters on each other without any space set it to line-height: 99%; This will allow the text characters to be solid lines; however, in doing so it squishes the image slightly. It seems to work best if you define the font-size using pixels, such as 12px. -- See Example 2 above.

Here is the HTML code to display ASCII art on your own website -
<pre style="font-family: Fixed, Lucida Console, Andale Mono, Courier New, Courier, monospace; font-size: 10pt; line-height: 110%; letter-spacing: 0pt; margin: 0px; overflow: visible;">
.
ASCII Art Here
</pre>

Copy the code and insert it into your HTML where you want the ASCII art to be displayed. In Blogger when creating/editing a post click the tab Edit HTML and paste the code where you want it.

With the code in your HTML replace the code text ASCII Art Here with your ASCII art. One thing to point out is that the very first line of your ASCII art will be trimmed of any leading spaces.

To fix the problem I used a period . in the code example; however, you can remove the period and insert a text sentence to do the same thing. In my examples I used a link to the original ASCII art, which solved the problem.

You can also add color to the ASCII art as well. Below is an example using a black background color, and a yellow foreground (text) color.

Simple Color Example
Garfield from Joan G Stark

              .-.,     ,.-.
        '-.  /:::\\   //:::\  .-'
        '-.\|':':' `"` ':':'|/.-'
        `-./`. .-=-. .-=-. .`\.-`
          /=- /     |     \ -=\
         ;   |      |      |   ;
         |=-.|______|______|.-=|
         |==  \  0 /_\ 0  /  ==|
         |=   /'---( )---'\   =|
          \   \:   .'.   :/   /
           `\= '--`   `--' =/'
       jgs   `-=._     _.=-'
                  `"""`  

To change the colors just change the HEX/HTML color code to any color you want. If you do not want to specifiy a background color (keeping it the same as your webpage) just delete the code  background-color: #000000;

ASCII Art in simple color code -
<pre style="font-family: Fixed, Lucida Console, Andale Mono, Courier New, Courier, monospace; font-size: 10pt; line-height: 110%; letter-spacing: 0pt; margin: 0px; overflow: visible; background-color: #000000; color: #FFFF00;">
.
ASCII Art Here
</pre>

Advanced Color Example
Garfield from Joan G Stark

              .-.,     ,.-.
        '-.  /:::\\   //:::\  .-'
        '-.\|':':' `"` ':':'|/.-'
        `-./`. .-=-. .-=-. .`\.-`
          /=- /     |     \ -=\
         ;   |      |      |   ;
         |=-.|______|______|.-=|
         |==  0 /_\ 0  /  ==|
         |=   /'---( )---'\   =|
          \   \:   .'.   :/   /
           `\= '--`   `--' =/'
       jgs   `-=._     _.=-'
                  `"""`

The advanced color example uses the same HTML codes as before in the PRE tag; however, to color the characters, HTML coding is used to change colors as needed. The background-color tag is also used to show the colored characters better (alter the Hex/HTML color code as needed).

Complete Advanced Color Example ASCII art of Garfield code -
<pre style="background-color: #000000; font-family: Fixed, Lucida Console, Andale Mono, Courier New, Courier, monospace; font-size: 10pt; letter-spacing: 0pt; line-height: 110%; margin: 0px; overflow: visible;"><span style="color: yellow;">Garfield from </span><a href="http://www.geocities.com/spunk1111/" style="color: yellow;" target="_blank">Joan G Stark</a>

<B><FONT COLOR="#FF6600">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .-.,&nbsp;&nbsp;&nbsp;&nbsp; ,.-.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '-.&nbsp; /</FONT><FONT COLOR="#993300">:::</FONT><FONT COLOR="#FF6600">\\&nbsp;&nbsp; //</FONT><FONT COLOR="#993300">:::</FONT><FONT COLOR="#FF6600">\&nbsp; .-'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '-.\|</FONT><FONT COLOR="#993300">':':'</FONT><FONT COLOR="#FF6600"> `"` '</FONT><FONT COLOR="#993300">:':</FONT><FONT COLOR="#FF6600">'|/.-'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `-./`. .-=-. .-=-. .`\.-`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /</FONT><FONT COLOR="#993300">=-</FONT><FONT COLOR="#FF6600"> /&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp; \ </FONT><FONT COLOR="#993300">-=</FONT><FONT COLOR="#FF6600">\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp; ;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |</FONT><FONT COLOR="#993300">=-.</FONT><FONT COLOR="#FF6600">|______|______|</FONT><FONT COLOR="#993300">.-=</FONT><FONT COLOR="#FF6600">|
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |</FONT><FONT COLOR="#993300">==</FONT><FONT COLOR="#FF6600">&nbsp; </FONT><FONT COLOR="#FFFFFF">\&nbsp; </FONT><FONT COLOR="#666666">0</FONT><FONT COLOR="#FFFFFF"> /</FONT><FONT COLOR="#FFCC99">_</FONT><FONT COLOR="#FFFFFF">\ </FONT><FONT COLOR="#666666">0</FONT><FONT COLOR="#FFFFFF">&nbsp; /</FONT><FONT COLOR="#FF6600">&nbsp; </FONT><FONT COLOR="#993300">==</FONT><FONT COLOR="#FF6600">|
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |</FONT><FONT COLOR="#993300">=</FONT><FONT COLOR="#FF6600">&nbsp;&nbsp; </FONT><FONT COLOR="#FFCC99">/</FONT><FONT COLOR="#FFFFFF">'---</FONT><FONT COLOR="#FFCC99">( )</FONT><FONT COLOR="#FFFFFF">---'</FONT><FONT COLOR="#FFCC99">\</FONT><FONT COLOR="#FF6600">&nbsp;&nbsp; </FONT><FONT COLOR="#993300">=</FONT><FONT COLOR="#FF6600">|
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \&nbsp;&nbsp; </FONT><FONT COLOR="#FFCC99">\:&nbsp;&nbsp; .'.&nbsp;&nbsp; :/</FONT><FONT COLOR="#FF6600">&nbsp;&nbsp; /
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `\</FONT><FONT COLOR="#993300">=</FONT><FONT COLOR="#FF6600"> </FONT><FONT COLOR="#FFCC99">'--`&nbsp;&nbsp; `--'</FONT><FONT COLOR="#FF6600"> </FONT><FONT COLOR="#993300">=</FONT><FONT COLOR="#FF6600">/'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT><FONT COLOR="#000000">jgs&nbsp;</FONT><FONT COLOR="#FF6600">&nbsp; `-=._&nbsp;&nbsp;&nbsp;&nbsp; _.=-'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `"""`</FONT></B></pre>

If you plan to color your ASCII art by varying the colors, the easiest way would be to create your ASCII art and paste it inside the basic ASCII art HTML code -
<pre style="font-family: Fixed, Lucida Console, Andale Mono, Courier New, Courier, monospace; font-size: 10pt; line-height: 110%; letter-spacing: 0pt; margin: 0px; overflow: visible;">
.
ASCII Art Here
</pre>

Then using a HTML editor, Blogger Add/Edit post window, or anything you like - paste the coded ASCII art. Next select the characters you want as the same color and add the color. This is done usually with a button labeled Font Color or in Blogger the button says Text Color. Repeat selecting/coloring the characters.

Once your done coloring the image, select the HTML source and paste it into your website. Remember to alter the background-color tag if needed inside the PRE tag at the beginning.

0 comments:

Post a Comment