Sunday 4/8/2007
Implementation

No, really.

In a magazine, a pullquote can pull a browsing reader into an article by highlighting a provocative comment or deft turn of phrase, or help steel a reader’s resolve to press on, teasing them with a little deferred gratification. That magazine-ey feel can be helpful on sites with long, multi-page articles that are otherwise relatively unbroken by pictures, blockquotes, or other places for the eye to rest.

There are many examples of pullquotes on the web. But each fails to satisfy in some way.

Many authors add the content of the pullquote to the document , unnecessarily repeating content or interrupting the HTML stream with a non-sequitur. This could have a jarring effect on a reader browsing without benefit of CSS, or using a screen reader (unless the CSS rule speak: none were used by the author and supported by the reader).

Many go a step further, identifying content that would make a nice pullquote, wrapping it in a span and using JavaScript to replicate it in the DOM. Roger Johansson’s technique is the definitive example of this method. This is great because we do not have excess content for what is essentially a presentational effect. It does put the pullquote right next to its source text, though, which is unfortunate.

Also, the above method requires your pullquote to be a direct quote of the source text. Pullquote text often does not exactly match its source. Dependent clauses are trimmed, prepositions adjusted, other editing is done to allow the pullquote to stand alone. This requirement led me to toy with the notion of using JavaScript to collect one or more spans selected from the text into a single pullquote, but I stopped when I realized that that would only allow me to drop words from the source text, not change them if necessary.

So far we’ve identified the following requirements:

1. No repeated or extra content
2. Control over pullquote placement in source text
3. Pullquote text not necessarily a direct copy of source text

If we relax the first requirement slightly, this can be done. We might add an empty span to our HTML where we want the pullquote to appear, and place the content for the pullquote in its title attribute. We then use some JavaScript to find this empty span and put its title text inside. A little CSS makes it pretty. I’ve made an example page with very simple code so the effect is obvious.