User Sets Font Size and Face
with buttons staying visible as text scrolls.
Set your prefered font size button and font face: Arial, Times, Verdana
Most web browsers, including IE7, already have two methods to make the text bigger:
Why would I propose a third method?
The first technique is not always implemented as well as might be desired. For example on IE7 when used with Windows XP:
The second method
as is done on this web page.
For this reason, I am experimenting, here, with buttons on the left, which call a function and pass the button's value when you click on it. This function
function ChangeFontSize(size)
{
document.body.style.fontSize = size + "pt"
}
modifies the value of the font-size attribute of the body element directly.
This is a very clean, simple and elegant method, using the DOM features of CSS, and the object oriented character of JavaScript, that does not involve the use of alternate style sheets etc. These buttons are labelled with the font point size in that font-size. They control the font in terms of point size rather than pixel size, so that the results should be independant of montor resolution settings..
Other variants of this method include
function ChangeFontSize(id, size)
{
document.getElementById(id).style.fontSize = size + "pt"
}
or
function ChangeFontSize(index, size)
{
document.getElementsByTagName('p')[index].style.fontSize = size + "pt"
}
The first function alters the value of the fontSize of the style of any element, such as a <div> tag pair (an element) surrounding any part of the text you wish to control. This <div> tag contains an id, which is passed as one of the parameters in the function call in a button or "link".
The second function alters the value of the fontSize of the style of an element of a particular type, such as a <p> tag pair. Note that getElementsByTagName returns a list of all the tags with that name, and you have to specify which one by its index number.
Stephen Chapman, in getElementByClaaName shows how to define a function that gets a list of all elements with a particular class name.
The same approach can be used to alter any other style attribute such as Font-Family.
function ChangeFontFace(face)
{
document.body.style.fontFamily = face;
}
Note that these functions are in the HEAD section of the web page code, so that any in-line style in the BODY will over-ride the font-size or font-face specified by the functions. So all default font sizes must be specified in the style sheet in the HEAD, unless you do wish to over-ride, as in the size buttons at the top of the page.
The buttons are in a <div id="buttons"> container, which are positioned in the header style sheet with the code:
#buttons {
position: fixed;
left: 1em;
top: 10%;
width: 10%;
}
The "fixed" value positions the <div id="buttons"> container with respect to the window rather than with respect to the web page top.
This will not work with Internet Explorer, which does not support positioning properly, unless you add the doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
before the <html> tag.
The main text is moved over from the buttons with the body style
padding-left: 10%;
I have looked briefly at the following methods of changing text size:
Dyn-web uses a complicated script that has a licensing fee costing $35/domain.
Danny Goodman, JavaScript and DHTML Cookbook, O'Reilly, 2003 - seems very complex to me, uses cookies, and the demo does not work.
Bojan Mihelac, Power To The People: Relative Font Sizes, A List Apart, 2004-04-09 - seems to use a separate style sheet for each font size.
Paul Sowden, Alternative Style: Working With Alternate Style Sheets, A LIst Apart, 2001-11-02.
Javascript Change Font Size - uses the getElementById( ) mehtod.
Tony Aslett, Dynamic User Preference Script, 2005-07-25 - uses a script to update the style sheet.
How to change font size for web pages using Javascript & Coldfusion - uses the getElementById( ) method.
onClick change font-face - has a long discussion on changing font face.
Change Text Size on Click - appears to want a fee.
But I like the method used on this page the best
Sources
Dynamically change text size on a page, CuteSITE Builder, 2005-11-20
Mark "Tarquin" Wilton-Jones, JavaScript tutorial - DOM nodes and tree, 2007-10-06