How-To: Fancy Blockquotes
A few days ago I ran across a Web Designer Wall tutorial from the end of July about styling block quotes. I wanted something like that for Hexnut in case I ever needed it, so I quickly adapted their example for my design. Turns out that while it validates in XHTML 1.0 Transitional, it doesn’t in XHTML 1.0 Strict, which is what I use. Not content with compromising my site’s validity, I set out to find a better way.
What we’re aiming for is this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi leo pede, bibendum nec, accumsan at, bibendum quis, nisl. Integer pulvinar eleifend pede. Sed ligula. Vivamus ultrices auctor urna. Etiam laoreet. Phasellus interdum, nunc vitae porttitor auctor, sapien nulla ultrices mauris, id ornare quam dui non ligula. Pellentesque facilisis risus non lorem. Nunc tempus porta dolor. Suspendisse dapibus tortor. Donec non lorem vel lacus mollis fermentum.
The reason that the way shown on Web Designer Wall fails validation in XHTML 1.0 Strict is because <blockquote> can’t contain character data on its own—it needs a <p> to wrap it. XHTML 1.0 Transitional accepts this error, which is why I don’t like transitional doctypes, but that’s another story. The code for the fancy blockquote looks like this:
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi leo pede, bibendum nec, accumsan at, bibendum quis, nisl. Integer pulvinar eleifend pede. Sed ligula. Vivamus ultrices auctor urna. Etiam laoreet. Phasellus interdum, nunc vitae porttitor auctor, sapien nulla ultrices mauris, id ornare quam dui non ligula. Pellentesque facilisis risus non lorem. Nunc tempus porta dolor. Suspendisse dapibus tortor. Donec non lorem vel lacus mollis fermentum.<p><blockquote>
Looks like a normal blockquote, right? That’s because it is! There’s no extra markup involved, so it’s lean and nice semantically. Here’s the (essential) CSS:
blockquote {
padding-right: 22px;
background: url(”location of closequote image”) bottom right no-repeat;
}
blockquote p {
padding-left: 22px;
}
blockquote p:first-child {
background: url(”location of openquote image”) top left no-repeat;
}
A quick glance through the code reveals that we need two images: one for an opening quote, and one for a closing quote. Luckily, they’re easy to make (just pop open Photoshop, use the Type tool to make a quotation mark, and rasterize it).
I have a 17×16 pixel image for the opening quote, just big enough for it to fit. The closing quote, while the same width, is much taller: 24 pixels, and the quote is pushed all the way to the top. Why? It’s because of the way CSS handles background images. We can say that we want the image at the bottom right, or at the top left, but we can’t say we want it at the bottom minus a certain amount. We would use a percentage, but we since for each line of text we add the image moves further from the bottom, it won’t necessarily be aligned with the bottom line of text. Our only option: fake the space at the bottom by adding pixels at the bottom, and positioning the image all the way at the bottom right. The opening quote is already at the top left corner of the top line, so we don’t have to do anything else to get that one in position.
You may be wondering what the pseudo-element first-child does. The answer is simple: it applies only to the first element contained by a parent element. In this case, that’s the first <p>. We apply it to the first <p> element and not each one contained within the <blockquote> so that we don’t have more than one opening quote.
The padding is present so that the text doesn’t run into the images. Since my images are both 17px wide, I’ve set the padding at 22px, which gives us a nice 5 pixel gutter between the images and the text. Although the background is only applied to the first, the padding is still applied to all of the <p> elements so that they’re all indented the same amount.
That’s how to position the images. For the blockquotes I use here, I changed the color, the font and the font size. I didn’t show those in the CSS, because they’re trivial changes.