A Pull Quote for the Web

The pull quote is a visual enhancement technique carried over from the print industry where text is “pulled” out of the main flow of the article (i.e., the presented text) and displayed elsewhere on the page. It’s used to add emphasis to an article and is useful for quickly drawing attention to noteworthy passages.

It’s typically placed to the right of the content. Why the right side? It’s considered less visually jarring to the reader with regard to content flow. In other words, a better user-experience (UX). While that argument may have merit I think its importance is overstated as it applies to a pull quote and I see no reason to follow that convention exclusively. The point is there are no absolute rules, the space-time continuum won’t unravel if you place a “pull” on the left or within the main flow. Ultimately a pull quote’s main purpose is to stand out so let that be your guide.

Aside from placement there are a couple technical points to be aware of when implementing a pull quote on the Web.

What It’s Not

A pull quote is not the same as a quote or blockquote which are used to reference external sources, i.e., for content not already presented. They also have specific HTML tags, q and blockquote, that provide semantic and structural meaning for search engines and screen readers. At the time of writing there is no tag specifically for pull quote (yet), as a purely visual enhancement it has no inherent or implied semantic value which is important to understand.

Don’t Repeat Yourself

Since the “pull” content already exists within the body of the article that makes it duplicate content which is noteworthy. Take for example screen readers and search engines.

If the pull quote were wrapped in its own p or div the content would be seen twice by a machine, once in the “pull” and again in the main article. It would be treated as something to be “read” by a machine which makes sense because it’s just another run of text within the body tag. While duplicate content may not be the worst thing it’s still not ideal.

Why is that relevant?

Consider it from an accessibility perspective. Even if a sighted person has no idea what a pull quote is by definition they can still infer its general purpose on a visual level, regardless of how the “pull” is coded under-the-hood. But for a visually impaired person using a screen reader the machine can’t infer meaning, context, or purpose visually the way a sighted person can, it must be explicitly told what something is with code. As it applies to semantics and structure the pull quote exists in a sort of limbo, at least until the HTML spec recognizes it as its own element.

Some may argue that a few lines of duplicate content, while not ideal, is benign, more annoying than confusing to the reader. I disagree. Plus, to a lesser extent it could be argued that search engines don’t like duplicate content, though personally I would be more concerned with the user-experience aspect.

What About ‘aside’?

Some techniques recommend using the HTML 5 aside element which on the surface might seem like a reasonable solution. After all, a pull quote is often positioned to the “side” of the main content so therefore it must qualify as an aside element. Right?

Uh, no. Not so much.

While aside carries considerable semantic meaning — more so than p or div — its intended use doesn’t apply to a pull quote, nor does it solve the duplicate content issue.

The aside element is for content that is peripherally relevant to the content immediately surrounding it and not for content that is already presented elsewhere on the page. Nor does it refer to the literal position on the page which does not have to be on the “side.”

So the question remains: How do you create a purely visual enhancement using uh... duplicate content, that doesn’t look like duplicate content to screen readers and search engines or cause you to use existing elements incorrectly?

Answer: The data-* attribute.

An Easy Solution

1. Simply add data-pullquote="" to an opening p tag then place the excerpt text between the dumb "" quotes, the remaining paragraph can be created as normal.

   <*p data-pullquote="Pull quote here.">Paragraph text here.< /p>

   I know what you’re thinking, “It’s still part of the paragraph, won’t it be seen twice?” Yes and no. A browser, screen reader and search engine don’t always look for (or see) the same thing.

   By using the data-* attribute which by necessity must be placed inside the opening paragraph tag and not between the opening and closing paragraph tags, the “pull” will (as far as I know and understand) be ignored by search engines and screen-readers. You might think this is a bad thing but it’s not. Remember, since the “pull” content already exists within the main body no one is being deprived of content.

2. Next, add content: attr(data-pullquote); to a CSS selector (see below). The “pull” will not work without this declaration.

3. Finally, assign the “pull” a class. In this example I used class="pullLeft" which contains styling, positioning and the all-important content property. The whole thing looks like this:

   <*p data-pullquote="Pull quote here." class="pullLeft">Paragraph text here.< /p>

CSS Quick-start

Pull quotes present an opportunity to get creative with styling. Again, there are no “rules” but typically they have larger text, and often a different font compared to the body. You can use background-images or colors, borders... anything, really.

Here’s the CSS I use to position the “pull” right or left as needed along with some basic styling:

.pullRight:before,
.pullLeft:before {
	/*  !Reset metrics.  */
	padding: .6em .4em;
	border: none;

	/*  !Content  */
	content: attr(data-pullquote); // NOTE: Important! The pull quote will not work without this declaration.

	/*  !Pull out to the right, modular scale based margins.  */
	float: right;
	width: 40%;
	margin: 1.6em 1.4em;

	/*  !Baseline correction  */
	position: relative;
	top: 5px;

	/*  !Typography  */
	font-size: 22px;
    color: #000;
    text-shadow: none;
    font-style: italic;
    font-weight: 400;
    line-height: 1.7;
    border-top: 1px solid #79df47;
    border-bottom: 1px solid #79df47;
}
.pullLeft:before {
    float: left;
    margin-left: -4.6em;
}
.pullRight:before {
    margin-right: -4.6em;//  margin-left: 1.4em;
}

That’s it. Until the HTML spec includes a semantic method for identifying the pull quote the data-* attribute will get the job done with minimal hassle.