The Effects window is where you get all the fun stuff, like colours and fonts. To open it, press the <tt>Effects</tt> icon with the left mouse button, or hold <tt>[ALT]</tt> and <tt>[F3]</tt> down together for a second.
<P>
<a name="immediate">Most of the icons on the Effects window are "immediate effect"</a> - 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.
These buttons create standard effects like you would see in most word processors and DTP packages. Don't forget to use the corresponding <tt>Off</tt> button to stop the effect at the end of the piece of text you're marking up!
<P>
<table width="500" border="1">
<tr valign="top" bgcolor="#66EEBB" align="center"><td width="50"><b>Button</b><td width="125"><b>Test of effect</b><td width="325"><b>Notes</b>
<tr valign="top" align=center><td>Italic<td><i>ABCDEfghij</i> <td align="left">Old-style italic, widely used; some say you should now use EM instead
<tr valign="top" align=center><td>Bold <td><b>ABCDEfghij</b> <td align="left">Old-style bold, widely used; some say you should now use STRONG instead
<tr valign="top" align=center><td>Em <td><em>ABCDEfghij</em> <td align="left">Replacement for Italic to EMphasise words, although it hasn't really caught on (especially as it means more typing!)
<tr valign="top" align=center><td>Strong<td><strong>ABCDEfghij</strong><td align="left">Replacement for Bold to stress words, although it hasn't really caught on (especially as it means more typing!)
<tr valign="top" align=center><td>Super <td><sup>ABCDEfghij</sup> (Ref)<td align="left">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.
<tr valign="top" align=center><td>Strike<td><strike>ABCDEfghij</strike><td align="left">Strikeout; a line through the text as if crossing it out. Used to show that a mistake has been corrected (sometimes for humour purposes).
</table>
<P>
<font color=#ff0000><b>Help!</b></font><br>
<i>Some of those effects didn't seem to work on my browser!</i><br>
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.
<P><HR width=50%><P>
<a name="font"><H3><FONT...> Effects</H3></a>
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 <font color=#ff0000>Help!</font> notes under each section too.
<P>
You have to turn off each font effect with a corresponding <tt></font></tt> tag, which you get by pressing the button marked
<tt>Switch off font effect</tt>. So for instance...
To slightly confuse matters, you can have multiple options within one <tt><font...></tt> tag, and because you've only got one tag you only turn it off once even though it's doing two or three jobs; <i>HTML³</i> doesn't output in that format to keep things simple, but you could easily combine two <tt><font...></tt> tags into one by hand so I'll give an example here for completeness:<br>
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 <tt></font></tt>!
<P>
However, it would be pretty dull if you had to stick to just the 16 colours provided when <i>HTML³</i> 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 for my graphics work so I decided that I would write one myself, so there are quite a few different options here!
<tr valign="top"><td>Left mouse button<td>Type current colour in at cursor.
<tr valign="top"><td>Left mouse button<br>
with <tt>[SHIFT]</tt> pressed
<td>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!
<P>
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.
<p>
Click with the left mouse button <i>without</i> <tt>[SHIFT]</tt> pressed to finish the blend, or if you've made a mistake click on another colour <i>with</i> <tt>[SHIFT]</tt> 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.
<tr valign="top"><td>Middle mouse button<br>(over colour)<td>Bring up a menu of <b>named colours</b> (using the list of about 140 standard Internet colour names) which, once selected, will alter the colour of the button you pressed menu over.<P>
There is also an option to <tt>Make colour NetSafe</tt> - this will take the current colour and average it out (with proper rounding up) so that the value of the red, green and blue of the colour is a multiple of &33, so that it shows up properly on older PCs.
<tr valign="top"><td>Middle mouse button<br>(over other areas of effects window)<td>This brings up a menu which allows you to save the current 16 colours, either as a palette that can be used in both <i>HTML³</i> and anywhere you would use a standard 16 colour 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). <br>As I can't proper save boxes the palettes save inside <i>HTML³</i>, and the colour table is sent to your text editor.
<tr valign="top"><td>Right mouse button<td>Brings up the RiscOS colour picker, so that you can create your own colours using RGB, CMYK, HSV and standard 16 desktop colour controls.
<tr valign="top"><td>16 colour palette dragged to window<td>16 colour palettes will be imported
<tr valign="top"><td>256 colour palette dragged to window<td>Although 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.
</table>
<P>
To help you create the palette you want, there are also two buttons marked <tt>(Inv)</tt> and <tt>(Rev)</tt> - these stand for <i>invert</i> and <i>reverse</i>. If you <i>invert</i> 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 <i>reverse</i> button to flip the colours the other way round after an <i>invert</i>. The <i>reverse</i> button is also handy for the <a href="#specialfx">special effects</a> section (see later) where you might want a piece of text to fade in instead of out.
<P>
Finally, it wouldn't be much good creating all these palettes without having a way of storing and retrieving them; there's where the <tt>Presets</tt> option comes in. By clicking with the left mouse button on the little menu button <img src="menub.gif" alt=" " width=16 height=14 border=0> at the bottom right of the palette area you'll get a list of all the palette files <i>HTML³</i> 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.
<P>
<font color=#ff0000><b>Help!</b></font><br>
<i>It didn't seem to work on my browser!</i><br>
Currently (01/09/98) there are problems with font colours under many Acorn browsers; the NC (Network Computer) mk. 1 doesn't support this command at all; 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; and 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, whch is why I have used these extensively in this document.
<P>
<i>The colours on the palette don't look very good on my computer!</i><br>
The colours are defined to 24 bit quality, but if you are using a 256 or 16 colour desktop you won't see the full benefit of this quality - in fact you won't on the browser either, as text can't be dithered! Switch to more colours on your desktop if you can, or at least it shows what will happen someone's viewing your page in a 256 or 16 colour mode.
<HR width=50%>
<b>The other font effects</b>
<P>
<a name="size">These relate to size effects...</a>
...where the top row is relative sizing - like saying, "<i>make the next piece of text a bit bigger or a bit smaller than the current size</i>", - and the bottom row is absolute sizing - like saying "<i>make the next piece of text this size, regardless of what the normal size is</i>". 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.
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 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
(<font face="arial, helvetica">Homerton</font>,
<font face="times">Trinity</font> and
<font face="courier">Corpus</font>)
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.
<P>
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 <tt><font face="courier"></tt> to show text in Corpus which let's face it, that's just the same as the <tt><tt></tt> tag, but means they could extend the system later.
<P>
You choose a font by clicking the little menu button <img src="menub.gif" alt=" " width=16 height=14 border=0> and selecting a font name from the list. These should usually be using unfamiliar PC names, but on the <a href="choic.html">Choices</a> window I've included an option to translate some of them into more familiar Acorn names.
<P>
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 <tt>Homerton regular</tt> and it types out<tt> arial, helvetica </tt>- these are the "foreign" versions of Homerton!
<P><HR width=50%><P>
<a name="special"><H3>Special Effects</H3></a>
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.
<P>
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 <tt>None</tt> so that it isn't altered), select how the size should be altered (or <tt>None</tt>), click on your text editor where you want the effect to appear, and then click on the <tt>create</tt> button to get a stream of code that will create your special effect.
<P>
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 <a href="#colour">the colour palette</a> if you don't know how to do this.
<P>
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:
<P>
<li><b>Sequential</b>: 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.
<li><b>Full span</b>: 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.
<li><b>Yoyo</b>: this is almost exactly like <b>Sequential</b>, 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!
<li><b>Tube</b>: a sort of cross between <b>Full span</b> and <b>Yoyo</b>, 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.
<i>The code it outputs looks really messy!</i><br>
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? <img src="smiley.gif" alt=":-)" width=18 height=18 border=0 align="top"><br>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 .
