gallery of original ASCII-art works by llizard aka ejm

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

character entities

recommended for encoding . standard characters . cautionary tale about extended characters

Because the symbols ” & < > (double quotationmark, ampersand, lessthansymbol and greaterthansymbol) are integral to HTML code itself, you should be replacing all instances of ” & < > that are used for anything other than the code itself. It is also useful to employ character entities to replace characters in e-mail addresses that are entered on your webpages. This helps greatly in preventing robots from mining e-mail addresses for spam purposes. In your HTML coding, replace the character with &#numberofcharacter; (ampersand, hashmark, numberofcharacter, semicolon). Instead of &, you would type &amp;.

edited August 2008

N.B. The folks at w3c now recommend that if accented characters are to be used, the UTF-8 charset be chosen rather than iso-8859-1. But the characters ” & < > (double quotationmark, ampersand, lessthansymbol and greaterthansymbol) should still be encoded, as well as any extended characters you may be using. Put the following coding just before </head>.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

It is probably still a good idea to encode the @ symbol especially if the mailto: link is used. Please see the recommended for encoding section.

(Read more on the w3c Internationalization page.)Note that extended characters can be typed as-is on some blogging platforms. The blog software will translate the characters into character entities as required for viewing correctly on HTML pages, but leave them alone for RSS feeds. (Indeed, in moving these pages to wordpress.com, getting this page to display has been quite challenging. The software wants to automatically changing the coding instructions into the actual characters….)

ASCII stands for “American Standard Code Information Interchange”. The numbers of the characters can be found by referring to the character map on your computer. The characters numbered from #032 to #126 are common to all keyboard systems. (#032 is the spacebar and is not the recommended character entity to depict a non-breaking space.)

recommended for encoding

recommended for encoding . standard characters . cautionary tale about extended characters

characters to be replaced with entities for display in HTML

use these character entities – strongly recommended

Character & Name     Character Entity
_______________________________________
&   ampersand            &amp;      
<   lessthan             &lt;       
>   greaterthan          &gt;       
"   quotationmark        &quot;     
@   at                   &#064;     
©   Copyright            &copy;     

Use &nbsp; to indicate 
a nonbreaking space in HTML.

encoding examples using some of the above characters

extended characters – A Cautionary Tale

recommended for encoding . standard characters . cautionary tale about extended characters

The characters numbered from #127 to #255 (and higher) are not common to all keyboard systems and can look quite different on different operating systems. Please bear that in mind when you use these characters.

Here is an example using the character #189. These will look different depending on whether you are viewing this page on a PC or a Mac or a….

After looking at the character map on my PC, it looks like #189 in “Symbol” font will show a “vertical bar“.

Symbol font #189: ½

But when I look at it here on the webpage, even though this computer has the symbol font installed, I see a “one half” symbol in Netscape7, Firefox and Opera. The “vertical bar” only appears in IE6 and the ancient and little-used NS4. See “standard characters” for the character entity for | (vertical bar)

Here is the character #189 in a “sans-serif” font: ½

In this case, on my PC, as expected, I see a “one half” symbol, but depending on your OS, you might be seeing an asterisk, or the symbol for Pi, or ?, or ….

“wingdings” #189: ½
On my PC, I see an “analogue clock” symbol showing 07:00. But anyone who doesn’t have the wingdings font installed will see “one half” (or maybe an asterisk, or the symbol for Pi, or….)

Moral of the story: It is inadvisable to use specific fonts for symbols. If you really want the characters you use on your website to be viewed relatively globally, it’s a very good idea to follow the guidelines at www.w3.org. If you plan on using extended characters, you might want to use images rather than entities unless you know categorically that your viewers will be able to see them.

standard characters

recommended for encoding . standard characters . cautionary tale about extended characters

These characters will look the same from computer to computer.
(Use a fixed-width font for ASCII-art and charts)

Courier, FixedSys, Monaco and the generic monospace are examples of non-proportional or fixed width fonts and are used for drawing ASCII-art and making charts. It is ill advised to use Times New Roman, Times, Symbol or any other proportional width fonts for drawing ASCII-art or making charts.

   &#032;    3   &#051;    F   &#070;    Y   &#089;    l   &#108;

!   &#033;    4   &#052;    G   &#071;    Z   &#090;    m   &#109;

"   &#034;    5   &#053;    H   &#072;    [   &#091;    n   &#110;

#   &#035;    6   &#054;    I   &#073;    \   &#092;    o   &#111;

$   &#036;    7   &#055;    J   &#074;    ]   &#093;    p   &#112;

%   &#037;    8   &#056;    K   &#075;    ^   &#094;    q   &#113;

&   &#038;    9   &#057;    L   &#076;    _   &#095;    r   &#114;

'   &#039;    :   &#058;    M   &#077;    `   &#096;    s   &#115;

(   &#040;    ;   &#059;    N   &#078;    a   &#097;    t   &#116;

)   &#041;    <   &#060;    O   &#079;    b   &#098;    u   &#117;

*   &#042;    =   &#061;    P   &#080;    c   &#099;    v   &#118;

+   &#043;    >   &#062;    Q   &#081;    d   &#100;    w   &#119;

,   &#044;    ?   &#063;    R   &#082;    e   &#101;    x   &#120;

-   &#045;    @   &#064;    S   &#083;    f   &#102;    y   &#121;

.   &#046;    A   &#065;    T   &#084;    g   &#103;    z   &#122;

/   &#047;    B   &#066;    U   &#085;    h   &#104;    {   &#123;

0   &#048;    C   &#067;    V   &#086;    i   &#105;    |   &#124;

1   &#049;    D   &#068;    W   &#087;    j   &#106;    }   &#125;

2   &#050;    E   &#069;    X   &#088;    k   &#107;    ~   &#126;

#032 is the space bar.

Some people prefer named entities rather than
numbered because they are easier to remember.

"  quotation mark      &#034;  or   &quot;   
&  ampersand           &#038;  or   &amp;    
'  single quote        &#039;  or  &apos;    
<  less than           &#060;  or   &lt;     
>  greater than        &#062;  or   &gt;     

N.B. apos; is NOT fully supported.
Use #039; instead

 

Other charactersets can be found at www.w3.org – Internationalization page.

© llizard (aka ejm) 1998, 2000, 2001, 2003, 2004, 2005, 2006, 2008, 2015

(Yes, the above © symbol is displayed on this page by using the entity &copy;)


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