Pull quotes are makeup, not markup

🕔

We used to see them on glossy paper magazines. Pull quotes could make important parts of the content stand out, and effectively draw an outline of it the same way titles do. When a bit more sophisticated, they could add rhythm and color and make your content pop. Lately, I've started seeing more and more of those on the web, the last I can recall being the gorgeous theverge.com.

Like many the deliciousities of print design, pull quotes have made their way to our screens. And at the same time, many blog posts and resources appeared to help people implement them the "right way", like this very comprehensive article written by Sven Lennarts. In fact there are many difficult aspects about pull quotes and HTML: which markup should I use: <bockquote>, <q>, <cite>? Quotations marks vary a lot depending of the language, how to manage with multilingual sites? it's all explained in there.

So... what is this about?

The big problem with pull quotes is that they have essentially a decorative value. Since they only repeat bits of the content, they stand outside of it in a way. It means that if your article is to be read in a RSS Aggregator, or parsed by a search engine, that pull quote without its CSS fanciness won't make sense in the middle of your content.

So I've wanted to do this in a way that looks good and keeps your content SEO and RSS readers friendly. In cases like theses, a few lines of javascript can instantly solve your problem but since it's really a matter of styling, a pure CSS solution is always welcome.

The workaround

The main idea is: instead of putting the content of your pull quote in a My lovely pull quote, to put it in a private attribute, and leave the markup empty inside.

<q class="pullquote" data-content="My lovely pull quote" data-author="Someone Famous"></q>

If you put this in your browser, you won't see anything and it's fine. On the CSS side, use the content propriety to display the values of data-content and data-author.

q.pullquote:before {
    content: attr(data-content);    
}
q.pullquote:after {
    content: attr(data-author);
}

data-content and data-author are private attributes, another thing that demonstrates HTML5 awesomeness. Private attributes are all attributes following the pattern data-*. If you want you can read all about them on HTML5Doctor.com but the bottom line is: you can create as much of them as you want, and put in there anything you want, the browser won't care and won't even look. But if you decide to go with a non private attribute, making up a name on your own, browsers might start using it in next versions. Nothing can guarantee that particular name you picked will remain meaningless in the future, which can result in knocking out the pretty little face of your pull-quote.

The benefit of this method is that your pull quote only exists on the CSS side, where it belongs. If your content is processed by something that doesn't care about CSS or a very old browser, worse thing that could happen is that your pretty pull quote does not show up... their loss, right?

The you can go ahead a style it however you want. There are plenty of resources on the web that can inspire you in making beautiful pull quotes. Combine it with a carefully picked kerning and crazy ligatures, and you'll make the world a better place for human kind. Here is mine.

pull quote example