slabText is a jQuery plugin that splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Here are a few things to remember when using the plug-in:

1. Headlines with lots of horizontal space to fill are more gracefully displayed across browsers.
2. Headlines with little horizontal space tend to have jagged right edges, especially if the rows have been preset within the markup and each row has a wildly varying letter-count. Firefox appears to be the best at resizing-to-fit the word combinations and some fonts tend to be better than others at being resized-to-fit.
3. The element to be given the slabText treatment has its (inner)HTML replaced entirely (by using the jQuery .html method), which means that all images and links contained within will disappear without a trace.
4. Unlike the original slabtype algorithm, vertical space is not taken into consideration at all.
5. I’ve no idea how the script behaves in a right-to-left environment.
6. Untested in older versions of IE although, in theory, there’s nothing that even IE6 can’t handle.
7. Always call the script after all fontface fonts have downloaded (if using). I’ve hacked this for the demo to enable you to see the headline transformation as the script kicks-in but you should always use google WebFont loaders active() and inactive() callbacks to launch the slabText treatment (or a similar "font loaded" callback feature from another font provider).

Demo & Download: http://www.frequency-decoder.com/demo/slabText/

←Previous HTML KickStart: Rapid Building Website Layouts		Qommunication: Free Facebook Clone Script Next→