I ran across Brian McAllister's slabtext jQuery plugin, and was immediately taken by the concept of algorithmically slabbing text. That, of course, led me to Erik Loyer's slabtype algorithm. After taking a close look at the algorithm, It seemed a bit complicated to me. The algorithm first creates an optimal slab, based on the width of the box and the font-size of the container, then resizes the result to match the height of the container. The end result has the potential to create very sub-optimal slabs, when height is a factor.
I redesigned the slabbing algorithm, at the cost of a few CPU cycles, to produce a much more optimized slab, when the container height is known. Rather than basing the slabbing algorithm on font-size and a magic ratio, jSlabify bases its slabs on comparing proportions. It renders the text as a single line, and captures the dimensions and the area, in characters, of the resulting box. Then, it calculates the height, in characters (read: row count), necessary to contain the same area (read: number of characters) in a box proportional to the container. The relevant formula is:
While the script does an admirable job at automating the creation of the individual rows, there are certainly situations in which you would choose to control the word combinations used to split the headline.
This can be achieved by presetting the word combinations (using <span class="slabbedtext">
wrappers) within the markup[1]. Should the script detect that the headline has been preset, it will not attempt to dynamically create the word combinations and simply fallback to resizing the preset rows to fit the available horizontal space.
Adding the span
elements to the page markup in this way gives you absolute control over the word combinations used to split the headline text and also enables the targetting of specific rows within the CSS (in order to tweak the line height, change the font family etc).
Presetting the headline does have its drawbacks though – at smaller sizes and if the rows have wildly varying letter-counts, jagged right edges may be displayed. The script will adjust the word-spacing
or letter-spacing
in an attempt to rectify over-shoots or under-shoots in line length like this.
The following demo showcases two versions of the same headline, the first has rows (word combinations) dynamically calculated by the script while the second has rows preset within the markup (and therefore only resized-to-fit by the script).
The following word combinations are calculated by the script
The following word combinations are preset within the markup
If the original header contains a link (or should itself have an href set), the generated spans will be wrapped in a link that uses the same href.
You may wish to remove the jSlabify treatment entirely should either the viewport or the header element resize to below a certain, predefined width; for example, if the viewport width drops to below 380 pixels. This can be achievied by using the viewportBreakpoint
and headerBreakpoint
plugin options, detailed below.
This demo page has set viewportBreakpoint
to be 380 pixels. Resizing the browser window to anything below this should remove the jSlabify treatment from the headlines altogether.
The following options can currently be passed to the plugin. The first three listed (fontRatio
, forceNewCharCount
and wrapAmpersand
) are only used whenever the plugin has to dynamically create the word combinations i.e. if <span class="slabbedtext">
elements are not already present within the markup.
font-size
changes (FALSE). Setting this value to FALSE will inevitably save CPU cycles but is only really of use in modern browsers that respond to media queries (or older browsers have been patched to respond to media queries). Defaults to TRUE.<span class="amp">
(TRUE) or not (FALSE). Defaults to TRUE.window.resize
event (TRUE) or not (FALSE). Useful for those of you using a fixed width layout. Defaults to FALSE.window.resize
will be throttled to. Defaults to 300.line-height
, word-spacing
and font-size
. Defaults to 3.It’s also worth noting that any non-breaking space character used to prevent widowed words within the original, non-adjusted headline will also be included within the adjusted headline.
The plugin requires the following CSS rules are made available:
.slabified .slabbedtext
{
display:-moz-inline-box;
display:inline-block;
white-space:nowrap;
}
.slabbedtextinactive .slabbedtext
{
display:inline;
white-space:normal;
font-size:1em !important;
letter-spacing:inherit !important;
word-spacing:inherit !important;
*letter-spacing:0 !important;
*word-spacing:0 !important;
}
.slabbedtextdone .slabbedtext
{
display:block;
}
The span
elements added to the headline are given the class slabbedtext
and the document body
given the class slabified
.
Using a double-whammy className inheritance trick like this means that you can safely add the <span class="slabbedtext">
elements into the markup but they won’t actually get styled until the script gets called and the slabified
classname added to the body
.
The span
elements are set as display:inline-block
during the font-size calculation. This is to take advantage of the inline-block
shrink-wrap effect that enables the script to determine the width of each row.
Unfortunately, one side-effect of using inline-block
means that the injected span
elements react to surrounding whitespace (which, amongst other things, augments the vertical spacing between rows) – this is remedied by giving the header a classname of slabbedtextdone
whenever the font-size
calculation is complete, which sets a display:block
style and avoids the whitespace and styling issues associated with inline-block
.
Sharp-eyed readers may have noticed that the value of zero is passed to Internet Explorer using the star-hack. This is because IE < 8 doesn’t understand the inherit
property and so we reset to zero as a failsafe.
The CSS file is miniscule though and you may be better off pasting the contents of the minified version bundled with the download into your main CSS file to avoid an unnecessary HTTP request.
Here are a few things to remember when using the plug-in:
.html
method), which means that all images and links contained within will disappear without a trace.inline-block
, cannot scale down the text when the browser viewport is reduced in width. This will not be an issue if you serve a fixed width design to IE6 and fluid width design to other, more capable browsers.inherit
which means that the letter-spacing
and word-spacing
have to get reset to zero whenever the jSlabify treatment is removed by the script.fontface
fonts have downloaded. 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 jSlabify treatment (or a similar "font loaded" callback feature from another font provider).Based on the nice, shiny fittext jQuery plugin by Paravel & the wonderful slabtype algorithm by Erik Loyer. Zach Leatherman has also written a jQuery plugin named BigText with similar but not exact functionality which is well worth a visit.
The code can be downloaded from github. Both minified and unminified versions are included within the bundle. The minified version currently clocks-in at 4k – this drops to around 3k when gzipped.
As way of example, here’s a random assortment of book titles (Note: I’ve left widowed words in all of them).