Easy Pull Quotes using CSS & JQuery.

Everyone now understands the importance of having engaging, relevant content on their websites, and with more content the need to give more attention to typography becomes apparent.

Pull-quotes are heavily used in traditional publishing but their use on the web is still pretty rare. Pull-quotes are key phrases, quotes or excerpts that are “pulled” from the main content, duplicated and styled differently; more graphically. Pull-quotes are used to break up large areas of text acting as hooks to catch the readers eye and highlight important aspects of the document.

Although it would be nice to think that everyone who lands on your carefully crafted page is going to read it in full – in the real world this doesn’t happen. Users scan pages, looking for clues to the pages’ content, they need to know the page is relevant to them before investing the time to read it. Pull-quotes are another tool we can employ to let our scanning users know they’ve arrived at the right page.

So you probably already noticed our pull-quote over on the left hand side of this page, and you’d like to do something similar on your website. Here’s how I decided to implement Pull-quotes on this and my clients’ websites.

The HTML mark-up.

HTML lacks any semantic mark-up for pull-quotes, and although you could use <blockquote></blockquote> I don’t feel this is correct for pull-quotes. HTML5 introduced the new <aside></aside> which again I feel isn’t quite right for pull-quotes;

<blockquote>

A quotation set off from the main content, usually from an external source.

<aside>

Additional content related to the surrounding text.

Neither of these really define a pull-quote, which to me is content that is duplicated, and styled to stand out from the rest of the page.

But I’m going to use the simple <span></span> for our mark-up, along with a couple of classes to place our pull-quote either on the left or right hand side of the surrounding text.

<span class=”pq left”>The text we’d like to pull out to the left</span>
<span class=”pq right”>The text we’d like to pull out to the right</span>

An example;

This is the original text and inside this text there is a quote or excerpt that we'd like to use as our pull-quote, this text will be duplicated <span class="pq left">using a little JQuery and styled differently</span> to help it stand out from the rest of the surrounding text. Because I feel pull-quotes are slightly different in the definition from blockquotes and asides I've chosen to use the simple span tag in order to target the selected content using Jquery. 

And the rendered result;

This is the original text and inside this text there is a quote that we’d like to use as our pull-quote, this text will be duplicated using a little JQuery and styled differently to help it stand out from the rest of the surrounding text. Because I feel pull-quotes are slightly different in the definition from blockquotes and asides I’ve chosen to use the simple span tag in order to target the selected content using Jquery.

And using the right class <span class=”pq right”>

This is the original text and inside this text there is a quote that we’d like to use as our pull-quote, this text will be duplicated using a little JQuery and styled differently to help it stand out from the rest of the surrounding text. Because I feel pull-quotes are slightly different in the definition from blockquotes and asides I’ve chosen to use the simple span tag in order to target the selected content using Jquery.

The CSS for Pull-Quotes.

/** pull-quote styles **/
.pulledquote {
	font-size: 1.3em;
	line-height: inherit;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	padding: 1em 0 1em 0;
	border-top: dotted 1px #000;
	border-bottom: dotted 1px #000;
	width: 30%;
	text-align: center;
}

.pulledquote.left {
	margin: 1em 4% 1em 0;
	float: left;
}
.pulledquote.right {
	margin: 1em 0 1em 4%;
	float: right;
}
.pulledquote:before {
	content: open-quote;
	margin-right: 0.2em;
}
.pulledquote:after {
	content: close-quote;
	margin-left: 0.2em;
}

So our basic styles cover both pull-quotes, giving them a top and bottom border and a width of 30% of the surrounding div. Next a couple rules to adjust the margin and float either to the left or right depending on our needs. A couple of pseudo-element rules add some opening and closing quotation marks with a little extra space.

The Jquery for Pull-Quotes.

$(document).ready(function() {
	// pull quotes left
	$('span.pq.left').each(function() {
		var quote = $(this).clone();
		quote.removeClass('pq left');
		quote.addClass('pulledquote left');
		$(this).before(quote);
	}); // end each
	// pull quotes right
	$('span.pq.right').each(function() {
		var quote = $(this).clone();
		quote.removeClass('pq right');
		quote.addClass('pulledquote right');
		$(this).before(quote);
	}); // end each
}); // end ready

So the JQuery is pretty simple, firstly is finds our span elements, clones them, before removing the classes in our mark-up and adding in new classes to match up with the CSS we added earlier.

Why all this bother with jQuery?

There’s nothing stopping you from adjusting the CSS to match the span classes and simply duplicating the text in your mark-up wherever you’d like to add your pull-quote. But consider the effect of this on users with screen readers. Their devices will find the content twice, and repeat the content – not ideal. By using jQuery we’re using the browser to duplicate the content visually. Less work, happier users, its win-win.

Resources

Pull Quotes With CSS & JQuery
Snazzy Pullquotes for Your Blog