Full Width Text is easy to achieve with the widetext jQuery plugin

Download Contribute

I was searching around the internet trying to find a responsive text solution that was lightweight and easy to use. The few that I stumbled upon didn't work exactly how I wanted, or they had too many bells and whistles.

As always, I decided to mess around with each one to figure out the best approach I could take to simplify everything and get it working for me. In the end, I managed to put together a tight little jQuery plugin that gets the job done and nothing more.

/**
 * jQuery.wideText
 * Version 1.0
 * Copyright (c) 2012 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 10/03/2012
 **/
( function($) {
	$.fn.wideText = function() {
		return this.each( function() {
			// Add "wtext" class to each element and then set up the magic
			var	obj = $(this),
				rtext = obj.addClass( 'wtext' );

			// Work that magic each time the browser is resized
			$(window).on( 'resize', function() {
				obj.css( { 'fontSize': parseInt( obj.css( 'fontSize' ) ) * ( obj.parent().width() / obj.width() ) + 'px', 'visibility' : 'visible' } );
			} ).resize();
		});
	};
} )(jQuery);

Once you've included jQuery and my jquery.wideText.js file on your page, you can call the WideText function like so...

$(window).load( function() {
	$( '.responsive' ).wideText();
} );

Make sure to add this little snippet of CSS to yoru stylesheet so each element is ready to be resized.

/* =Default needed for WideText jQuery plugin
-------------------------------------------------------------- */
.wtext {
	white-space: nowrap;
	display: inline-block;
}

To avoid seeing your text before it's resized correctly, add visibility: hidden; to the CSS for each element. If you only include this in the default CSS above it won't work, since that class selector will only take affect after the DOM is loaded when the function fires.

To see it all working, resize this page and keep an eye on the header text and buttons above.