How to present ascii art in webpages

    Subject: Re: Converting Ansi art to Html pages?
       Date: Mon, 09 Nov 1998
       From: Veronica Karlsson <vk@ludd.luth.se>
 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:

simple.txt

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

------------------------------------------------------------------------------

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:

plain.html

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):

with_style1.html

(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):

with_style2.html

---------

The third example shows the picture with colours:

with_style3.html

(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
study:

webpage.zip


[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`   - .`.'_ )
 _\.'_'      _.-'    \_/\___|_| \___/_||_|_\__\__,_|  `-._      `_`./_
( \`. )    //\`                                         '/\\    ( .'/ )
 \_`-'`---'\\__,      http://www.ludd.luth.se/~vk/     ,__//`---'`-'_/
  \`        `-\            e93-vkn@sm.luth.se           /-'        '/
   `  ascii art chat: http://www.ludd.luth.se/~vk/cgi/asciichat/   '

plain.html
simple.txt
style1.css
style2.css
style3.css
webpage.zip
with_style1.html
with_style2.html
with_style3.html