FontSizer Reloaded - Changing Font Sizes With JavaScript
I broke this script and have fixed it! Please read about it and download the script from this post.
A long time ago I wrote a script that changes font sizes. In the year since, I have learned a lot about JavaScript and accessibility and looking over the code I wrote I was ashamed! I will dissect the mistakes I made in another post, but for now I have re-written and vastly improved the script.
Improved Functionality, Improved Accessibility
The script now does everything for you without you having to change
your markup, so it degrades nicely when JavaScript isn't available
and it uses (mostly) standards based JavaScript (but don't get me
started on Internet Explorer support for
setAttribute).
Once the DOM has loaded the script will check to see if the font has already been set by trying to read a cookie (cookie script was originally from Quirksmode). If the cookie is found then the font size of the body element is set to the previous value. If no cookie is found then the script creates an element and measures the height of it to work out the current font size (thanks to a script on detecting font resizing at A List Apart) and sets that as the cookie. It then adds three links to the document, appending them to an element of your choice. The three links increase, decrease and reset the font size, saving the changes to the cookie.
How To Use It
Now all you need to do to use the fontSizer is:
- Download the script (there is an updated version with class names below)
- Change the string "fontControls" at the very end of the script to the element you want the font sizing links appended to.
- Upload the script to your server
-
Include the following line in the
<head>of your document:
<script type="text/javascript" src="fontSizer.js"> </script>
When you visit the page you did this on, you should find that three links appear: A+, R and A- (they're not pretty, but customisation is left as an exercise*). On clicking A+ the font size of the whole document will increase, clicking A- will decrease the font size and R will reset it to the original size. The script has been tested and works in the following browsers:
- Internet Explorer 5.5, 6 and 7
- Firefox 2
- Opera 9
- Safari 2
- Camino 1.5
I have also provided a (very simple) example. So, if you want to add an unobtrusive, accessible way of increasing your website's font size, please download the fontSizer script and use it!
If there are any problems, please let me know and I will do my best to help you out.
As requested in the comments, I have updated the fontSizer to include class names for styling the links. The "A+", "R" and "A-" will now come with the classes "increaseSize", "resetSize" and "decreaseSize" respectively. If you want to change them, just have a look into the source code and you should see where they are set. The new version is available to download now.
* I have always wanted to say that!