The HTML specification suggests “a mechanism for inserting quotation marks before and after a quotation delimited by BLOCKQUOTE in a manner appropriate to the current language context and the degree of nesting of quotations.” From a usability standpoint, it makes sense to indicate as clearly as possible that everything within a <blockquote> element is a quotation. To do so, I wanted to add quotation marks, clear indentation, and even a slightly different color to differentiate. Here’s what the result looks like in Firefox:
I wanted to accomplish the look strictly with CSS and standards-based XHTML, which initially proved difficult because the lack of CSS2 support for multiple background images. If more browsers supported CSS3 and it’s support for multiple background images (only Safari does now), then I could have just used a quote background image for the top left and the bottom right. I also couldn’t use one wide background image that contained both quotations because the width and the height of the box would always be unknown.
Then I found an interesting tutorial that uses the CSS2 pseudo element :after to add additional background images after content. With a similar method, I was able to apply quotation marks before and after the <blockquote> content via CSS:
blockquote {
background: url(quote-open.gif) no-repeat;
color: #666;
margin: 0 0 1em 0;
padding: 0 50px 0 45px;
}
blockquote:after {
background: url(quote-close.gif) no-repeat right;
content: '';
display: block;
height: 25px;
margin: -2.25em -40px 0 0;
}
Works like a charm in browsers that support CSS2, but in IE the :after content isn’t rendered. For those browsers, I’m OK with the second quote not showing up, so I just added some IE-only style to remove the extra padding on the right:
blockquote {
padding-right: 0;
}
That’s it! No fancy JavaScript or extraneous HTML tags needed. The result:
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. –That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, –That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed.
