gallery of original ASCII-art works by llizard aka ejm

Category: FAQ

HTML for ASCII-art

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.

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

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

  3. 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 <!--[if IE]> and <![endif]-->.

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

© llizard 1997, 1998, 2000-2001, 2003, 2007, 2008 (last modified 13 August 2008)


FAQ | Copyright Myths | ASCII characters chart | character entities | putting ASCII-art on a webpage | “internet safe” colours | choosing colours

ASCII characters chart

Here is a chart of standard ASCII characters to be used if you are going to post your ASCII-art in the newsgroup alt.ascii-art. You can copy and paste it into your text editor to ensure that you have the right kind of font.

Examine the chart carefully. Note that there are no characters that look like ¤ § « ¿ ¶ Þ ¥ ´ or any letters with accents. Please read the cautionary tale about extended characters.

 ======================================
 }       ASCII Character Chart        {
 ======================================
 }|                                  |{
 }| This chart should be symmetrical.|{
 }| If it isn't, change your font    |{
 }| til the e's and the m's line up. |{
 }|                                  |{
 }| eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee |{
 }| mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm |{
 }|                                  |{
 }|  SP   !   "   #   $   %   &   '  |{
 }|   (   )   *   +   ,   -   .   /  |{
 }|   0   1   2   3   4   5   6   7  |{
 }|   8   9   :   ;   <   =   >   ?  |{
 }|   @   A   B   C   D   E   F   G  |{
 }|   H   I   J   K   L   M   N   O  |{
 }|   P   Q   R   S   T   U   V   W  |{
 }|   X   Y   Z   [   \   ]   ^   _  |{
 }|   `   a   b   c   d   e   f   g  |{
 }|   h   i   j   k   l   m   n   o  |{
 }|   p   q   r   s   t   u   v   w  |{
 }|   x   y   z   {   |   }   ~      |{
 }|                                  |{
 }|      SP stands for Space bar     |{
 }|                                  |{
 }| Please use only the characters   |{
 }| that are on this chart if you    |{
 }| are going to post your creations |{
 }| in the newsgroup alt.ascii-art!  |{
 }|                                  |{
 ======================================

In fact, you might think the characters at your disposal are rather dull. Drawing ASCII-art can be likened to writing a sonnet or haiku. It is very challenging to confine yourself to these few characters to create pictures that look like anything at all. But lots of people have managed it very well. You can see for yourself by going to a page of links to other ASCII-art sites.

Naturally, you are all children of the universe and will want to use characters that are not on that chart; you should feel free to type out keyboard art using many different fonts and characters. Exchange your creations with your e-friends via e-mail or put them on your webpage but PLEASE do not post any nonstandard keyboard art in the newsgroup alt.ascii-art because not only will you cause and/or receive a lot of grief, the nonstandard characters you have chosen will not look the same to other people as they do to you.

If you wish to know the numbers of the characters, there is a character chart of character entities, but you must agree not to use extended characters in the ASCII-art that you plan to publish in the newsgroup alt.ascii-art.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Remember! If you are planning to post your ASCII art in the newsgroup alt.ascii-art, please do the following:

(Depending on your browser, the following illustration may not make sense to you. It’s not my fault, or yours for that matter, but the various browser programmers’ faults for not standardizing things a long time ago!)

Copy the following e’s and m’s

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

into whatever text editor you are using to create your ASCII art.

If the lines look uneven like this:

proport_em_line

you need to change your font. However, if the lines are the same length and look like this:

fixed_em_line

Congratulations! You are using the correct font.

Do you still have questions? Please go to alt.ascii-art FAQ by Matthew Thomas for the full picture.

I have made a page of instructions for how to put your ASCII-art onto your website.


FAQ | Copyright Myths | ASCII characters chart | character entities | putting ASCII-art on a webpage | “internet safe” colours | choosing colours