Automatic Pull-quotes with Behaviour and CSS

Our new favorite toy around here is automatic pull-quotes using Javascript and CSS. We wanted an elegant and aesthetically pleasing way to add interest, gravitas, and improve the scannability of some of our pages, especially when an image is unavailable or inappropriate.

After a little digging around, we discovered that Roger Johansson at 456 Berea Street had implemented an elegant method for pull-quotes on his website that degrades gracefully when Javascript is disabled or unavailable. After looking at his code, we realized that some of the work could be eliminated by using Ben Nolan’s Behaviour (which we already thoroughly use) and that there were a couple of things that needed to be improved upon for our needs.

So, after a little hard work and testing, we developed a bit of Javascript and CSS that does just that. The improvements are as follows:

• Ensures that the pull-quote has no widows
• Allows for easy citing the source of a quotation when needed
• Dynamically punctuates pull-quotes with smart quotation marks and ellipses when appropriate

The Javascript

Requires Behaviour and Javascript Widon’t.

var behaviourHooks = {
	'span.pullquote' : function(element) {
		var pullquote		= document.createElement('blockquote');
		pullquote.className	= element.className;
		var pullquoteP		= document.createElement('p');
		pullquoteP.className	= 'q';

		// Insert the pullquote text
		for(j = 0; j “' + pullquoteP.innerHTML.substr(0, 1) + '' + pullquoteP.innerHTML.substring(1, pullquoteP.innerHTML.length) + '”';
			pullquoteP.className	+= ' cited';

			// create the citation
			var citationP		= document.createElement('p');
			var citation		= document.createElement('cite');
			citation.innerHTML	= '— ' + rel;
			citationP.appendChild(citation);
			pullquote.appendChild(citationP);
		}

		// Insert the blockquote element before the span element's parent element
		element.parentNode.parentNode.insertBefore( pullquote,element.parentNode );
	}
};
Behaviour.register(behaviourHooks);

The CSS

Here is the CSS that we are using on the Gustavus website. Obviously, this can easily be tweaked to fit your site’s design or tastes.

blockquote.pullquote {
	background: none;
	font-size: 1.5em;
	line-height: 1.3em;
	color: #a89562;
	padding: 10px 25px 10px 25px;
	margin: 10px;
}
blockquote.pullquote p.cited {
	text-indent: -1em;
}
blockquote.pullquote p cite {
	font-size: .7em;
	line-height: 1.2em;
	margin: 0;
}
blockquote.pullquote, blockquote.pullquote * {
	font-family: Constantia, Georgia, "Times New Roman", Times, serif;
}
blockquote.pullquote p.q:first-letter, blockquote.pullquote p.cited span {
	text-transform: uppercase;
	font-size: 1.8em;
	margin-right: -.02em;
}
blockquote.pullquote p.cited:first-letter {
	font-size: 1em;
}
blockquote.pullquote p.q:first-line {
	font-size: 1.7em;
	line-height: 1.2em;
}
blockquote.pullquoteleft {
	float: left;
	text-align: left;
}
blockquote.pullquoteright {
	float: right;
	text-align: left;
}
blockquote.pullquoteright, blockquote.pullquoteleft {
	width: 40%;
}
blockquote.pullquote a {
	text-decoration: none;
	border-bottom: 1px dashed #e8d5a2;
	color: #a89562;
	font-weight: normal;
}

A little Internet Explorer-specific CSS

blockquote.pullquote p.cited {
	text-indent: -.7em;
}
blockquote.pullquote p.q:first-line {
	line-height: .8em;
}
blockquote.pullquote p.cited:first-line {
	line-height: 1.4em;
}

Using

To make a pull-quote using this code, simply surround the pull-quoted text in a <span> with a class of “pullquote” and an optional class of “pullquoteright” or “pullquoteleft” depending on how you would prefer it to be formatted. Additionally, to add a citation reference below the pullquote, simply give the span a rel attribute with the source of the quotation.

For example, take the following code:

<p>A wise man once said, "<span class="pullquote pullquoteright" rel="Thomas Merton">we are invited to forget ourselves on purpose, cast our awful solemnity to the winds and join in the general dance.</span>" That man was the author, artist, and Trappist monk, Thomas Merton.</p>

This will produce the following result:

A wise man once said, “we are invited to forget ourselves on purpose, cast our awful solemnity to the winds and join in the general dance.” That man was the author, artist, and Trappist monk, Thomas Merton.

Just be sure to not overuse pull-quotes on your pages or they will begin to lose their gravitas.

In the Wild

Besides this blog entry, the new pull-quote is popping up all across the Gustavus website. For instance, the English department’s article on Jennifer Krempin ’96 features two cited pull-quotes. Additionally, the President’s Advisory Committee on Diversity has a nice pull-quote from the College’s mission statement.

Additional Ideas

This current solution fits our needs quite nicely for the time being. However, we have an idea or two to that might make this even more useful and flexible. For instance, it would be nice to have the ability to eliminate some text from the middle of a pull-quote. This would allow for the actual body text to be longer than the pull-quote that is abbreviated in the middle.

If you have any thoughts or ideas on how to improve these pull-quotes (or good places it should be used), please let us know. We love to hear feedback.