CSS Pull Quotes
March 12th, 2007
Pull quotes are commonly used in print publications to draw emphasis to a particular quote or excerpt from a document, typically placing it in a larger typeface nearby on the page. When creating a well formed HTML document, pullquotes introduce a challenge in that they require a passage of text to be repeated on the page. This has the potential to introduce confusion when the document is read without the accompanying style sheet. Ideally then, a pullquote should be considered a stylistic element and as such should be seperated from the document itself and rendered with a stylesheet.
Since techniques to hide portions of a webpage rely on using CSS or JavaScript, we’ll need to approach this problem from the other direction – in this case using CSS to display new content. In this tutorial we’ll place the pullquote text in the title attribute of a paragraph or page division, and use the :before pseudo element’s ability to generate content to display the pullquote on the page.
Here is an example of this technique in use:
Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘’Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’
The HTML
The only changes to our document will be ensuring we have some way to select the element we’re associating the pullquote with, and adding a title attribute to that element with the text we want to display. In this example we’re using a custom class to apply the CSS for the pullquote, but a custom ID or CSS selectors could also be used depending on the structure of the document.
<p class="pullquote" title="Only this, and nothing more.">Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘'Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’</p>
The CSS
The first section of CSS is to style the paragraph we’re associating the pullquote with.
.pullquote {
width:550px;
line-height:1.5;
font-size:1.2em;
text-align:justify;
}The next section uses the CSS 2 :before pseudo element to display the text from the title attribute, and control how it appears on the page. If you want to include curly quotes, you’ll also need to use the hex codes 201C and 201D within the content property. Once the pull quote content is generated, we can use other CSS properties to control how it appears on the page.
.pullquote:before {
content:"201C" attr(title) "201D";
font-family: "Times New Roman", Times, serif;
font-size:1.2em;
text-align:center;
background:#333;
color:#fff;
display:block;
float:left;
width:7em;
margin: 0.25em 1em 0.5em 0;
padding:1em;
}The Results
Now you have pullquotes for your document that are only displayed when the stylesheet is available and do not disrupt the overall structure of your HTML document. If you view the page with CSS disabled, or copy and paste the text, the pullquote will disappear. Some of the additional CSS styling we’ve used on the pullquote is not supported by all browsers. In particular, you are unable to use float:left to position the pullquote next to the paragraph in some browsers (e.g. Firefox) so you’ll see the pullquote above the paragraph instead.
