If..Else Log

Styling semantically marked up blockquotes

Here's an interesting technique that you can use when it comes to blockquotes. Generally most people would style a blockquote as thus:

<blockquote >
<p>I've got a plan so cunning you could put a tail on it
and call it a weasel!</p>
</blockquote>

If we were to semantically mark that up, you may end up with the following:

<blockquote cite="http://en.wikiquote.org/wiki/Blackadder">
<p>I've got a plan so cunning you could put a tail on it
and call it a weasel!</p>
<cite>Blackadder</cite>
</blockquote>

Now that we have the pieces in place, how about using css to present this information? First, let's apply some basic formatting first.

blockquote
{
	padding:8px;
	margin:0;
	background:#eee;
	border:1px solid #d3d3d6;
}

Nothing particularly clever yet. However, what we can do next is take advantage of two infrequently used css features: the after and hover psuedo-elements and the content property. We can instruct the browser to display the referred source of the blockquote when the user hovers their mouse over the blockquote.

blockquote:hover:after {display:block;content: attr(cite);}

We'll then add a final sprinking of formatting.

blockquote {
text-align:right;
}
blockquote p
{
	text-align:left;

}

And voila! CSS styled semantically marked blockquotes. Hover over the blockquote and you'll be able to see the associated cite meta-information.

I've got a plan so cunning you could put a tail on it and call it a weasel!
Blackadder

Note, that this has only been tested in Firefox (IE doesn't provide the required CSS support) but what do you think? Any improvements?

-30-

10 Responses to “Styling semantically marked up blockquotes”

  1. Gravatar Mathias Bynens

    I hate the hover thing, as all the content below the BLOCKQUOTE element will be moved.

    Why not just do blockquote[cite]:after { display: block; content: "Source IRI: " attr(cite); }?

    Also, note that you should check for a cite attribute using blockquote[cite].

  2. Gravatar Mathias Bynens

    Ah, and CODE elements should not be display:block;ed. That’s why the PRE element is for. (CODE is for inline stuff.)

  3. Gravatar Rob Mientjes

    I always have the CITE attribute displayed there, not just on hover, cause it jumps around a lot. (Note that I hardly do this stuff of late, but that’s just because my projects are hardly blog-like.)

  4. Gravatar Phu

    Actually, in retrospect, I agree with both of you. There’s no real reason to hide the source URI and the hover effect can be quite distracting. I’ll leave it unamended for now so that new visitors can take a look at the technique but I’ll probably change it in my own css.

    BTW, good catch with the cite attribute selector and my code markup. Need to fix this:-)

  5. Gravatar Gordon

    Ahhh my gripe has already been made, that whole “shift everything down cos you’re displaying something” thing bugs me stupid. Nice tip though, I’ll go with the suggestions made in here I think..

  6. Gravatar my personal weblog » daily links

    […] Styling Blockquotes | Styling semantically marked up blockquotes […]

  7. Gravatar my personal weblog » daily links 26.09.2006

    […] Wordpress Jeriko One | WordPress: Letzten Beitrag anders stylen If..Else Log | hand crafted geekery Styling Blockquotes | Styling semantically marked up blockquotes TrueBlue Theme | TrueBlue Theme for Wordpress Basic Thinking | Wordpress Plugins Update 1 die Netzspielwiese | Wordpress als CMS - ein Fallbeispiel […]

  8. Gravatar David

    I am using Firefox/1.5.0.7 rv:1.8.0.7 Gecko/20060909 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) and it did not work nor did it work in NS 7.2, any idea why?
    Dave

  9. Gravatar tobto

    any more examples on cite styling?

  10. Gravatar bart

    Does it make sense to put the cite inside of the blockquote? Is that semantically correct? IMO, cite should come after the blockquote element. Of course, that makes the cite a bit more difficult to style.