Grow your CSS skills. Land your dream job.

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

Comments

  1. hanz
    Permalink to comment#

    haha, great, just had that problem yesterday.

  2. Ivan
    Permalink to comment#

    Nice article, I think that you should change span.pullqoute to span.pulledquote in CSS for pulled quote :)

  3. Permalink to comment#

    Nice article – useful trick.

  4. A MooTools Example

    I saw the example (from the main page of this site), without looking further, and decided to try to do something similar using MooTools. I got pretty darned close to the solution presented here. Not bad for my first try at using MT! (If I do say so myself). I did a simple adjustment to allow for basic staggering of the pullquotes, if desired. I hope you find it useful. -Joe

  5. @Ivan: Thanks, I fixed that.

    @Joseph: Very nice, good work =) I like the idea of “auto-staggering” the pullquotes. I think in regular production, people would probably want to be able to control that themselves, but in longer static articles is very cool to have it automated.

  6. I ought to look into adding a second “class” to the span element classname, such that the second class would just tell the MT code to float the pullquote left or right, etc. This way, the pullquotes can easily be adjusted singly, or if omitted, staggered as a whole.

  7. Permalink to comment#

    This one works for text-based browsers too, since they don’t have to worry about DOM working in the background. I’m not certain on how screen readers would interpret it though…

  8. Screen readers read the information twice, unfortunately. I’ve been thinking about a way to help avoid this issue.

  9. I really like the idea of auto staggering. People would probably not mind not being in control of this but instead having it automated.

    Amanda <3

  10. I love this. Thank you, sir.

  11. (I’m the author of the WordPress pull-quotes plugin)

    It’s a good question regarding Screen Readers. Is there a way to programatically (in Javascript or PHP) determine if a screen reader is being used? If so, you could either not display the pull-quote, or bookend it with “pull-quote” and “end pull-quote”. Since screen readers tend to work with regular old browsers, I’m not sure if this can be reliably done.

    Regarding staggering the quotes down the page, my plugin does this. Basically each successive quote has classes of “pullquote” or “pullquote pqright”, and the CSS formats accordingly.

    I like the idea of formatting the actual pull-quote as “pulledquote” — a separate selector from the span. I may have to borrow that. ;-) It certainly works using the same selector (because they’re different tags — “span” or “blockquote”) but there may be advantages to your way. I’ll have to think about it.

  12. @Stephen: I’m not sure of any sure-fire way to detect for a screen reader. There are definitely javascript techniques for browser detection, but since most screen readers don’t have javascript, that won’t be useful. That another beautiful reason to do this with javascript though, if any browser doesn’t support it or has it turned off, there just won’t be pullquotes.

  13. “That another beautiful reason to do this with javascript though, if any browser doesn’t support it or has it turned off, there just won’t be pullquotes.”

    Exactly! I’ve had people get after me because I “should have used PHP”; but I chose JavaScript very specifically. :)

  14. The new version 1.2.6 of jQuery breaks this.
    Any new work around?!

    I’m still getting my ears wet with this :)

  15. OOPS

    My mistake! Works perfect!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".