So you want to use ASCII-art in your website

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....

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

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

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

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

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

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

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.

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

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 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,

Here, between each ----line---- , 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.
```
-------------------------dotted line-------------------------
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:25%;
margin:auto;
padding:5px;
text-align:center;
border:10px double #ff0;
}
-------------------------dotted line-------------------------
```
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.
```
-------------------------dotted line-------------------------
<!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>
-------------------------dotted line-------------------------
```
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.

-------------------------dotted line-------------------------
<!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>
[...]

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

[...]
</body>
</html>
-------------------------dotted line-------------------------

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.

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,

Here, between each ----line---- , are the changes you would make to your stylesheet.

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 .

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.

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.

So you want to use ASCII-art in your website and aren't sure of the HTML coding?

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