I just read an article from Louis Lazaris regarding the use of aside for pull quotes as apposed to blockquote. Having a read though the spec for both I definitely agree this is the better of the two elements to use for pull quotes. I am also very happy to see the spec for aside having been updated to more clearly define the use cases for this element as it was relatively unclear previously.

With that, I decided to look at using aside to create pull quotes but, I also want to avoid creating duplicate content so a little bit of JavaScript will help in this regard. Let’s look at the code then.

First we need some content:

<section>
    <h1>The blockquote</h1>
    <p>The blockquote element represents a section that is quoted from another source.</p>
    <p><span class="pullquote">Content inside a blockquote must be quoted from another source</span>, whose address, if it has one, may be cited in the cite attribute.</p>
</section>
<section>
    <h1>The aside</h1>
    <p>The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.</p>
    <p><span class="pullquote">The element can be used for typographical effects like pull quotes or sidebars</span>, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.</p>
</section>

As you can see from the above I use a span with the class pullquote, to identify the text I want to use in my pull quotes. This the also solves the problem of having duplicate content in the DOM initially. Next the JavaScript:

$(function() {
    $(".pullquote").each(function(i, quote) {
        var content = $(this).text(),
        aside = document.createElement("aside"),
        asideContainer = $(aside).append(content);

        $(this).parent().before(asideContainer);
    });
});

In the above I then simply grab the text from the span, create the aside element and append the text to it. Following this, I chose in this case, to add the aside just before the parent element, which in this case is the paragraph.

All that is left is some CSS:

aside {
    float:right;
    background-color:#FFDD75;
    margin:.3em;
    padding:.5em;
    border-radius:.5em;
    width:10em;
}
aside:before {
    content: '"';
}
aside:after {
    content: '"';
}

Some simple CSS gives the pull quotes a unique look and thanks to CSS3 the container has some nicce rounded corners. Because we are no longer using blockquote, we lose the quotes that would normally surround the text. You can see a simple demo in action here.

If you need these, you can easily add them using CSS3 generated content with the psuedo :before and :after elements. With that, we have nice little pull quotes and we avoid the problem of duplicate content that might ‘anger’ some search engines. I hope you find this useful in your own code.

Image courtesy: Johnny_boy_A