jQuery Fontscale Plugin

Overview

The jQuery Fontscale plugin is a module for jQuery that facilitates dynamically resizing the font size of specified elements. It supports sizing fonts up or down by configurable increments and units (pixels or percent). If the cookie jquery plugin is loaded, it also supports saving the modified font state via cookie. Font resizing is triggered by a click or other specified event.

Invoking Fontscale

Fontscale has been designed to be simple to use yet highly configurable. Syntax is as follows:

$("element that triggers resize").fontscale(
  elements to scale font of (e.g. "#contents p"),
  direction of scale (one of "up","+","down","-" or "reset"),
  [optional parameters] (an object)
);

Optional parameters (and their defaults) are as follows:

{
  increment: Integer indicating amount to scale by (default: 2),
  unit: String for type of scale:"px" or "percent" (default: "px"),
  adjustLeading: Boolean to explicitly scale line-height attribute (default:false),
  event: jquery event that triggers scaling (default:"click"),
  useCookie: Boolean for storing change state in a cookie (default:true),
  cookieName: Name of cookie used to store scale info (default:'fontscale'),
  cookieParams: Additional cookie settings object, see cookie docs (default: {expires:30,path:"/"})
}

Note that all the cookie-related stuff requires that the cookie plugin also be installed. Use of the adjustLeading functionality is generally discouraged and may result in undesired behavior — for best results you should set your line-height in your CSS in something like “em” units and then it should automatically scale along with the font size.

You may be able to get away with units other than “px” or “percent” (e.g. “em”, “pt”) but that hasn’t been tested yet. :)

Demos & Examples

Here are a few basic examples:

$("a#fontgrow").fontscale("p","+");
$("#fontsrhinker").fontscale("#contents","down",
  {unit:"percent",
   increment:25,
   useCookie:false,
   adjustLeading:true});
$("#originalsize").fontscale("p.text","reset");

A very basic live demo is also available. More demos and examples should be available soon.

Downloads

jquery.fontscale.js (full, human-readable javascript file)

jquery.fontscale.min.js (shrunk using YUI compressor)

jquery.cookie.js (hosted off-site)

Feedback & Support

Fontscale is in very early development: your feedback will help make it better (provided you supply meaningful information) and I welcome hearing about fontscale’s use. Please contact me via email.

Update

I released a new version (0.1.1) of Fontscale on May 17, 2010. This update fixes a bug wherein the stored cookie “delta” value was being incremented each time an element was modified, rather than each time the scale event was triggered. Oops!  Thanks to Richard Baskett for pointing out the bug.

Update, Take 2

I released a new version (0.2) of Fontscale on July 21, 2010. This update fixes a bug wherein the “reset” was failing to truly reset the cookie’s stored value when units other than “percent” were used — it’s now been modified to delete the cookie on reset, rather than adjusting its value.  Thanks to Glenn Eastland for notifying me of this issue.