llizard's gallery of ASCII-art and ASCII-animation ^^7^^^7^%<
recommended for encoding . standard characters . a few extended characters . cautionary tale about extended characters . encoding examples
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 &. There are examples of HTML code using character entities at the bottom of the page.
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.
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.
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 . standard characters . a few extended characters . cautionary tale about extended characters . encoding examples
use these character entities - strongly recommended
Character and Name Character Entity _______________________________________ & ampersand |
encoding examples using some of the above characters
recommended for encoding . standard characters . a few extended characters . cautionary tale about extended characters . encoding examples
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.
recommended for encoding . standard characters . a few extended characters . cautionary tale about extended characters . encoding examples
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.
Some people prefer named entities rather than numbered because they are easier to remember. " quotation mark |
recommended for encoding . standard characters . a few extended characters . cautionary tale about extended characters . encoding examples
You may see something entirely different, depending on your character set. Some people prefer to use named character entities rather than numbered. I have shown both in the following table. However, some browsers may not render the named character entities. For instance, NS4 (yes, yes, I know that is an obsolete browser but there are still a few floating around) does not render ˆ (circumflex) with the named entity ˆ (one sees the character entity rather than the character) but it does render ˆ using the equivalent numbered entity ˆ. NS4 does not render tilde ˜ with the named entity ˜ but does render ˜ using the numbered entity &732;. (Those last sentences may look like nonsense to you because your system does render the letter entities.) On some browsers, the unsupported character may show up as a ? (question mark) or a hollow rectangle.
These are arranged with the numbered entities to the left of the symbol and named entities (if known) to the right. The number entities on the left are supported by NS4+ and IE4+. Some letter entities on right are NOT supported by older browsers. If the character used has a number entity greater than #255, it may be advisable to use a numbered entity rather than named entity.
When using named entities, bear in mind that they are case-sensitive. Using the wrong case can produce an unintended result. Note the difference that an uppercase P can make:
′ produces ′
″ produces ″
When using the following codes, please let copy and paste be your friend.
© copyright
|
$ dollar
the following are not displayed on older browsers: | ||
฿ | baht | |
₡ | colon | |
₢ | cruzeiro | |
₤ | lira | |
₦ | naira | |
₨ | rupee | |
₩ | won | |
₪ | shekel | |
₫ | dong | |
€ | euro | |
recommended for encoding . standard characters . a few extended characters . cautionary tale about extended characters . encoding examples
The following example shows how to encode some characters on an HTML page - note the extra space between "address" and the e-mail address itself. (the characters displayed with character entities are in bold).
To display the following:
Here is the HTML code using numbered entities for with a mail link on the e-mail address:
e-mail address   <<a href="mailto:person@IP.com">person@IP@com</a>>
Here is the HTML code again, using named entities. (The equivalent named entities for #046; and #064; are not supported by all OS.)
e-mail address <<a href="mailto:person@IP.com">person@IP.com</a>>
Sniffing robots are increasinly sophisticated and may be on the lookout for the character entities and href="mailto:. An alternative to using character entities for displaying email addresses on web pages is to avoid href="mailto: entirely. Simply type out the words rather than the symbols. But robots aren't yet THAT sophisticated to be able to read and comprehend... To display the following:
Here is the HTML coding:
e-mail address <person(-at-)IP(-dot-)com>
To display various currencies, such as
Here is the HTML coding:
Payment by registered cheque will be accepted in £ (pounds) or € (euros).
Here is another chart with named entities. Also of interest is HTML Special Characters and Browser Compatibility.
It may also be a good idea to identify (with a meta tag) what character system you are using in the head section of your page. For this page, I have placed the following just before </head>:
Edit August 2008:<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Other charactersets can be found at www.w3.org - Internationalization page.
© llizard (aka ejm) 1998, 2000, 2001, 2003, 2004, 2005, 2006, 2008
(Yes, the above © symbol is displayed on this page by using the entity ©)
to top of page
FAQ: New to ASCII-art? Read me!
llizard's ASCII-art index
llizard's ASCII-animations index
llizard's tutorials on various aspects of web design
llizard's home page
unlimited free web hosting by cwahi.net
