I found a great technique for integrating pull quotes using only HTML5 and CSS from Maykel Loomans of Instagram.

Pull Quotes with HTML5 and CSS

His technique is in use on this site and I’ve been really happy with the results. Useful features are:

1. You don’t get duplicate content in the raw HTML or RSS feed
2. You can separate the pull quote from its location in the content
3. You can have different content in the pull quote than in the actual article
4. Using @media queries in CSS you don’t have to see pull quotes in mobile or small-screen layouts

The final part is what really makes this technique shine for me. Pull quotes work best in wide, magazine-style layouts where they draw the eye to a key piece of content to pull a reader deeper into the story.

There are otherwise beautiful sites that use pull quotes as hybrid/minor headers which also show up in a mobile browsing view. Since they’re often very close to the regular content, your readers end up having to hear the same words twice in a row, which can be distracting.

The following text is a snippet from the last article’s raw Markdown where I use the technique.

<p class="has-pullquote" data-pullquote="The possibility of writing a post in Markdown, saving it to Dropbox and having it automagically appear on my blog was too tempting to pass up.">For example, I use Compass and Sass in my design workflow. In order to make a minor CSS change, I had to write the Compass/Sass code locally, compile it on my machine, then go through three or four clicks on a web form to upload that code and check it out in place. This quickly became cumbersome.</p>

Note that there’s no way of giving class or data attributes in Markdown, so you’ve got to revert to HTML for that paragraph. Luckily the two mix just fine.

On the CSS/SCSS side the class looks like this:

.has-pullquote::before {
	content: attr(data-pullquote);
	@include column(4,6); 
	font-family: "futura-pt", sans-serif;
	text-transform: uppercase;
	text-align: right;
	color: $bright-link;
	margin: 0.5em 1em 0.5em -40%;
	position: relative;
	top: -0.3em;
}

The ::before pseudo-element inserts a new item before that paragraph. You don’t see it in the raw HTML because it’s generated by CSS. The content of that item comes from the data-pullquote attribute using this line:

content: attr(data-pullquote);

Since I’ve got a healthy left margin for the sidebar, we’ve got to get the text into that space a bit. The -40% left margin in the following line does the trick:

margin: 0.5em 1em 0.5em -40%;

Finally, you’d like to tweak the vertical alignment to match the rhythm of the main text. This is more art than science and I’m not done yet. For now I’m using the following vertical adjustment:

position: relative;
top: -0.3em;

There are a couple of caveats to this technique. The text itself is non-selectable. It does require you to mix Markdown and HTML. Still, for this site the results have been worth it.