How to present ascii art in webpages

    Subject: Re: Converting Ansi art to Html pages?
       Date: Mon, 09 Nov 1998
       From: Veronica Karlsson <>
 Newsgroups: alt.ascii-art

Lester5374 wrote:
> El ito wrote:
> >Is there an easy way to do this?
> [ 8< snip of off-topic part 8< ]
>      For ASCII, just paste the pictures onto your page and then make it
> preformatted text.

Not quite as simple as that, but almost.  :)

OK, here's a short description of how to do this so that it works in
everything from Lynx to M$IE4.


If you just want the pictures _available_on_the_web_ you can save them
in a plain-text file (usually called "filename.txt" or "filename.asc")
and link to it from your html document. No special codes needed.

An example:


This is a very good way to present ascii art on the web. In a sense it is the
only way to present ascii art on the web and still concider it "pure" 


If you want to put them in an html page you need to do the following:

1. Replace all   &   characters with   &amp;
   Replace all   <   characters with   &lt;
   (if you want to you can also replace all   >   characters with  &gt; )

2. Put <PRE> at the beginning and </PRE> at the end.

An example:


This is also a very good way to present ascii art on the web. It may not be 
quite as "pure" as a raw text file, but it can easily be "converted back" to
"pure" ascii with a simple copy-and-paste.


If you want to move even further away from the "pure" format and add colour to
the images (this is quite ok to do on the web) you want to add a stylesheet.

The first example is very similar to the html page without stylesheet. It just
adds colour to the text, background and links. I also chose to make the text
bold with the stylesheet (note: this way you will get bold in CSS enabled 
browsers without causing lynx to show everything as underlined):


(This is the way I do it on my homepage.)


The second example shows the picture with a different background colour than
the rest of the page (this method requires the picture to be "padded" with
spaces to make a straight right edge. This can be a bit expensive as it adds
a lot of bytes to the file size):



The third example shows the picture with colours:


(note: all three of these examples will look identical to to the first html
example in non-CSS-enabled browsers)


The old method of using <font color="#xxyyzz"> and <b> to get the effects
described above is now considered to be outdated and stylesheets ("CSS") 
should be used instead. If you use a text editor with a "find and replace"
function it shouldn't be too difficult to change your coloured html text art
to use stylesheets.

I have also put the example files in a zip file that you can download and

[I'm no expert at CSS. There may be some errors in the CSS in the pages
above. The html is correct though]

              _    __   __                _             _
  __   ___.--'_`.  \ \ / /__ _ _ ___ _ _ (_)__ __ _   .'_`--.___   __
 ( _`.'. -   'o` )  \ V / -_) '_/ _ \ ' \| / _/ _` | ( 'o`   - .`.'_ )
 _\.'_'      _.-'    \_/\___|_| \___/_||_|_\__\__,_|  `-._      `_`./_
( \`. )    //\`                                         '/\\    ( .'/ )
 \_`-'`---'\\__,     ,__//`---'`-'_/
  \`        `-\             /-'        '/
   `  ascii art chat:   '