New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

Document Text Sizer

Description: Sometimes the text size you've specified for your webpage isn't suitable to the viewer, depending on his browser configuration or OS. This useful script by Taewook uses Dynamic CSS to let the viewer himself modify the text size of the page on demand, by clicking on an Increase or Decrease Font Size link. Now that's a kind of personalization your viewers may just appreciate!

This script is most appropriate for webpages styled using CSS or a minimal of deprecated HTML tags, though it can also affect text sized using explicit <font size="x"> tags (see Customization below). Compatibility wise, a DOM enabled browser is required for the script to take affect- IE5+/NS6+/Opera 7+ etc.

Demo: Click the below links:

+ Larger Font | + Smaller Font

Directions: Developer's View

Step 1: Add the following code to the <HEAD> section of your web page:

Select All

The above script references an external .js file. Download this file here (right click, and select "Save As").

Step 2: Now set up the two links that will increase and decrease your text size. The following will do nicely:

Select All

And that's it!

Customization

There are two areas within the script you can make changes.

First, within textsizer.js, you can add additional HTML tags the script should affect. Lets say your webpage's text are all controlled using explicit <font size="x"> tags. You can add "font" as a tag the script should affect.

Second, inside the code of Step 2, you may substitute "body" with another tag name or even ID name, to localize the text size manipulation to only the specified containers.