The Goal

Add visual emphasis using a pull quote while avoiding duplicate content for search engines and screen readers.

Author
Name:
Profession: Designer/Developer/Artist
Specialties: Front-end dev.; hand-drawing
Years’ Experience: 15
Employer: Self-employed
Tutorial Details
Experience Level: Noob
Noob: No technical skills required.
Beginner: Basic technical skills and knowledge.
Intermediate: Code literate. Strong technical skills.
Advanced: Code “fluent”. Extensive technical skills.
Über Geek: Need I say more?
Tools: Editor
Completion Time: Less than 15 minutes
Tags: pull quote, data-attribute, accessibility

This is a member-contributed tutorial. If possible, contact the author with questions or comments.

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 the reader’s attention to noteworthy passages.

It’s typically placed to the right of the content. Why the right side? Many designers believe it’s 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 be creative.

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. 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 a pull quote is an excerpt of presented text — meaning it [the text] already exists within 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. There’s no way to indicate to a machine that a particular p or div represents a visual enhancement and is separate from the semantic content surrounding it.

Why is that important?

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 someone who is visually impaired and uses a screen reader the machine only sees another p or div to be read. It can’t infer meaning, context, or purpose visually or otherwise the way a person can, it must be explicitly told what something is with code. For the moment there are no semantic-friendly mechanisms to define a pull quote to a machine that I’m aware of.

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 meddle with the structure?

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.

    I know what you’re thinking, “It’s still in a 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 p tag and not between the opening/closing tags, the “pull” will (as far as I know and understand) be ignored by search engines and screen-readers, but the browser will still render it to the screen as normal. 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, only a little bit of layout eye-candy which the browser will render.

  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 declaration. The whole thing looks like this:

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.