HTML for ASCII-art

by llizard (aka ejm)

So… you want to use ASCII-art on your website & aren’t sure of the HTML coding?

revised August 2000, October 2003, March 2007, August 2008

               /
       \\      \,^%---
       |\\      <_ \ Fear not. It's quite simple....
      ---- ==   >/
     [_____]  __>,^
ejm   |   |  //| |

Warning! I do not claim to be an expert in HTML. But the following HTML and CSS instructions for placing ASCII-art on an HTML page do work, as well as passing the rigorous XHTML and CSS validation tests. They have been checked in Firefox 1.5, 2.0 & 3.0, MSIE 5.5, 6.0 & 7.0, Opera9.5, Navigator 9, Safari 2 & 3 for Windows, Linux and Mac OS’s as well as whatever Lynx version the Toronto Freenet uses. In short, this coding method should work for all the later browsers and many of the earlier ones. (Of course, the colours most definitely do not work in Lynx.)

Even if you don’t plan to draw any pictures with ASCII characters, this technique is particularly good for displaying charts, such as the ASCII character chart on this site….

Your             
                 
  /\ (`/`|| _     +
 /--\,)\,||   (||`|
                 
        goes here

To get the above, here is what you type into your html document:

<pre>

Your             
                 
  /\ (`/`|| _     +
 /--\,)\,||   (||`|
                 
        goes here

                
</pre>

To display the following characters > (greaterthan), & (ampersand) and < (lessthan), you should replace them with character entities:

type > instead of >
type & instead of &
type < instead of <

Here is an example of ASCII-art using the characters >, & and <

     "", &&&
     / && * >
    /  && _C ,""     EEeeee
    \  )(    /
     \   \__/
      ) (
     (  |
  |   \ |
  |    \|
  |   /_|
  |  /  |
  |__)__)__
  |        |  
  |        |             oo__
  |        |            <;___)------
  | ejm    |       oo__   " "
                  <;___)------     oo__
                    " "           <;___)------
                                    " "

To get the above drawing, copy the text below into your html document. Don’t worry that it looks distorted in your text editor. It will come out correctly on the web.

<pre>
     "", &amp;&amp;&amp;
     / &amp;&amp; * &gt;
    /  &amp;&amp; _C ,""     EEeeee
    \  )(    /
     \   \__/
      ) (
     (  |
  |   \ |
  |    \|
  |   /_|
  |  /  |
  |__)__)__
  |        |  
  |        |             oo__
  |        |            &lt;;___)------
  | ejm    |       oo__   " "
                  &lt;;___)------     oo__
                    " "           &lt;;___)------
                                    " "

</pre>

Please take a look at a chart of the standard ASCII characters.

If you want to center the whole thing, like this,

: Your                :
:                     :
:   /\ (`/`|| _     + :
:  /--\,)\,||   (||`| :
:                     :
:         goes here   :

Ensure that all your lines are the same length – including any white space. (This will not center in Lynx.)

Here is what you should type into your HTML document.

<center>
<pre>
: Your                :
:                     :
:   /\ (`/`|| _     + :
:  /--\,)\,||   (||`| :
:                     :
:         goes here   :
</pre>
</center>

But as I said, it won’t necessarily be centered in all browsers. Why? … just because.

You may be able to center it in some stubborn browsers by using CSS:

! Your                !
!                     !
!   /\ (`/`|| _     + !
!  /--\,)\,||   (||`| !
!                     !
!         goes here   !

The following coding would be placed in your stylesheet (more on that in the following section on adding colour). As long as the width is set to less than 100%, and the margins are set to "auto", the ASCII-art should become centered on the page.

.center_me_on_page {text-align:center; width:99%; margin:auto;}

And the following class="center_me_on_page" would be added to the coding on your HTML page:

<pre class="center_me_on_page">
! Your                !
!                     !
!   /\ (`/`|| _     + !
!  /--\,)\,||   (||`| !
!                     !
!         goes here   !
</pre>

Heh, as I said, it should become centered…. However, once again, there is still no guarantee that it will be centered in all browsers. That’s just the way that computers are. There isn’t really much sense in breaking your back to get it to work in every possible situation. All you can do sensibly is get it to look the way you want in as many browsers as you have access to (concentrate on the most popular, such as Firefox, Internet Explorer, Safari, etc. and hope for the best. To help you, there is a wonderful service at http://www.browsershots.org that will give you screenshots of your page in several different browsers.

And if you want to add colour, you can do it with style sheets as well.

It can only be viewed by the later MSIE and Netscape browsers (version 4 and up) that have “style sheets” enabled. Some code goes between <head> and </head> and there is a little additional coding in the body section as well.

To get the following,

  Your                 
                       
    /\ (`/`|| _     +  
   /--\,)\,||   (||`|  
                       
          goes here

Here is what you should type for your html document. Please note that this is a three step process.

First, open up a text file to create your stylesheet.
```
pre {font-family:monospace !important;}

.red {background:transparent; color:#f00;}
.green {background:transparent; color:#060;}
.blue {background:transparent; color:#009;}

.white {
background:#fff;color:#000;
width:45%;
margin:auto;
padding:5px;
text-align:center;
border:10px double #ff0;
}
```
Save this as “ascii-art_style.css” and place the file in your ascii-art folder. You may have noticed pre {font-family:monospace !important;} at the top there. This probably isn’t absolutely necessary. However, there are some wags out there who play fast and loose with font choices. It’s absolutely essential that <pre> renders a fixed width font so that ASCII-art doesn’t just look like a jumbled mess of characters.
Second, open your HTML file in a text editor. Somewhere between <head> and </head>, type the following code that you see between the double dotted lines.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>coloured ASCII-art</title>
:::::::::::::::::::double dotted line:::::::::::::::::::

<link rel="stylesheet" href="/ascii-art/ascii-art_style.css" type="text/css" />

:::::::::::::::::::double dotted line:::::::::::::::::::
</head>
```
Please remember to add the final slash in the style tag with doctype XHTML so your page will validate. Note that when you call up the file with href="/ascii-art/ascii-art_style.css" (note the included leading slash and folder name along with the file name), you can use this stylesheet on any page and in any folder of your site and the ascii-art_style stylesheet will take effect.

Third, still in the HTML file, somewhere under <body>, type the following code that you see between the double dotted lines. Save the file as “ascii-art.html” (or whatever name you like; just ensure that the extension is “.html”) and place the file in your ascii-art folder.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>coloured ASCII-art</title>
<link rel="stylesheet" href="/ascii-art/ascii-art_style.css" type="text/css" />
</head>
<body>
[...]
:::::::::::::double dotted line::::::::::::::

  Your                 
                       
    /\ (`/`|| _     +  
   /--\,)\,||   (||`|  
                       
          goes here    


:::::::::::::double dotted line::::::::::::::
[...]

</body>

</html>

Let’s say you want to have one example of your ASCII-art on a black background and the rest on white.

To get the following,

  Your                 
   (white background)  
    /\ (`/`|| _     +  
   /--\,)\,||   (||`|  
                       
          goes here

  Your                 
   (black background)  
    /\ (`/`|| _     +  
   /--\,)\,||   (||`|  
                       
          goes here

Here are the changes you would make to your stylesheet.

/* everything except the background colour and default text will be the same */
.red {background:transparent; color:#f00;}
.green {background:transparent; color:#060;}
.blue {background:transparent; color:#009;}

.white, #black {
background:#fff;color:#000;
width:25%;
margin:auto;
padding:5px;
text-align:center;
border:10px double #ff0;
}
/* change the background colour from white to black
and default text colour from black to white */
#black {background:#000;color:#fff;}

/* change to a lighter shade of blue for the black background */
#black .blue {background:#000; color:#06f;}
#black .green {background:#000; color:#393;}

And this is what you would place in your HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>coloured ASCII-art</title>
<link rel="stylesheet" href="/ascii-art/ascii-art_style.css" type="text/css" />
</head>
<body>
[...]
:::::::::::::::::::double dotted line:::::::::::::::::::
<div class="white">
<pre>
  <span class="red">Your</span>                 
   (white background)  
    <span class="grn">/\ (`/`|| _     +  
   /--\,)\,||   (||`|</span>  
                       
          <span class="blu">goes here</span>    
</pre>
</div>

:::::::::::::::::::double dotted line:::::::::::::::::::

<div id="black">
<pre>
  <span class="red">Your</span>                 
   (black background)  
    <span class="grn">/\ (`/`|| _     +  
   /--\,)\,||   (||`|</span>  
                       
          <span class="blu">goes here</span>    
</pre>
</div>
:::::::::::::::::::double dotted line:::::::::::::::::::

[...]
</body>

Please note that you can only have ONE id per page. If you plan to have more instances of black background ascii-art, use class instead.

And speaking of the idiosyncracies of some browsers, the people who are in charge of MSIE’s development are children of the universe and like to do whatever they want. Luckily, you can specify coding and text that are JUST for IE viewers. Simply place whatever it is you want IE viewers to see between .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>coloured ASCII-art</title>
<link rel="stylesheet" href="/ascii-art/ascii-art_style.css" type="text/css" />
<!--[if IE]>
<style type="text/css">
/*The following will be seen only by those viewing with IE*/
#black {
background:#fff;color:#000;
width:30%;
</style>
<![endif]-->
</head>
<body>
[...]
<body>
</html>

Please consult a colour chart for hexadecimal numbers. Don’t forget to put </span> when you want to change colours. Of course, this method may be foiled by people who like to change the background or text colours of any webpage they are viewing. But, it is their loss if they choose not to see your stunningly coloured ASCII-art.

I hope all that helps you!


                     \ 
                      \,^^%---
                      <\/  \ See? It's easy when you know how....
                      >
                      >^^
                     /| 
ejm                  | \

For more information about HTML and cascading style sheets, please consult W3Schools Introduction to HTML, W3Schools Introduction to CSS, HTML Dog: HTML Beginner Tutorial and/or HTML Dog: CSS Beginner Tutorial.

Many many thanks go to browsershots.org for the fantastic service they offer of testing web design in different browsers and showing the results with screenshots.