FontSizer Reloaded - Changing Font Sizes With JavaScript

Posted on Friday, November 9th, 2007

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:

  1. Download the script (there is an updated version with class names below)
  2. Change the string “fontControls” at the very end of the script to the element you want the font sizing links appended to.
  3. Upload the script to your server
  4. 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!

If you enjoyed this post, why not subscribe to Unintentionally Blank

Posted in Javascript, The DOM | Trackback | Leave a comment


Comments

  1. 1November 9th, 2007 at 10:22 am

    Nyssa Says:

    Very nice, and useful too. I don’t know a lot about JavaScript, but I like looking at these bits and pieces to learn by example.

    Anyway, nice one. I may use it in the future. :)


  2. 2November 10th, 2007 at 11:20 am

    Phil Says:

    Thanks Nyssa!
    I hope it is clear enough to understand. As I said, I’ll be going over the mistakes I made in my last font sizing script soon, so I hope that will help too.


  3. 3February 1st, 2008 at 9:49 am

    Turhan Says:

    Hello. Thanks for the script. Works really well. I also don’t know much about JavaScript. But was wondering, how would I go about setting CSS styles on the links generated by the JavaScript so I can make the ‘A-’ small and the ‘A+’ big… Thanks mate!


  4. 4February 5th, 2008 at 10:09 pm

    Phil Says:

    Thanks for your comments, Turhan. Currently the script just adds links so you can’t differentiate between them in CSS. I will update it to include a custom class name as well so you can style those links as much as you want. Good idea making them different too, makes it obvious!


  5. 5February 6th, 2008 at 6:39 pm

    Turhan Says:

    Hi Phil. Thanks for the updated script. Works really well and really easy to implement. Keep up the good work mate!


  6. 6February 10th, 2008 at 6:07 am

    LanceO Says:

    Really like the script, but it seems to load a bit slow. Not sure why or if it’s just me, but wondered if you had some insight. Thanks for your work on this.


  7. 7February 10th, 2008 at 11:00 am

    Phil Says:

    Lance, what do you mean by slow? Do you have an example page? It should load into place when the page has loaded.


  8. 8February 11th, 2008 at 5:44 pm

    LanceO Says:

    Hi Phil,
    http://www.oleniks.org now has the script. It actually seems to be working fine now (except for some kinks not related to your script). Must have been my host or something. Thanks for responding so quick … all is well :)


  9. 9February 11th, 2008 at 6:51 pm

    Phil Says:

    Hi Lance,

    Glad to hear it is all ok! I had a look and I like what you have done with it as well. Thanks for using my script!


  10. 10March 11th, 2008 at 6:45 pm

    LanceO Says:

    Hi again. Just wondering if it’s possible to set a maximum font size. There are some formatting issues that occur when the font is too big. I looked thru the js, but didn’t see anything obvious (although, I’m a novice javascripter). Thanks for the script!


  11. 11March 12th, 2008 at 7:23 pm

    Phil Says:

    Hi Lance,

    I will email you a potential solution, as it might be a little complex for the comments section here!


  12. 12March 27th, 2008 at 9:01 pm

    wendie Says:

    Hey Phil,

    A nice piece of work. Easy and clean. I (like a few others who have made comments) am not a JavaScript aficionado and I would like to know how to replace the “A+” “R” and “A-” to images (preferably with an css image sprite or similar).

    Thanks


  13. 13March 27th, 2008 at 9:54 pm

    wendie Says:

    Oops. Never mind. I realized I had error in my CSS for the .increaseSize and .decreaseSize classes which made it seem more complicated that what it is. Thanks.


  14. 14March 27th, 2008 at 11:45 pm

    Phil Says:

    Hi Wendie,

    I’m glad you like the script and that you have found a use for it. If you do have any more problems, please let me know and I’ll do my best to help out!


  15. 15April 26th, 2008 at 7:30 am

    Jerry Says:

    Hi If possible could you explain ffurther how to set up this script. Do you think you could provide a n explination of your instruction
    “2. Change the string “fontControls”
    at the very end of the script to the element you want the font sizing links appended
    to.”

    Thank you very much. This looks like a very useful script and I would like to try it but I am not quite understanding how to set it up.


  16. 16April 26th, 2008 at 11:04 am

    Phil Says:

    Hi Jerry,

    You need an element on your page that you are going to append the links that will control the font sizes to, a <div> for example. That element should have an ID, it can be of your choice, or you can use the ID fontControls. That ID should then replace “fontControls” in the script.

    I hope this helps, please get in touch if I can help any further.


  17. 17May 21st, 2008 at 9:40 am

    Rachel Says:

    Hi,
    This script is great, just one problem, it doesnt seem to work in IE 7.0 - Any chance you can help me out with this is it works.
    I normaly use Firefox, but I know lots of my visitors use I.E.
    Many thanks
    Rachel


  18. 18May 26th, 2008 at 3:20 pm

    Rachel Says:

    Also, I am having trouble adding an image to the javascript, so insteed of showing an A+ it shows ann image.
    Could you help me out.
    Thanks
    Rachel


  19. 19June 21st, 2008 at 1:45 am

    Erik Says:

    The new version with class names seems to be broken in IE7. Great script though. Works like a charm in FF (but isn’t that always the case?).


  20. 20June 23rd, 2008 at 7:51 am

    Phil Says:

    Oh dear, broken in IE7?

    I will have to look into this, I was sure it worked. Does it work in IE6?

    Hopefully I can fix this up and let you guys know as soon as possible.


  21. 21June 23rd, 2008 at 4:58 pm

    Erik Says:

    IE6 is broken too. The A+, R, and A- appear but they don’t do anything. I replaced the script with the pre-class name version and it worked perfectly in both IE6 and 7.


  22. 22June 23rd, 2008 at 9:27 pm

    Phil Says:

    Thanks Erik, this should be fixed now! Please see this post for what happened and updated download links.


  23. 23July 21st, 2008 at 1:00 pm

    Tetsuo Says:

    Great script, but one thing I have noticed:

    In IE6/7 (Oh, you knew it was coming!) the default font size is smaller in the demo, and when plugging it into a test page of mine, I found that it made the default font size slightly bigger! The only work around I could find for this was to wrap a around the contents of the page, and serve up a conditional stylesheet for IE, setting that container to a font size of “0.9em”, thus ofsetting the larger size caused by the JS in IE.

    Any idea’s what’s causing this?
    Cheers


  24. 24July 22nd, 2008 at 10:28 pm

    Phil Says:

    Hi Tetsuo,

    I don’t really know what’s going on there, but I will have a look and try to let you know soon!


  25. 25February 8th, 2009 at 10:37 pm

    Conor S Says:

    can you help me.
    how can i use an images instead of A+,R,A-


  26. 26April 14th, 2009 at 9:17 pm

    David R Says:

    i was wondering if there was some way of putting spaces between the A+RA- as it is a bit confusing or even a way of adding images as conor s asks above


  27. 27April 17th, 2009 at 4:54 pm

    Joel Rosado Says:

    This is a great script, thank you so much for sharing it.
    I am a javascript newbie, I too would like to know 2 things:
    1) how to use images instead of links
    2) how to apply the font sizing effect to just specific portions of the page & not the entire body. Any insight-guidance is greatly appreciated… Regards, Joel


  28. 28May 8th, 2009 at 9:49 am

    Nana Says:

    Dear Phil,
    Many thanks for you code. Could you please clarify what you mean by “changing the string “fontControls” at the very end of the script to the element you want the font sizing links appended to”.
    Thanking you in advance and hope to hear from you soon.
    Nana


  29. 29August 25th, 2009 at 2:33 pm

    Jeroen Says:

    Hi Phil,
    Great work. At last a script that works! I am reworking my site and this is just what I need except… I have the same wish as wendie, Rachel, Conor S, David R and Joel Rosado (and many others I guess): to use images instead of A+,R,A-.
    I am a novice in JS, so don’t have a clue how to do that.
    Any help on this would be highly appreciated!


  30. 30December 1st, 2009 at 6:22 pm

    P.Hamers Says:

    You can edit A+,R,A- with CSS.


  31. 31March 25th, 2010 at 7:11 am

    Warezy Says:

    I like your script Phil. As Joel said though, we need to be able to be able to size something more specific other than the entire body! ie. “post” class in Wordpress.

    Much appreciated if you could pastebin (link), so that everyone who reads the comments can take a look (instead of emails etc.)


  32. 32June 1st, 2010 at 5:21 pm

    Robert Says:

    This script is fantastic, thank you for posting it. I too was wondering how the text links could be replaced with images? Any help there would be greatly appreciated.


Leave a Comment