5 - You know you ought…
We've all seen the font resizing buttons in the corner of pages to allow easy access to sites for those with visual difficulties. We all know we ought to add them to our sites. But how easy is it? Answer: suprisingly easy...
Make the buttons
Use a bit of Javascript to make the 3 letters. Inspect the source for this page and you'll see that just 2 functions are called:
- changeFontSize()
- revertFontSize()
Copy the Javascript that supports the functions
There's another bigger bit of Javascript that defines the two functions above and two more to store the font setting in a cookie. This is done by defining:
- window.onload - loadSettings()
- window.onunload - saveSettings()
Edit the Javascript to suit your css
The key to all the Javascript is that is sets the fontsize of the div "main" as a percentage. That's just for this exanmple: you will probably want to set the fontsize of "body" with the Javascript and then set the default fontsize for divs in your css a bit like the following:
body {
font-family:Arial, Helvetica, sans-serif ;
font-size:100% ; /* usually 16pt on browsers… */
}
div#menu {
font-size:0.5em; /* …but we'd like 8pt for our menu…*/
}
div#main {
font-size:0.75em; /* …and 12pt for our main area*/
}
