So… you want to use ASCII-art on your website & aren’t sure of the HTML coding?
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 is what you type into your html document:
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.
"", &&& / && * > / && _C ,"" EEeeee \ )( / \ \__/ ) ( ( | | \ | | \| | /_| | / | |__)__)__ | | | | oo__ | | <;___)------ | ejm | oo__ " " <;___)------ oo__ " " <;___)------ " "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.
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.
And the following class="center_me_on_page" would be added to the coding on your HTML page:
class="center_me_on_page"> ! Your ! ! ! ! /\ (`/`|| _ + ! ! /--\,)\,|| (||`| ! ! ! ! goes here !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
and and there is a little additional coding in the body section as well.Here is what you should type for your html document. Please note that this is a three step process.
. double dotted line. /> . double dotted line.[. ] . double dotted line.Your /\ (`/`|| _ + /--\,)\,|| (||`| goes hereLet’s say you want to have one example of your ASCII-art on a black background and the rest on white.
Your (white background) /\ (`/`|| _ + /--\,)\,|| (||`| goes hereYour (black background) /\ (`/`|| _ + /--\,)\,|| (||`| goes hereHere are the changes you would make to your stylesheet.
/* everything except the background colour and default text will be the same */ .red .green .blue .white, #black /* change the background colour from white to black and default text colour from black to white */ #black /* change to a lighter shade of blue for the black background */ #black .blue #black .green
And this is what you would place in your HTML file:
[. ] . double dotted line.Your (white background) /\ (`/`|| _ + /--\,)\,|| (||`| goes here. double dotted line.
id="black">Your (black background) /\ (`/`|| _ + /--\,)\,|| (||`| goes here. double dotted line. [. ]
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 . double dotted line.
-------------------------dotted line------------------------- Secondly, somewhere under , type the following code that you see between the double dotted lines. -------------------------dotted line-------------------------
[. ] . double dotted line.. double dotted line. [. ]Your /\ (`/`|| _ + /--\,)\,|| (||`| goes herePlease consult a colour chart for hexadecimal numbers. Don't forget to put 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.
For more information about style sheets, please consult Mulder's Style Sheet Tutorial and CSS Pointers Group.
I hope all that helps you!
\_,^^%--- <\_ \ See? It's easy when you know how. > >^^ /| ejm | \© llizard 1997, 1998, 2000-2001, 2003, 2007 ( last modified 18 August 2008)