Side bar

  Colour editing
  Image creation
  JS Tricks
HTML³: Effects |


The Effects window is where you get all the fun stuff, like colours and fonts. To open it, press the Effects icon with the left mouse button, or hold [ALT] and [F3] down together for a second.

Most of the icons on the Effects window are "immediate effect" - that is, you press them and something is "typed" immediately, so make sure you're prepared. Make sure you have got the cursor in your text editor to the correct place where you want the code to appear, and that the editor has "input focus" - that is, if you were to start typing it would appear in that window, and usually the window will have a yellowish title bar.

Simple effects

Simple FX

Simple FX

These buttons create standard effects like you would see in most word processors and DTP packages. Don't forget to use the corresponding Off button to stop the effect at the end of the piece of text you're marking up!

ButtonTest of effectNotes
ItalicABCDEfghij Old-style italic, widely used; some say you should now use EM instead
Bold ABCDEfghij Old-style bold, widely used; some say you should now use STRONG instead
Em ABCDEfghij Replacement for Italic to EMphasise words, although it hasn't really caught on (especially as it means more typing!)
StrongABCDEfghijReplacement for Bold to stress words, although it hasn't really caught on (especially as it means more typing!)
Super ABCDEfghij (Ref)Superscript. Although some superscript characters are provided when you're using a fully defined font, such as ¹, ², ³ it's often better to use superscript as someone might not have all of the proper characters in their font, and it means that if the character mapping is not standard you'll also get the proper meaning.
Sub ABCDEfghij (Ref)Subscript
Under ABCDEfghij Underline
StrikeABCDEfghijStrikeout; a line through the text as if crossing it out. Used to show that a mistake has been corrected (sometimes for humour purposes).

In WML mode the following will work (depending on your 'phone's capability): italic, bold, emphasised, strong, underlined.

Some of those effects didn't seem to work on my browser!
Not all browsers support every single HTML code and option, so if you don't see what is described in the notes then it's probably because your browser doesn't support it. However, the above commands are all very standard and should be well supported.

<FONT...> Effects

These tags are slightly less well supported as the simple effects above, so although modern PC browsers should have no problems with these your Acorn browser might not - the current state of play should be documented within each section, and also see the Help! notes under each section too.

You have to turn off each font effect with a corresponding </font> tag, which you get by pressing the button marked Font effect off. So for instance...
 <font color="#ff0000">Red text</font>
 <font size="+1"><font color="#ff0000">
 Bigger red text

To slightly confuse matters, you can have multiple options within one <font...> tag, and because you've only got one tag you only turn it off once even though it's doing two or three jobs; HTML³ doesn't output in that format to keep things simple, but you could easily combine two <font...> tags into one by hand so I'll give an example here for completeness:
 <font size="7" color="#ff0000">Huge red text</font>

The colour palette

FX colours

FX colours

All you have to do to make text appear in a different colour is click on the corresponding colour on this palette and hey presto! the command for that colour is typed out. Don't forget to switch it off again with </font>!

However, it would be pretty dull if you had to stick to just the 16 colours provided when HTML³ is installed, so the palette can be edited to include whatever colours you want. The truth is that I had never been able to find a decent 16 colour palette editor for my graphics work so I decided that I would write one myself, so there's a pretty good editing window which can be used here!

Left mouse buttonType current colour in at cursor.
Left mouse button
with [SHIFT] pressed
Start a blend. If you want to, for instance, create a palette with 16 shade of grey, instead of defining them all you would set the first colour to black, set the last colour to white, and then blend between them. Instant full palette!

You can of course use more subtle blending to go from, say, black to red to white to get a full pink palette, or black > brown > red > orange > yellow > white to get a fire-style palette.

Click with the left mouse button without [SHIFT] pressed to finish the blend, or if you've made a mistake click on another colour with [SHIFT] pressed to start a new blend - or to stop blending just use the same end colour as the start colour, so no blending takes place.

Middle mouse buttonThis brings up a menu which allows you to save the current palette, either as a 16 colour RISC OS palette that can be used in both HTML³ and anywhere you would use a standard palette such as !Paint, or as an ArtWorks colour table so that you can use exactly the same colours as your web text in your graphics (ArtWorks colour tables also import into PhotoDesk's "named colours" window and Cerilica's Vantage).

Drag-and-drop saving of palettes has now been implemented, so you can either save the file in the usual way or just supply a name with no filing system or directories, in which case the file will be saved to the palette directory if it's a palette or the ArtWorks file will be dumped to the Options directory and then run so that it appears in a text editor. Note that in this case the name will always be HTML3Options:AWFile to prevent you overwriting other files in the resources directory.

Right mouse button
(or, press [Alt] and the left mouse button together)
Brings up the colour editor, which allows you to change the colour in a variety of ways (RISC OS colour picker, list of preset colours, lighten, darken, make netsafe and so on). More information can be found in the Colours documentation
16 colour palette dragged to window16 colour palettes will be imported
256 colour palette dragged to windowAlthough of course it is impossible to fit 256 colours into a 16 colour palette window, every 17th colour will be used so that if you have a nice, smooth 256 colour palette you'll get 16 colours that give a decent approximation of the original; if however the 256 colour palette has different colours here, there and everywhere (perhaps because you used a "find best colours" for an image that was originally 32,000 or 16.7 million colours) then you are unlikely to get the ones you want this way.

To help you create the palette you want, there are also two buttons marked (Inv) and (Rev) - these stand for invert and reverse. If you invert a palette you get exactly the opposite colours instead - so for instance black become white, yellow becomes blue, green becomes purple and so on. In the normal course of things not too useful, but when you're trying to build up a whole collection of palettes it means you only have to define the red palette, save it, then invert it and you have the makings of a fine cyan palette! You can also use it to create funky images if you load a 16 greyscale image into !Paint and drop one of these palettes into it. However, it's usual to have the darker colours first fading to lighter colours, so you might need to use the reverse button to flip the colours the other way round after an invert. The reverse button is also handy for the special effects section (see later) where you might want a piece of text to fade in instead of out.

Finally, it wouldn't be much good creating all these palettes without having a way of storing and retrieving them; there's where the Presets option comes in. By clicking with the left mouse button on the little menu button  at the bottom right of the palette area you'll get a list of all the palette files HTML³ has stored - I've created quite a few for you already! - and you just have to click on open to load it. If you want to delete a palette, or perhaps use it for another purpose, click with the right mouse button instead, or click on the word "Presets:", and the directory where they are stored will open.

Colours won't work at all in WML mode.

It didn't seem to work on my browser!
Currently (01/09/98) there are problems with font effects including colours using many Acorn browsers; Webster XL has moved from mapping to the nearest desktop colour (i.e. only sixteen colours) to full 24bit colour, so make sure you have the latest version; Fresco (including Argo Fresco) can only show a limited number of different colours for each page (14 I believe) before it starts getting confused - although it can do thousands of table background colours. The NC (Network Computer) mk. 1 uses an old version of NCFresco and doesn't support this command at all.

The other font effects

These relate to size effects...

Font sizing

Font sizing

...where the top row is relative sizing - like saying, "make the next piece of text a bit bigger or a bit smaller than the current size", - and the bottom row is absolute sizing - like saying "make the next piece of text this size, regardless of what the normal size is". Normally size 3 is the default size for text in a web page (which is why it's marked with a light yellow background), so telling the browser to go to "+1" or "4" would both make the text a little bit bigger, and "-1" or "2" are a little bit smaller.

WML mode will only output <big> or <small> because WML doesn't have any other font sizing.

Font face (using RISC OS names display)

Font face (using RISC OS names display)

The font face command, which changes the actual font used to display the text, is not well unsupported on the Acorn platform (01/09/98). Because Windows 95/98/etc. comes with a set of fonts pre-installed you can presume that there is a pretty good list you can choose from; however, as Risc OS comes with just three fonts (Homerton, Trinity and Corpus) you can't assume they have the right font installed to display the text effect, and you can't supply them with the browser because you'll probably be breaching copyright.

However, the latest versions of Webster XL does have a font mapping facility, which I have tried to add to; you can add your own font mappings but it won't help with what other people see. Fresco (including Argo Fresco but excluding NCFresco mk1) appears to support <font face="courier"> to show text in Corpus which let's face it, that's just the same as the <tt> tag, but means they could extend the system later.

You choose a font by clicking the little menu button  and selecting a font name from the list. These should usually be using unfamiliar PC names, but on the Choices window I've included an option to translate some of them into more familiar Acorn names.

When you've selected a font its name will appear on the long, light grey button; to type out the code for that font, just press this button. Don't worry if for instance you've selected Homerton regular and it types out arial, helvetica - these are the "foreign" versions of Homerton!

There are no font styles of any type in WML (not even switching between monospaced and variable width font faces).

Special Effects

This is another of those things that I'd always wanted but could never find anywhere so I had to write it myself. If you use it too much it'll probably annoy the hell out of people, but it's a bit of fun. It won't work at all in WML mode.

All you do is type a word, phrase or short sentence into the white box at the top of the special effects area, select how you want your colours to be altered (or None so that it isn't altered), select how the size should be altered (or None), click on your text editor where you want the effect to appear, and then click on the create button to get a stream of code that will create your special effect.

To use the colours section, first of all make sure your palette has been set up properly, as the special effects generator uses these colours - see the section above about the colour palette if you don't know how to do this.

There are currently five colouring effects, which I will have to explain and give just very rough examples of due to the problems I've mentioned above about Acorn browsers and text colours:

  • Sequential: this will use colour 1, colour 2, colour 3 and so on until the text ends, or until colour 16 has been used; if you've typed in more than 16 letters (spaces are always ignored in special effect!) then it will go back to colour 1 and start from there again.
  • Full span: this will try and stretch or shrink the number of colours used so that the first letter uses the first colour in the palette and the last letter uses the last colour, and the letters in between try to use the colours in between as best they can.
  • Yoyo: this is almost exactly like Sequential, but when it gets to the last colour instead of going straight back to the start of the palette it will start counting backwards, using all the colours until it gets back to the start of the palette, and it there's yet more text it will start counting forwards again!
  • Tube: a sort of cross between Full span and Yoyo, this option works out how to go from the first colour to the last and then reverse back again to the first colour, so that it almost looks like you've painted the letters on a shiny metal pipe and they're coming towards you or going away from you.
  • Random: picks any one of the 16 colours at random. I often find that you might want to try this a few times and pick the best version.

    The sizing section is almost exactly the same as the colours section, except there are more options to play with!

  • Arch: SEQUENCE
  • Trough: SEQUENCE
  • Bigger: SEQUENCE
  • Smaller: SEQUENCE
  • Big Init: Sequence  Sequence
  • Random: SEQUENCE

    The code it outputs looks really messy!
    Yes, I'm afraid it does, which is why it's a good job the whole process of creating these things is automated now, yes? :-)
    Seriously though, I was asked to put linebreaks between each bit of code, but a linebreak is generally interpreted by browsers as a space, so  y o u r   t e x t   e n d s   u p   s p r e a d   o u t .

    HTML³: © Richard Goodwin 1997-2002

  • |