Pully: jQuery plugin for automatic pull quotes

Demo - Download

Another quick experiment. Honestly, I don’t use pluggable functions in jQuery nearly as much as I should, so this is really just a brain exercise to get myself used to it. This one, called Pully, lets you specify a selector to have its contents cloned and inserted as a pull quote in your text.

It seems to me that the average HTML pull quote, when you look at it from a source code or screen reader viewpoint, is redundant and/or confusing. They really only make sense when they’re visually styled. My thought is to use semantic markup within a block of content to emphasize pull-quotable text, and then unobtrusively create the pull quote from that text when it’s of use. I could be operating under faulty assumptions, but it makes sense to me tonight.

Pully has two options, newclass and prependtoparent. newclass determines the class that is added to the inserted pull quote element, and defaults to ‘pullyquote’. prependtoparent determines whether the pull quote element is inserted “inline” (directly before the selected source element) or moved up in the DOM and prepended to a parent element. It defaults to false (inline) and can be set to any element found upstream in the DOM from the source.

In its simplest usage, you can take a paragraph which contains a span with a class of .pullquote (for example) and call it like this:

$(document).ready(function() {
	$('.pullquote').pully()
});

Here’s an example of Pully being run with all options. This call will take an <em> block inside of a <strong> element and turn it into the pullquote. It will insert the new element at the beginning of the enclosing paragraph and apply the class “ppullquote” to it:

$(document).ready(function() {
	$('p strong>em').pully({'prependtoparent':'p','newclass':'ppullquote'});
});

You’ll need to provide your own CSS. Unless otherwise specified, your pullquote will have a class of “pullyquote,” to which you can apply whatever styles are most fitting. I borrowed some styles from type-a-file for the demo, the pertinent portions are included in the main source of the demo page.

You can download the plugin here, and view it in action here. Feel free to modify, repair or improve on the idea.