Better Pull Quotes: Don’t Repeat Markup

Published by Chris Coyier

better-pullquote-example

Pull quotes are wonderful. They can really draw a readers attention and they are a great opportunity for cool typographic work. On a blog though, pull quotes are particularly difficult to "pull off" (get it?!).
This is because of RSS. On your own site, you can create a pullquote using any kind of markup you want. Perhaps a paragarph tag with a class of "pullquote". But when that goes out to RSS readers, that tag will either be stripped or ignored.

View Demo

Here is what the markup for a traditional pull quote might look like :

<p>Whether I shall turn out to be the hero of my own 
life, or whether that station will be held by anybody else, these pages 
must show. To begin my life with the beginning of my life, I record that 
I was born (as I have been informed and believe) on a Friday, at twelve 
o'clock at night. It was remarked that the clock began to strike, and I 
began to cry, simultaneously.</p>
<p class="pullquote">It was remarked that the clock began to strike, 
and I began to cry, simultaneously.</p>

Because your class will mean nothing in an RSS reader, To someone reading that way, it will appear that the last sentence was repeated. Awkward.

We can solve this problem and make our markup even cleaner using jQuery. (Oh jQuery, is there anything you can't do? Smooches.) Here is our new, cleaner markup:

<p>Whether I shall turn out to be the hero of my own 
life, or whether that station will be held by anybody else, these pages 
must show. To begin my life with the beginning of my life, I record that 
I was born (as I have been informed and believe) on a Friday, at twelve 
o'clock at night. <span class="pullquote">It was remarked that the 
clock began to strike, and I began to cry, simultaneously.</span></p>

The difference is that instead of repeating the section we want to be used as a pull quote, we are just wrapping that section in a span with the class of "pullquote". This span is the hook that we are going to need to work our magic with jQuery.

We'll need to include jQuery on our page, then write some simple javascript to look for the quotes:

<script src="js/jquery.js"></script>
<script>
  $(function() { 
	  $('span.pullquote).each(function(index) { 
		... do something ...
	  }); 
  });
</script>

The above code will wait until the DOM is ready, then look through the entire page for spans with a class of "pullquote". Now we need to add the magic. First we find the parent element of the span, which is the paragraph it resides inside, and set it as a varible since we will be referencing it twice (faster). Then CLONE the span, and prepend it to the same paragraph. Of course, we add our own class we can use as a hook to style it.

$(function() { 
	  $('span.pullquote).each(function() { 
		var $parentParagraph = $(this).parent('p'); 
		$parentParagraph.css('position', 'relative'); 
		$(this).clone() 
		  .addClass('pulledquote) 
		  .prependTo($parentParagraph); 
	  }); 
});

This achieves exactly what we need: a duplicated element (but only when viewed on the site itself) with a unique class to style. Here is some example CSS for the "pulled" quote:

.pulledquote {
	display: block;
	float: right;
	padding: 0 0 0 10px;
	margin: 0 0 10px 10px;
	width: 170px;
	font-size: 1.5em;
	line-height: 1.4em;
	text-align: right;
	color: #666;
	border-left: 3px solid #ccc;
}

In the demo, I included wrote two separate jQuery snippets. One for pulling quotes to the left, and one for the right. View source on that page to see that code.

 

Other Articles / Resources