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">
	<blockquote>
		<p>The horror. The horror.</p>
	</blockquote>
	<p>&#8212; <cite><a href="http://www.imdb.com/title/tt0078788/quotes" title="Memorable Quotes from Apocalypse Now (1979)">Colonel Walter E. Kurtz</a></cite></p>
</div>

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

/* overall box and opening quote image */
.blockquote
{
	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;
	width:494px;
	w\idth:493px; /* simplified box-model hack */
	overflow:hidden;
}

/* citation line at foot of quote */
.blockquote p
{
	text-align:right;
	margin:0 30px 0 0;
	color:#aaaaaa;
}

/* set citation text to black, leaving only the dash in grey */
.blockquote cite
{
	color:#000000;
}

/* 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;
	margin:0;
	width:493px;
	w\idth:428px; /* simplified box-model hack */
}

/* quoted text */
.blockquote blockquote p
{
	text-align:left;
	margin:0 0 0.8em 0;
	color:#000000;
}

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.)

Mon 6th Jun 2005, 9:55pm GMT

Filed under: Client-side Coding, Hints and Tips, Web

---

Comments

Comments are now closed for this entry.