Side bar

  Colour editing
  Image creation
  JS Tricks
HTML³: Characters |

Characters Window

The Characters section is split into two sections; there's an area at the bottom of the window for entering individual characters (or entities) into your text, possibly because you want to use foreign letters; and at the top of the window is an area devoted to lists, which generally add characters at the start of your text.

Areas covered on this page

Definition lists
Definition lists are much simpler and less option-heavy than the bullet lists. Basically it provides a sub-heading-like "term" part (often rendered in bold), and then the definition of that text is indented. You can have several terms and definitions in a definition lists, unlike the bullet lists which are more one-dimensional.


This is term one
Term one is the first in this list.
This is term two
Term two comes second in the list.

 <dt>This is term one</dt>
 <dd>Term one is the first in this list.</dd>
 <dt>This is term two</dt>
 <dd>Term two comes second in this list.</dd>

WML mode as ever has to do things differently due to the lack of list support; instead of Definition list and Off providing the start and end of the list there's simple paragraph breaks; Term just allows for an area of bold text; and Data allows for an area of plain text with a slight indent on the first line.

Clicking with the Right (Adjust) mouse button on any of the buttons to open these tags (<dd>, <dt>; and <dl>) will output the closing tag at the same time.

Bullet Point Lists

Lists are very much a game of two halves - there are two types of lists, the main variety of which is further split into two types, and which require two parts to work.

<ul> and <ol>
The main type of list most people will come across are bullet pointed lists - either with dots, or with incremental numbers or letters. These are known as Unordered Lists and Ordered Lists, or <ul> and <ol> respectively.

To these bullet pointed lists, all you have to do is switch them on, mark the start of each point (or List Item) with an <li> tag (optionally closing that with </li> unless using XHTML, in which case it's required), and then switch the list off again with a </ul> or </ol>. For example...

  • An unordered list
  • more of the same
  1. An ordered list
  2. and some more made up of...

 <li>An unordered list</li>
 <li>more of the same</li>


 <li>An ordered list</li>
 <li>and some more</li>

To end a list, you have to use the respective </ul> or </ol> tag. </li> isn't really necessary in standard HTML, but XHTML requires it.

Clicking with the Right (Adjust) mouse button on any of the buttons to open these tags (<ol>, <ul>; and <li>) will output just the "clean" versions of these tags (without any extra options), and the closing tag at the same time.

<ul> extras
However, there are other interesting things you can do with them; you will notice that next to the unordered list section of the HTML³ Chars window there's a menu with four extra options - Default, Disk, Square and Circle. For browsers which use dingbat-style font characters (Fresco, most PC browsers etc.) instead of coloured balls for bullet points (Oregano, Browse, Webster or ArcWeb), this enables you to change which character to use from the default dot (disk) to a large square, or a funky drop-shadow circle. This can be done either as an extra attribute in the <ul> tag, or in each individual <li> - for instance...

  • should have a square at the start
  • so should this
  • Should be a circle (sometimes with a drop shadow)
  • should have a regular dot
  • back to the square type

Help! That didn't work!
If you see coloured dots instead of the type of bullet point described, chances are this function isn't supported in your browser - if it isn't in the list in the paragraph above, please contact me so I can update the list.

Clicking with the Right (Adjust) mouse button on any of the buttons to open these tags (<ol>, <ul>; and <li>) will output just the "clean" versions of these tags (without any extra options), and the closing tag at the same time.

As well as using <ul>...</ul> for lists, it's also a handy way of indenting text so you get a nice left hand margin.

Microsoft FrontPage uses <BLOCKQUOTE>...</BLOCKQUOTE> instead, but many browsers render blockquotes in italic.

<ol> extras
<ol> has similar extensions to <ul>. There are five different styles of incremental bullet types - the Default is the numeric (1, 2, 3) style, but you can also use letters and roman numerals in both lower and upper case. HTML³ will allow you to add these in the <ol> tag but not the <li>, as it would look very weird.

Also available is the option to start a list at a number other than one (obviously if you're using letters or roman numerals you have to translate this to a number for the Start: section) - this is useful if you stop a list and then want to restart it later in the document, or if you're a computer geek and like to start listing from 0.

Clicking with the Right (Adjust) mouse button on any of the buttons to open these tags (<ol>, <ul>; and <li>) will output just the "clean" versions of these tags (without any extra options), and the closing tag at the same time.

WML lists
WML, of course, is completely different - there are absolutely no list commands in WML. So I've had to be a little creative getting around this.

Clicking on the unordered list on/off and ordered list on/off buttons don't seem to do much - they just output standard paragraph breaks. However, it's imperative that you do this, as you're also telling the program what type of list you want it to output - it has to store it internally to get around the fact that the WML browser can't.

Once you've clicked on one of the list types, you should then click on the list item button as normal when you want to start another list item; however, now HTML³ will be looking at the options available for the type of list you selected above. It basically does a linefeed, then the tag for a WML line break (<br/>), and then some text to fake out the bullet point a HTML browser would display.

With unordered lists, the four unordered list types are taken into account - default and disk both output an asterisk; square outputs a hash sign; and circle outputs a lower-case "o". There's a space right after this sign to do a little indenting, but be aware that when there's enough text to drop onto another line there'll be no indenting on this next line.

Ordered lists are much more fun though - taking the number from the section marked Start:, the program will output a number and then increment the Start: counter. It does this for all six ordered list types; default and 1,2,3 use regular numbers; a,b,c and A,B,C output letters between A and Z (in the correct case) - when it reaches Z it wraps around again to A, which is the same as Fresco rather than the Oregano model of going off into random gibberish characters ;); and i,ii,ii and I,II,III will generate roman numerals via a little function I wrote for the purpose, which I think will be correct for all numbers up to 99 (which is the maximum number you can get in the Start: option) - I've noticed clocks use IIII for four, but that might be so you don't confuse six which is VI, but printed upside down so it looks more like IV - which is usually used to represent four. Anyway, it's quite fun to keep hitting the List item button and get a roman numeral counter going :)

As with unordered lists there's a linefeed, a break tag, the number (in whatever style), then a dot and the final space. As before, when text drops onto the next line it won't be indented.

<br/>I.  one
<br/>II. two
<br/>III. three
<br/>IV. four
<br/>V. five
<br/>VI. six
<br/>VII. seven
<br/>VIII. eight
<br/>IX. nine
<br/>X. ten

Character entities

Web browsers generally follow (or can be made to follow) something called the ISO8859-1 character set, also known as "Latin-1"; this may be familiar to you, as it just happens to be almost exactly like the standard character set used by RiscOS! This of course makes the job of checking that the font on your Acorn is the one that is used by the Web browser at the other end fairly simple, although there are no guarantees where the Internet is concerned of course.

Character entities can be entered in two ways; numerically, such as &#255;, or using special names such as &yuml; (both of which produce the same character, a lower-case "y" with umlauts above it). However, just to complicate matters ISO8859-1 unfortunately doesn't define the full character set; the characters between 128 and 159 are only partially defined, which might not seem like a great loss until you notice that smart quotes are within this range.

I usually suggest avoiding this area if at all possible, "dumbing down" smart quotes (that is, use ordinary straight quote marks instead of smart ones), to avoid such complications, as different browsers and operating systems can produce different results for these characters. As it says in Webmaster in a Nutshell, Second Edition: "To be sure that your documents are fully compliant with the HTML 4.0 standard [use only the standard characters]. Defy compliance by using the nonstandard entities". So, the characters are now listed in the ISO8859-1 page, suitably marked; it's up to you.

Finally, note that there are other character standards (some which use four digit numbers) which might be used to avoid all of this, but then you can't guarantee these character sets are supported by all browsers either!

Anyway, to make all of this as easy as possible, HTML³ has the following functions built in:

  • character entities can be output in either numeric or textual versions (see the Options window)
  • &trade; doesn't seem to work as a numeric entity in some versions of Netscape, so it always comes out as the textual version...
  • ...but other characters in the range 128-159 always come out as numeric entities
  • there's an option to add a reminder in plain English to show what the character is when you're editing the HTML (see the Options window)
Hopefully this makes the use of characters as compatible as possible with as many browsers as possible.

WML mode is slightly different, in that only 7 characters have named versions, so most of the time you'll see numeric entities even if you have the textual option switched on. It's still worth leaving it switched to textual for those seven though.

There's a slight complication in that dollar signs are used to show variables, so in WML dollars should be doubled up to encode them - but this is not catered for from the characters window. HTML³ will do a certain amount of this automatically, but it can get confusing if you're also using Perl output at the same time - see the section on the tokens page for more details.

HTML³: © Richard Goodwin 1997-2002