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

<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>

<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>

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, Comic Sans MS, Helvetica, Impact, Optima, Omega, Tahoma, Trebuchet MS, Univers, Verdana, ZapfHumanist BT, Zurich BT

monospaced - Courier, Courier New

The following table contains some common fonts. The way the font appears in the table is the way the text will appear on these pages. If the font appears in your default font it means that it isn't installed on your system.

Simply click on one of the cells above and the font used for the heading at the top of this page will change to that font.

The user may also type in the name of a font that is installed on their own system to change the font. The font typed in must be the same as how that font reports itself to the operating system. The best way of doing this is to open up a word processor or something similar and see how the fonts are reported there.

While testing the code I came across an interesting thing. The code used to change the font face is

<script language="JavaScript">
//User supplied font name
function ChngFnt(ChosenFont){
document.getElementById("Hd1").style.fontFamily=ChosenFont;
}
</script>

with the tags defined as

<p><H1 id="Hd1" class="Hd">Ray's Test Pages - User Changeable Options - Fonts</H1></p>

the problem was that the code to make the font style, weight and text decoration change by using

document.getElementById("Hd1").style.fontStyle='italic';
document.getElementById("Hd1").style.textDecoration="underline";
document.getElementById("Hd1").style.fontWeight="bold";
document.getElementById("Hd1").style.fontSize="72pt";

didn't work. Later on, I found that by changing the ID line to

<span id="Hd1"><p>Ray's Test Pages - User Changeable Options - Fonts</p></span>

it did.

textDecoration can have the following attributes :-

underline - Text is underlined.
overline - Text has a line over it.
line-through - Text has a line drawn through it.
blink  - Not implemented by IE.
none - Text has no decoration.

fontWeight can have the following attributes :-

normal - Default. Font is normal.
bold - Font is bold.
bolder - Font is heavier than regular bold.
lighter  - Font is lighter than normal.
100 - Font is at least as light as the 200 weight.
200 - Font is at least as bold as the 100 weight and at least as light as the 300 weight.
300 - Font is at least as bold as the 200 weight and at least as light as the 400 weight.
400 - Font is normal.
500 - Font is at least as bold as the 400 weight and at least as light as the 600 weight.
600 - Font is at least as bold as the 500 weight and at least as light as the 700 weight.
700 - Font is bold.
800 - Font is at least as bold as the 700 weight and at least as light as the 900 weight.
900 - Font is at least as bold as the 800 weight.

fontSize has abundant choices percentages, ems, points and picas see

http://css-discuss.incutio.com/?page=FontSize

http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

http://akalg.com/pub/webref/style/fontSize.htm

http://www.gwumc.edu/library/tutorials/intermedhtml/css/fontsize.html

I like the thought of using the fontWeight numbers 100 to 900 and the fontSize in points 8 to 72. Perhaps both allowing the user to put their own numbers in. As with other drop down list boxes this can be coded individually, but I think it may be better to do it programmatically. In the fontWeight menu add the words "Normal" at 400 and "Bold" at 700. The fontSize drop down box should only use even numbers but allow the user to type in the odd ones if they want. Or maybe use xx-small, x-small, small, medium, large, x-large, xx-small.

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