Sizing Text to Container with jQuery ExpandText

A frequent problem with text on the web is that there’s no way to automatically adjust the font size based on the dimensions of it’s containing element – at least in a way that changes size when the container does.

There are a few plugins that automatically size the text (like FitText) but they only increase the font size, and the font sizes don’t adjust when the parent is adjusted.

Enter my newest plugin ExpandText. You can provide a minimum and maximum font size and the plugin will adjust the font when the container element changes dimensions. It uses the width and height of an auto-inserted span which wraps the text directly.

Simply attach the plugin to the text element selector inside of a document ready and window resize:

$(function(){
	$(window).resize(function(){
		$('.text').expandText();
	}).trigger('resize');
});

The benefit of the span technique is that we can avoid trying to measure the characters themselves which change dramatically with each font type and style.

Download the code via GitHub and try out the demo.

Possibly related posts:

  1. jQuery Form Builder Plugin
  2. jQuery Serialize List Plugin

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment