22 Dec

Abbreviator: a jQuery plugin for fitting chunky content

Inside FreshBooks (the application), there’s a few places where we abbreviate long-ish text with ellipses to make it fit inside small table cells. This is done in PHP by a single function, whose two parameters are a string and the desired character length.

Of course, not all characters are made equal. We estimate appropriate character lengths as best we can, but it doesn’t always work. If users have a penchant for typing in capital letters, or use text zoom, our little abbreviating function can fail. And of course, every design change to these areas require new character length settings – a task that is easily forgotten.

So, after some sanity checking/brainstorming with my co-workers Taavi and Justin, I put together a little jQuery library for accomplishing this feat in Javascript. It’s called Abbreviator, and it adjusts for font size, browser rendering differences, padding, and more. Take a look at the project page for more.

That’s it for me for the year – Happy holidays!