Pull Quotes Made Easy

How do users read web pages? According to user experience guru Jakob Nielsen, they don’t. Instead of reading webpages word by word, users scan the page.

You have to sell the content before users will actually read it thoroughly. One way to do this is to emphasize important gems of content with pull quotes. These have been used in print media for some time and can add a wonderful richness to media on the web. Pull quotes are essentially short block quotes that are not placed within, but next to the content. With many typographic possibilities, they are usually styled with larger text and colors that draw the user’s attention. The pull part of the pull quotes definition is derived because they don’t actually provide any additional information that is not already in the content. Rather, they pull out and emphasize bits of important content. When a user scans the page their attention is drawn to these emphasized blocked quotes. When used properly pull quotes sell and support the content.

Since pull quotes are really repeated snippets of existing content, an important part of the solution is to avoid repeating the actual content as data. We don’t actually want the content to be repeated in the source of the post. Many pull quote solutions simply copy and style the content that is designated as a pull quote. One problem with this is that RSS readers won’t be able to utilize associated styles resulting in immediately repeated content. Many users will think this is a typo or just be confused. A better way is to do it client-side with jQuery that will result in cleaner, non-repeated markup.

First, simply enclose the content that you want pull-quoted in a span tag with the class pullquote. (E.g. <span class=”pullquote”>Lorem Ipsum</span>) This will assign a pull quote that floats left. If you want it to float to the right then add the class right. (E.g. <span class=”pullquote right”>Lorem Ipsum Right</span>)

Second, include jQuery on the page and then include the following JavaScript code in the page just before the closing </body> tag.


$(document).ready(function() {
	pullquotes = $('span.pullquote'); // Get all pullquotes
	if (pullquotes.length > 0) { // There are pullquotes
		pullquotes.each(function(){
			pullquote = $(this);
			pullquotecontent = pullquote.text();
			pullquotecontent = pullquotecontent.replace(/\((.*)\)/gi, ''); // Remove unwanted characters
			ellipsis = '…'; // Ellipsis
			firstchar = pullquotecontent.slice(0,1); // Get first character
			if (firstchar.toUpperCase() != firstchar) { // First character is not uppercase
				pullquotecontent = ellipsis + pullquotecontent; // Prepend ellipsis
			}
			lastchar = pullquotecontent.slice(-1); // Get last character
			if ((lastchar != '.') && (lastchar != '?') && (lastchar != '!')) { // Last character is not sentence ending
				pullquotecontent += ellipsis; // Append ellipsis
			}
			classcontent = 'pullquote';
			if (pullquote.is('.right')) {
				classcontent += ' right';
			}
			pullquote.parent().before('

' + pullquotecontent + '

'); }); } });

This code first waits for the DOM to be ready, then it looks through the entire page for span tags assigned the class pullquote. For every span it extracts the enclosed text, removes any unwanted characters, and prepends an ellipsis (…) if the beginning of the content isn’t the beginning of a sentence. If the end of the content isn’t the end of a sentence it appends an ellipsis. If the content is a complete sentence no ellipses are added. Finally, the script takes the content and encloses it in a <blockquote> tag with the class pullquote (and right if needed) and inserts it before the associated parent element.

Here is some CSS used to style the pull quotes.


blockquote.pullquote
{
	margin: 0.375em;
	padding: 0.375em;
	width: auto;
	max-width: 25%;
	border: none;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	float: left;
	overflow: hidden;
}
	
blockquote.pullquote.right
{
	float: right;
}
	
blockquote.pullquote p
{
	margin: 0;
	padding: 0;
}

What’s accomplished is that we have easily applied pull quotes without the content being repeated in the source. This very page uses this solution. Check out another example here.