Create a Pull Quote with Javascript (and CSS)

Published in CSS on Wednesday, June 2nd, 2004

A function to create a pull quote from your html document using javascript.

Pull quotes, it turns out, are a well discussed topic on the web. I happen to find them useful, and they can be very eye catching. Have a look at some of these great examples of pull quotes by Mike Pick, for example (ironically, while setting out to find a decent example of a pullquote for this post, I couldn't).

Personally, I have always shied away from using them too much. Why? Well, because they tend to repeat text already present, it can be difficult to try and figure out how to work them into the natural flow of an html document.

Content or presentation?

When used for drawing a readers eye to an important passage, it can be argued that they are a presentational effect, so it would be nice to have a method to create a pull quote without having to add any extra content. Sadly though, CSS, usually great for presentation, can't help us with this today, so Javascript seems like the next natural solution. Great.

So, do you think I could find a little snippet of Javascript on the web to help me with this? Uh-uh. Nothing.

Note: it is entirely possible that I missed the solution somewhere, that this already exists but I couldn't find it...

Writing a little javascript

So here is my crack at writing up some Javascript to handle the task. I'm no Javascript whiz, so if anyone spots errors or inefficiencies in what is to follow, do tell.

Basically, the function will take a piece of text from within a set of <span> tags, and generate a pull quote and write it to the document.

I have checked this in all major windows browsers, Moz, the Fox, Opera, and the Win triplets, and they all seem pretty happy with it.

Read further on an example page with the source and an example, or here is the soure code.

Comments and Feedback

I don\'t know... pull quotes in magazine articles and such tend to annoy me. They distract my eye while I\'m trying to read the article - so I end up skipping back and forth between what I\'m trying to read and that eye-catching pull quote.

The only time I like them being there is when the article is really long and mostly boring, so I can kind of use them to see if there are more interesting parts to look forward to. Plus they do look cool on first glance, but I wish I could somehow get rid of them when I\'m actually reading the article.

Nonetheless, it\'s a pretty cool technique.

Nice article but for a different reason for me. It\'s embarrassing but I didn\'t know that thing was called \"pull quote\". I always just called it \"you know that block of text thingie where you reiterate or emphasize a piece of copy\". Now I know.

I agree with Jennifer, actually. Copy editors and designers love pull-quotes, because they\'re eyecatching, make an attractive use of space, and supposedly \'draw the reader in\'. But their actual use to the reader, beyond scanning the article, is far less: since if a pull-quote does catch the reader\'s eye and interest them, they then have to hunt the article with their eyes trying to find where it occurs in the text. And as Jennifer said, if they\'re already reading the body text, the pullquote can distract them - fragmenting their intake of the article as a whole. These have been my observations as a reader, at least.

One solution as Jennifer suggests would be to be able to turn them off, once you\'ve decided you\'re reading and don\'t want to be distracted - but that just places one more choice that readers don\'t need. Since the main benefit of pullquotes to the reader is for skimming (and disregarding the designer\'s desires for the moment) why not just bold a piece of key text to make it eyecatching, instead of pulling it out of the document flow?

Who\'d of thought that pull quotes (soxiam, I always refered to them as call-outs...) would be so controversial!

As for most things web, in this case it has to do with the target audience and look and feel of the site.

The site that this will be used on is targeted at the traveling and lifestyle crowd, users who quite often would have some form of lifestyle and travel magazines around. We\'re trying to stay familiar with the look and feel, and so pull quotes seemed an obvious way to do this.

OK, if you use another bit of Simon\'s code (from the purple whatstherenames) then you could help with the relevance of the pull quotes. Make it so if you click on a pull quote it jumps you to that quote in the text. It shouldn\'t be difficult to do - just assign each pull-quote block an ID, and link to it.

Great idea Peter, and perhaps when it jumps there it could then bold the text, to help the user to understand what, in fact, just happened.

Another idea: dissapearing quotes. You can show quotes, and after X time (when you know you've captured the reader attention), make them dissapear, with something like the technique described in this page

Home » Blog » Web Development » CSS

Check out the blog categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..