Skip to navigation

malevolent design weblog

This blog is now defunct, but you can find more stuff over at my personal site

Finishing Touches: Block Quotes

Quoting is one of those areas (X)HTML doesn’t really cover properly. blockquote and q feature the cite attribute, which can be used to specify an online source for the quote, but that doesn’t allow for offline sources and isn’t enough to display a proper link (using JavaScript to make cite visible is nifty, but results in poor link text).

For block quotes in this site I’m using this markup…:

<div class="blockquote">
		<p>The horror. The horror.</p>
	<p>&#8212; <cite><a href="" title="Memorable Quotes from Apocalypse Now (1979)">Colonel Walter E. Kurtz</a></cite></p>

…and this CSS (yeah, it’s a bit tricky to decipher):

/* overall box and opening quote image */
	padding:8px 0 8px 0;
	margin:0 0 0.8em 0;
	background:#F2F2F2 url("/_template/img/blockquoteopen.gif") no-repeat;
	border:1px solid #cccccc;
	border-width:0 0 1px 1px;
	w\idth:493px; /* simplified box-model hack */

/* citation line at foot of quote */
.blockquote p
	margin:0 30px 0 0;

/* set citation text to black, leaving only the dash in grey */
.blockquote cite

/* inner box for quoted text and closing quote image */
.blockquote blockquote
	background:url("/_template/img/blockquoteclose.gif") bottom right no-repeat;
	padding:0 30px 0 35px;
	w\idth:428px; /* simplified box-model hack */

/* quoted text */
.blockquote blockquote p
	margin:0 0 0.8em 0;

See Quick Quote for the Day for an example of it in action.

Wrapping everything in an extra div does add some non-semantic junk markup, but is needed to group the quoted text and source. I suppose much of the markup could be ditched in favour of some cunning JavaScript that grabs the source’s description from a tag/attribute, but I’m not sure that’d be any better overall.

The cite tag is used but I suppose I should also put the cite attribute on blockquote. It’s amazing I can sleep at night.

(See the Hints and Tips category for more Finishing Touches.)


Comments are now closed for this entry.