Posts Tagged ‘accessability’

Dynamic Increase / Decrease Font Size Box with Javascript

Sunday, July 20th, 2008

Web Accessibility is important aspect of the modern websites and including functionality for increasing / decreasing the font-size of the body text is a good step for achieving it. With all recent A grade browsers this is kind of unneeded since they have build in zoom functionality (ctrl + / ctrl -) but still there are couple of advantages for using custom solution:

  1. Preventing broken design due to resizing displacements
  2. Easier for less experienced users who don’t know how to zoom from the browser
  3. Looks kind of cool 🙂

The script I’ve written has the following features:

  1. Stores settings (increase/decrease value) in cookie
  2. Uses style switching (overwriting) so there is no font resizing after page load
  3. Limits the resizing to three steps in each way

Here is the code and example. Note that I’m changing only the body font-size because all paragraphs are using relative units (em). If you prefer to use absolute units (px) you will need to declare all CSS selectors you are using.

dynamic font resizing

Of course there are couple of things which can be improved but I wanted a simple script working under all major browsers : IE 6+, FF, Opera, Safari.