Ray's Test Pages - User Changeable Options - Fonts

For a while now I've been looking at ways to brighten up the design of the site. In the end I decided that this site will be one of the most user configurable on the Internet. I want the visitor, if they want, to be able to choose their own menu type, background image or colour, and font type and colour. I want them to be able to choose if they want the change in style to apply to the site while they are visiting just for this session or to remain persistent and remain the same each time they visit it.

Fonts

I'd like the visitor to be able to choose a font type and size from a list or table, or be able to use a font from their own computer.

There isn't a way to collect information about the fonts installed on a user's computer. There is but it only works for Windows based machines - see http://www.gemal.dk/browserspy/fonts.html So probably the best thing to do is to provide a short list of fonts for the user to choose from. I'll also include instructions on how to change the default page colour and fonts using the browser options. The font size should be easier to do, just a drop-down list of point sizes from 8 to 14 or 16. The font tag is depreciated in HTML 4.01 but this is the only way I can see of doing this.

There are other things to think about. Do I give the user the choice to use things like bold, italics or underline styles for the fonts, especially for the headings? Do I make the headings and subheadings 1 or 2 point sizes larger than the main text or do I give the user the opportunity to use what font sizes and styles they like for each individual page element?

It is possible to change certain aspects of a dropdown list box appearance.

The code for the drop down box above is ...

<form><p align="center">
    <select name="select1">
      <option value="0">Arial
      <option value="1">TNR
      <option value="2">Antigoni
      <option value="3">Balloon
      <option value="4">Comic
   </select> 
</p></form>

The entire background colour and font can be changed by putting a style into the select statement. If you have the font installed, the text in the dropdown list box should be in Comic Sans MS. This works on Windows with IE v6, Mozilla v1.4, Netscape 7.1 and Opera v7.11

The code for the above dropdown list box is ...

<form><p align="center">
   <select name="select1" style="background-color:#FF0000; font-family: Comic Sans MS; font-size: 16pt;">
      <option value="0">Arial
      <option value="1">TNR
      <option value="2">Antigoni
      <option value="3">Balloon
      <option value="4">Comic
   </select> 
</p></form>

It is possible to change the colour of each option by using "style" inside the option. This does not work in Opera v7.11

Part of the code for the above dropdown is ...

<form><p align="center">
    <select name="select1" style="font-size: 15px;">
       <option value="0" style="background-color:#FFFFFF;">White FFFFFF
       <option value="1" style="background-color:#FFB6C1;">LightPink FFB6C1
       <option value="2" style="background-color:#FF69B4;">HotPink FF69B4
       <option value="3" style="background-color:#FF0000;">Red FF0000
       <option value="4" style="background-color:#A52A2A;">Brown A52A2A
      .....
      .....
    </select>
</p></form>

What I want to do is do display a short list of fonts using the name of that font to display each separate choice. The following code works in Mozilla v1.4 and Netscape 7.1 but not IE v6 or Opera v7.11

<form><p align="center">
    <select name="select1">
       <option value="0" style="font-family: Arial;">Arial
       <option value="1" style="font-family: Times New Roman;">TNR
       <option value="2" style="font-family: Antigioni;">Antigoni
       <option value="3" style="font-family: Balloon Bd BT;">Balloon
       <option value="4" style="font-family: Comic Sans MS;">Comic
    </select>
</p></form>

Another idea to display these fonts may be to put them in a table ...

Font	On my computer	On your computer
Arial		This is Arial
TNR		This is TNR
Antigoni		This is Antigoni
Balloon		This is Balloon
Comic		This is Comic

The centre column are actually images made with 12pt fonts on my own system. The third column is text using, hopefully, the fonts on your system - if you've got them loaded, otherwise they should display in the default font.

The most common fonts seem to be ...

serif - Book Antiqua, Georgia, Palatino, Palatino Linotype, Times New Roman, Times

sans-serif - Arial, Avant Garde, Century Gothic, Tahoma

Comic Sans MS, Helvetica, Impact, Optima, Omega, Trebuchet MS, Univers, Verdana, ZapfHumanist BT, Zurich BT

monospaced - Courier, Courier New

If you've any suggestions, help, advice, bits of code, whatever please email me at brisray@yahoo.co.uk

Images - the page where the best of the image selection code ends up

Test Page - where most of the testing is done

Colours - Page 2 - page for testing CSS and other groupings

Other Websites

Webtek Systems - what my site (or anybody else's) must NOT look like

This page created 31st December 2003

GoStats stats counter