jQuery Text Resizer Plugin

The jQuery Text Resizer Plugin allows you to create controls for changing the font size of one or more elements on a page. It gives your users a fine degree of control over font sizes. It is flexible in that it lets you specify exactly how to resize text, how it should be styled (via CSS or CSS3), where in your page it should be resized, and how the font size controls are to be structured.

Though modern Web browsers do offer text-resizing functionality, many Web users aren’t aware that these features exist and might appreciate a convenient method to control the font size of the content they’re reading. Since not all users browse your Web pages with a desktop or laptop, modern Web development demands designing with mobile devices in mind. Screen sizes vary per device, and so do font sizes. Typography is more important than ever. jQuery Text Resizer can aid you in creating the controls for sizing content on demand.

The plugin works in tandem with the jQuery Cookie plugin so that it’s able to remember the user’s settings on their next visit (if they have cookies enabled, of course).

Live Demos

History of Changes

1.1.0 (June 9, 2013):

Updated documentation coming soon!

  • Improved codebase.
  • Enhanced navigation between demos.
  • New features and enhancements: debug mode, suppressClickThrough

1.0.0 (September 3, 2009)

  • Initial release

Dependencies

The Text Resizer plugin depends the following components.

  • The awesome jQuery 1.3.2 JavaScript library or later.
  • The jQuery Cookie Plugin: Though it is not required, it is recommended for the sake of improved (and expected) user experience. The Text Resizer plugin checks whether the jQuery Cookie plugin is installed.

Referencing

Reference jQuery, the Cookie and Text Resizer plugins in the HEAD section of your HTML document:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.textresizer.js" type="text/javascript"></script>

Basic Syntax

The basic syntax for invoking the Text Resizer plugin is as follows. This code segment should appear after the above three script references or wherever you prefer to place your JavaScript, such as before the closing BODY tag:

<script type="text/javascript">
jQuery(document).ready( function() {
   jQuery( "<resize button selector>" ).textresizer({
      target: "<element selector>"
   });
});
</script>

where:

  • <resize button selector> is a valid jQuery selector pattern. The resize button selector references a list of buttons (which can be <A> tags).
  • <element selector> is a valid jQuery selector pattern that targets the block of text to resize.
  • The .textresizer() method invokes the Text Resizer plugin.

Structuring Resize Buttons

The main idea is to create a list of buttons, each of which the user will click to resize the targeted content in the HTML document. The buttons can be anything. They can be mere <input type=”button” /> elements or the humble anchor tag (<A>). How you organize that list of elements is entirely up to you. All that the Text Resizer plugin cares about is that a list of buttons is required. Here’s an example that uses an unordered list with class “textresizer” enclosed in a DIV element, which uses the ID “textsizer”.

<div id="textsizer">
   <p>Font Size:<p>
   <ul class="textresizer">
       <li><a href="#nogo">S</a></li>
       <li><a href="#nogo">M</a></li>
       <li><a href="#nogo">L</a></li>
       <li><a href="#nogo">XL</a></li>
   </ul>
</div>

CSS follows below:

/**********************************
	Text Resizer Buttons
 **********************************/
#textsizer
{
	margin-bottom: 6px;
}
	#textsizer p
	{
		display: inline;
	}
ul.textresizer
{
	list-style: none;
	display: inline;
	margin: 0px;
	padding: 0px;
}
	ul.textresizer li
	{
		display: inline;
		margin: 0px;
		margin-right: 5px;
		padding: 0px;
	}

	ul.textresizer a
	{
		border: solid 1px #999;
		padding: 2px 3px;
		font-weight: bold;
		text-decoration: none;
	}

	ul.textresizer a:hover
	{
		background: #e5e5e5;
		border: solid 1px #cccccc;

	}

	ul.textresizer .small-text
	{
		font-size: 11px;
	}

	ul.textresizer .medium-text
	{
		font-size: 13px;
	}

	ul.textresizer .large-text
	{
		font-size: 15px;
	}

	ul.textresizer .larger-text
	{
		font-size: 17px;
	}

	/* Style of active button */
	ul.textresizer a.textresizer-active
	{
		border: solid 1px #2B562B;
		background: #FFCA6F;
		color: #000000;
	}
/* End of Text Resizer Buttons */

Invoking the Plugin

Assuming the setup illustrated above and that the Text Resizer should target the contents of a DIV block with ID “maincontent”, the Text Resizer plugin can now be invoked like this:

jQuery(document).ready(function() {
    jQuery("#textsizer a").textresizer({
		target: "#maincontent"
	});
});

The above jQuery snippet selects all anchor tags (<A> tags) in the HTML block uniquely identified by the “textsizer” ID.  It then attaches a click event handler to each anchor tag for each available text size in successive order and targets the block of HTML with ID #maincontent.

Options

The Text Resizer plugin has the following advanced options. Realistically, I foresee many people using the advanced features more rather than the basic configuration shown above.

Property Description Example
target The target is a valid jQuery selector. This property represents the block of HTML that will be resized by the plugin. The default value is the body tag, but it is recommended to specify where the resizing should take effect. Defining a specific section in an HTML document allows us to create some interesting text resizers, such as multiple text resizers per page. I’ve never seen that, but I cannot envision how others will use this plugin. /* Targets an element identified by the ID “content” */
target: “#content”

or

/* Targets paragraph tags in DIV tag with class “content”. */
target: “div.content p”

type Possible values “fontSize”, “css” or “cssClass”.

“fontSize”
Informs the plugin that fixed font sizes (such as px, em %, and pt) will be used. This is the default setting. The default unit is px (pixels). The smallest size is 14px, medium 16px (1em or normal), and it keeps incrementing in intervals of 2 units up to the number of resize buttons. Therefore, if there are 4 resize buttons, there will be 4 different sizes in the following order: 14px, 16px, 18px, and 20px.

“css”
Indicates that CSS style properties will be used to define the exact appearance of the resized text. More will be said later.

“cssClass”
Indicates that CSS class names will be used to define available font sizes. Recommended setting.

See examples below.
sizes This property defines a JavaScript array of font sizes that will be available in the page. The number of elements in the array must be equal or greater than the number of resize buttons in the page. If this condition fails, the plugin will cease its execution. See examples below.
selectedIndex Indicates which font size in the sizes array above should be selected by default when the user visits the page for the first time. This is the zero-based index of an element defined in the sizes array; that is, the first element is 0, the second is 1, the third is 2, and so on. The plugin uses the textresizer-active CSS class for this purpose. See below for an example. /* Applies the font size definition in the third element of the sizes array and decorates its corresponding resize button with the textresizer-active CSS class. */
selectedIndex: 2

Examples

To make things clearer, here are a few examples of the Text Resizer plugin with each of its type settings. Note the difference in the jQuery selectors for each type below. This is very important if you have multiple instances of the plugin in the same page. I have a link to a live example at the bottom of this page.

type: “fontSize”

This code selects all anchor tags located in the element with ID “textsizer”. It then targets an element with ID of “maincontent”, specifies that the font size type is a list of font sizes and defines the list of possible font sizes in the sizes array. Note that the type: “fontSize” setting is commented out because it is the default setting.

jQuery(document).ready( function() {
	jQuery( "#textsizer a" ).textresizer({
		target: "#maincontent",
		// type:   "fontSize",
		sizes:  [ ".8em", "1em", "1.5em", "2em", "2.5em" ]
	});
});

type: “cssClass”

The type: “cssClass” option is my recommended setting because you can style both the resize buttons and the target section in the HTML document, albeit it isn’t the default setting. In the example below, we are selecting the anchor tags located in the element marked with the “textsizer” ID. The “textsizer” represents the resizer buttons. We then specify that the text to resize will be located in an HTML block with an ID of “maincontent”. The different font sizes will be defined by four CSS classes (small-text, medium-text, large-text and larger-text)–Note that these CSS class names are not prefixed with a period (.). Since we are using CSS class names, we must use the “cssClass” value of the type setting. Notice that the selectedIndex setting is used to inform the user that the “medium-text” size is the selected font size.

jQuery(document).ready( function() {
  jQuery( "#textsizer-classnames a" ).textresizer({
     target: "#maincontent",
     type: "cssClass",
     sizes: [
        "small-text",
        "medium-text",
        "large-text",
        "larger-text"
     ],
     selectedIndex: 1
  });
});

When using the “cssClass” setting, you can then assign the same class names you specified in the sizes array to each resize button, as shown below.

<div id="textsizer-classnames">
   <p>Font Size:</p>
   <ul class="textresizer">
      <li><a href="#nogo" class="small-text" title="Small">A</a></li>
      <li><a href="#nogo" class="medium-text" title="Medium">A</a></li>
      <li><a href="#nogo" class="large-text" title="Large">A</a></li>
      <li><a href="#nogo" class="larger-text" title="Larger">A</a></li>
   </ul>
</div>

This is why I prefer using this method. You can then define the exact look and feel of each resizer button and the content to resize in your style sheet. Here’s an example:

#textsizer-classnames
{
	margin-bottom: 6px;
}
	#textsizer-classnames p
	{
		display: inline;
	}
ul.textresizer
{
	list-style: none;
	display: inline;
	margin: 0px;
	padding: 0px;
}
	ul.textresizer li
	{
		display: inline;
		margin: 0px;
		margin-right: 5px;
		padding: 0px;
	}

	ul.textresizer a
	{
		border: solid 1px #999;
		padding: 2px 3px;
		font-weight: bold;
		text-decoration: none;
	}

	ul.textresizer a:hover
	{
		background: #e5e5e5;
		border: solid 1px #cccccc;

	}

	ul.textresizer .small-text
	{
		font-size: 11px;
	}

	ul.textresizer .medium-text
	{
		font-size: 13px;
	}

	ul.textresizer .large-text
	{
		font-size: 15px;
	}

	ul.textresizer .larger-text
	{
		font-size: 17px;
	}

	ul.textresizer a.textresizer-active
	{
		border: solid 1px #2B562B;
		background: #FFCA6F;
		color: #000000;
	}

#maincontent
{
}
	#maincontent.small-text
	{
		font-size: 11px;
	}

	#maincontent.medium-text
	{
		font-size: 13px;
	}

	#maincontent.large-text
	{
		font-size: 15px;
	}

	#maincontent.larger-text
	{
		font-size: 17px;
	}

type: “css”

This is an advanced setting for those users who prefer writing up the exact CSS to apply to the resized content. Think of it as an embedded style sheet. In fact, it is an embedded stylesheet.

In my example below I am defining 4 different text sizes:

  1. The first one (Small. Index 0) tells the plugin that the font size will be at 80% of the “normal” font size defined by the HTML document’s stylesheet. I am also telling the text resizer plugin that the color of the small text should be red.
  2. The second one (Medium. Index 1) defines the font size as 100% of the “normal” font size and the color is blue. The selectedIndex option tells the plugin that this is the default setting.
  3. The third option (Large. Index 2)  specifies the font size as 120%. A bit larger than normal. The color is defined as dark green.
  4. Finally, the fourth option denoted by the comment “Larger. Index 3″ specifies that the font size is 140% and that the color of the resized text should be purple.

This example tells the text resizer plugin to attach itself to a list of buttons (anchor tag) in an element marked with the ID “textsizer”. The target, that is the content to resize, is in an HTML block identified with the unique ID “maincontent”.

For more information on how to define CSS properties in JavaScript, visit the jQuery documentation on css( properties ). The syntax defined there is the same I am using here.

jQuery(document).ready( function() {
	jQuery( "#textsizer a" ).textresizer({
		target: "#maincontent",
		type: "css",
		sizes: [
			// Small. Index 0
			{ "font-size"  : "80%",
			  "color"      : "red"
			},

			// Medium. Index 1
			{ "font-size"  : "100%",
			  "color"      : "blue"
			},

			// Large. Index 2
			{ "font-size"  : "120%",
			  "color"      : "darkgreen"
			},

			// Larger. Index 3
			{ "font-size"  : "140%",
			  "color"      : "purple"
			}
		],
		selectedIndex: 1
	});
});

Styling the Active Size

The Text Resizer plugin uses the CSS class name .textresizer-active to indicate which button is active. It appends this class name to the button that is clicked on. For example:

CSS:
Assuming that the resize button is in an anchor tag located in an unordered list marked with the class “.textresizer”:

ul.textresizer a.textresizer-active
{
  border: solid 1px #2B562B;
  background: #FFCA6F;
  color: #000000;
}

The HTML then renders as follows, where the active button is the “Large” font size.

<div id="textsizer">
   <p>Font Size:</p>

   <ul class="textresizer">
	   <li><a href="#nogo" class="small-text" title="Small">A</a></li>
	   <li><a href="#nogo" class="medium-text" title="Medium">A</a></li>
	   <li><a href="#nogo" class="large-text textresizer-active" title="Large">A</a></li>
	   <li><a href="#nogo" class="larger-text" title="Larger">A</a></li>
   </ul>

</div>

Licensing Information

jQuery Text Resizer is published under the MIT License.

Copyright © 2009-2013 Mario J Vargas

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

48 thoughts on “jQuery Text Resizer Plugin

  1. Pingback: Useful jQuery Plugins for improving Typography

  2. Pingback: 10 jQuery Plugins to Enhance Web Typography

  3. Pingback: 8 Useful jQuery Plugins to improve Your Typography | Mystrious

  4. Pingback: 15 jQuery Plugins To Improve Typography

  5. Pingback: 8 jQuery Plugins for Enhancing Typography | Pure Awesomeness

  6. Pingback: jQuery Text Resizer PluginがSafariで動かない | args

  7. Pingback: jQuery: ページ内のフォントサイズを変更してくれる「Text Resizer」 | Think deeply, Do less, More effective

  8. Pingback: 23 Useful jQuery Plugins For Web Typography | Design Inspiration

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>