Using FontSizer

The FontSize Change JavaScript can be set up to work with your documents whether you specify font sizes using em's, percentages, pixels, points, constants, font tags with size attributes, or even if you haven't set font sizes at all. The code works whether you have specified styles internally, externally or inline.

This code, called FontSizer DX, is quite flexible and can be used in a wide variety of situations, either to enable users to control text size throughout your document, on major portions of your layout, or only one or a few discrete sections. Examples describe and demonstrate.

Basic Setup Instructions

The following may be all you need to implement the code:

  1. Include script tags pointing to the external JavaScript files.
  2. Place a sizer div in the document where you wish the controls to appear.
  3. Initialize the code.

Script Tags

Place script tags for the external JavaScript files, adjusting the path according to your needs: 

<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_cookies.js" type="text/javascript"></script>
<script src="js/dw_sizerdx.js" type="text/javascript"></script>

They can be placed in the head of your document or just before the close body tag. ^

Sizer Element

Place a div or other element with id sizer where you wish the controls (text links or images) to appear in your layout. 

<div id="sizer"></div>

You can place images[1] or text links of your choice in the sizer div. No need for the event handler attributes in the markup since the code will set up the event handling for you.

<div id="sizer">
    <a class="increase" href="#" title="Increase text size">
        <img src="images/plus.gif" alt="" /></a>
    <a class="decrease" href="#" title="Decrease text size">
        <img src="images/minus.gif" alt="" /></a>
    <a class="reset" href="#" title="Restore default font-sizes">
        <img src="images/reset.gif" alt="" /></a>
</div>

If you prefer not to include the images or text for the controls in the markup you can leave the sizer div empty and let the code set up the controls for you using a small additional js file provided to licensed users. ^

Initialize

The code is initialized with: dw_fontSizerDX.init(). The call to the function can be placed at the end of the document or it can be called onload:

dw_Event.add( window, 'load', dw_fontSizerDX.init );

If you do not achieve the desired results following the above steps read on for more details on how to control the code under different scenarios and for different purposes. ^

Examples Demonstrating Implementation

The approach to setting up the code depends upon how your style sheets currently control font size, and upon the desired effect you wish to achieve; that is, whether you want global text resize or precise control over which page elements are resized. The following examples demonstrate and provide more information:

  • Simple Setup for global resize if your style sheets are set up primarily using relative font-sizes. It still works if you have set font-size on the body and/or table cells using pixels, points or constants though.
  • Global resize for documents with style sheets containing font-size specifications on various elements using pixels, points or constants.
  • Resize specific portions of a document's layout.
  • Exclude specific portions of a document from text resize.

The examples demonstrate and provide more information for setup. These examples are also included in the download file, giving you an easy starting point for implementing the code in your documents.

Controlling Text Resize

How to tell the code what you want resized and how much? Using two methods: setDefaults and set. You may not always need to use these methods though, since the code contains some initial defaults. The simple example explains and demonstrates.

The setDefaults Method

The setDefaults method sets the defaults for the code: the unit of measurement to use for font size, the default font-size, minimum and maximum font-sizes, and the list of selectors[2] to which to apply these defaults. For example, the following invocation of the setDefaults method sets the unit of measurement to pixels, the default font-size to 14px, the minimum font-size to 9px and the maximum font-size to 32px and applies these settings to paragraphs with class article and table with id main.

// size unit, default, min, max, selector list (optional)
dw_fontSizerDX.setDefaults('px', 14, 9, 32, ['p.article', 'table#main'] );

If no selectors are passed to the setDefaults method the sizes will be applied to the body and table cells.

The setDefaults method should only be invoked once. The set method can be used an unlimited number of times.

The set Method

The set method is used for refinement and exceptions to defaults. It has the same arguments as setDefaults except it does not include unit of measurement. The following set method sets the default size, minimum and maximum font-sizes on table cells with class navs and the div with id ads.

// default, min, max, selector list
dw_fontSizerDX.set(12, 9, 18, ['td.navs', 'div#ads'] );

The last argument to both the set and setDefaults methods is an array which can include as many selectors as you like. This code supports the use of element, class, id, and descendant (or contextual) selectors. That is, you can tell the code what you want resized by referring to:

  • HTML elements, such as p, td, or div, as in: 
    dw_fontSizerDX.setDefaults('px', 14, 9, 24, ['p', 'td', 'div'])
  • Class attached, for example: td.article (table cells with class article), li.subnav (list items with class subnav), or .title (any element with class title), as in: 
    dw_fontSizerDX.set(12, 10, 18, ['li.subnav', '.title'])
  • Id attached: div#article (a div with id article) or #main (any element with id main), as in: 
    dw_fontSizerDX.setDefaults('px', 14, 9, 32, ['table#main'])
  • Descendant selectors, that is, elements contained within other elements, such as: td p (paragraphs in table cells), or div ul li (list items inside unordered lists inside divs), as in: 
    dw_fontSizerDX.set(14, 9, 24, ['td p', 'div ul li'])
  • A combination of the above, as in: 
    dw_fontSizerDX.setDefaults('px', 14, 9, 24, ['#main td.content p'])

Elements contained within the selectors you specifiy will inherit font sizes based on the same principles as inheritance usually applies in style sheets. Since the code sets style inline it will override style sheet specifications for the elements in question.

Coordinating the Code with your Style Sheets

For best results you will want the code defaults to match font-size specifications in your style sheet. That is, if you have set the font-size to 14px in the style sheet, on the body or some other primary page element, set the code defaults to match. The fontsizer defaults are initially set near the top of the dw_sizerdx.js file. You can adjust them there or make use of the setDefaults method. For example, near the top of dw_sizerdx.js you will see settings such as:

var dw_fontSizerDX = {
    sizeUnit: 'px',
    defaultSize: 12,
    maxSize: 21,
    minSize: 9,
    // more code ...

These would be set or adjusted using the setDefaults method as follows:

// size unit, default, min, max, optional list of selectors
dw_fontSizerDX.setDefaults('px', 14, 10, 26, ['div#content'] );

The default sizeUnit in the code is pixels. You can set the code to use em's or percentages as well. You can use the setDefaults method to set up the code to use em's or percentages as follows: 

// for em's:
dw_fontSizerDX.setDefaults( 'em', .8, .6, 2 );

// for percentages
dw_fontSizerDX.setDefaults( '%', 90, 60, 200 );

Further Information

Here are some links to information on CSS, for those unfamiliar with the terminology used here:

Back to top

  1. A blue border will appear around linked images unless you indicate otherwise, either in the border attribute of the image tag (border="0") or in the style sheet. If you are using a strict doctype and want your document to validate place the following in the style sheet: a img { border:none; } ^
  2. For those who may be unfamiliar with the term, a selector in CSS is the portion of the style rule used to specify which page element(s) you wish to attach styles to in a style sheet, such as td.navlinks, div#pagetext, or simply p or h1. ^