HTML Dog

Skip to navigation

Pull Quotes

A technique traditional to print is the pull quote, a snippet of the content that stands out from its surroundings to grab a reader's attention as they scan pages.

Step 1: The HTML

For the pull quote basics, we can start with some HTML like the following:

<p>If ever there was ...[Big load of text]... humble pea is it.</p>

<p>Mother Nature has never created ...[Big load of text]... something so flawless.</p>

<blockquote class="pquote">
	<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
</blockquote>

<p>The green seed ...[Big load of text]... favorite for good reason.</p>

<!-- ...and so on... -->

The pull quote obviously being a quote makes the blockquote element the perfect choice.

Step 2: Floating The Quote

Now we want to take this blockquote element, pull it out of the flow and style it to stand out from the rest of the content:


body {
	font: 80%/1.5 arial, helvetica, sans-serif;
}

.pquote {
	float: left;
	width: 8em;
	background: #ddf;
	font-weight: bold;
	padding: 1em;
	margin: 0 0.5em 0.5em 0;
}

Step 3: Adding Decoration

This is very simple CSS to give you an idea of how pull quotes can be easily achieved, but the sky is the limit - with a little more fiddling, something much more interesting can be achieved:


body {
	font: 80%/1.5 arial, helvetica, sans-serif;
}

.pquote {
	float: right;
	width: 8em;
	background: url(images/openquote.gif) top left no-repeat;
	color: #030;
	font-size: 2em;
	line-height: 0.9;
	font-style: italic;
	padding: 0.5em;
	margin: 0;
}

.quote p:first-letter {
	font-size: 1.5em;
	font-weight: bold;
}

A slightly more complex method would be to add more parts to the pull quote, such as a photograph or credit by using a bit more HTML:


<p>If ever there was ...[Big load of text]... humble pea is it.</p>

<p>Mother Nature has never created ...[Big load of text]... something so flawless.</p>

<div class="quotebox">
	<blockquote>
		<p>"It is my educated opinion that this is complete and utter tosh."</p>
	</blockquote>
	<p class="by">Patrick Griffiths</p>
</div>

<p>The green seed ...[Big load of text]... favorite for good reason.</p>

<!-- etc. -->

Slightly different CSS, essentially following the same principles as the first two examples can look like this:


body {
	font: 80%/1.5 arial, helvetica, sans-serif;
}

.quotebox {
	float: left;
	width: 200px;
	background: #900 url(images/ptg1.jpg) top no-repeat;
	color: #fc0;
	font-size: 0.9em;
	line-height: 1.2;
	padding-top: 71px;
	border: 2px solid #600;
	margin: 0 1em 1em 0;
}

.quotebox p {
	margin: 0;
}

.quotebox blockquote {
	line-height: 1.3;
	font-weight: bold;
	padding: 0.5em;
	border-top: 2px solid #600;
	margin: 0;
}

.quotebox .by {
	padding: 0.5em;
}

The Problems with Pull Quotes

As pretty as they may be, pull quotes have inherent problems in the way they are placed in the middle of HTML content. To a visual, CSS enabled browser all might seem hunky-dory, but to those browsers that are not CSS-abled and fall back on the plain HTML or to screen readers for visually impaired users, the pull quotes will appear slap bang in the middle of the main content. A quote suddenly appearing between two paragraphs is clearly out of place and will confusingly break the flow.

If you are using pull-quotes, it is wise to provide a little extra information for users who would stumble on this problem. In the XHTML you can provide a message, hidden from view with CSS that reads something like "Start of pull-quote" before the quote and then "end quote" after it. You could even have a link similar to the "skip navigation" link (see Chapter 3), which would offer the user the ability to skip the pull-quote and continue to the main content.