Curly Quotes

I’ve always been one inclined to heavily stylize my blockquotes. Some people merely indent, some change the color. Me, I apply to blockquotes the same sort of design æsthetic that I would to dropquotes, which is to visually separate and emphasize. So, I have a pleasing bluish-violet background color to it, a distinct <cite>.

The default blockquote style in K2 is a simple indent and a left-positioned PNG openquote. Not only is the quote graphic kind of ugly (a not-very-stylized grey), but it seems incomplete in that it’s only an openquote, and doesn’t include a closequote. Because it’s set as a background image, of course, we can’t have two (one for open, one for closed).

In my old theme, I solved this with a messy hack wherein I searched and replaced all blockquotes with a blockquote and a nested div. I set the blockquote to have the openquote in the top left and the div to display the closequote in the bottom right. Semantically bad, but it worked.

For K2, though, I wanted less cruft, but I wanted to accomplish the same basic thing. Enter CSS and Design Meme’s Curly Quotes idea. It uses :before and :after pseudo-classes to add areas before and after the blockquote. Then it uses the content attribute to add in open-quote and close-quote. It’s an elegant solution, but it has two problems. One: it’s not cross-browser (IE doesn’t support pseudo-classes). Two: even among CSS-compliant browsers, the handling of the open-quote and close-quote varies. Obviously, I want the quotes to appear as “” and not "". However, only Firefox 1.5 did that: Opera 8.52, Safari 1.3, Firefox =< 1.0.7 and others all displayed ".

So, I changed

content: open-quote | close-quote

to

content: """ | """

Still no luck. Only Firefox 1.5 would display them correctly. The others just gave me marks that looked more like 11s than stylized quotes. So, I went back to my old theme, grabbed the quote images, resized them to 50px and adapted the CSS to use images instead of content. Here’s the result:

blockquote {
display: block;
padding: 0 60px 0 60px;
width: 350px;
border: 1px solid #c6c9ff;
background-color: #f0f0ff;
margin-left: auto;
margin-right: auto;
}
 
blockquote:before, blockquote:after {
color: #616d9f;
display: block;
font-size: 900%;
width: 50px;
font-family:  'Georgia', 'Times New Roman', serif;
}
 
blockquote:before {
content: "";
background-image: url(images/quote1.png);
background-repeat: no-repeat;
background-position: left top;
height: 0px;
margin-left: -0.55em;
padding-top: 60px;
margin-bottom: -50px;
}
 
blockquote:after {
content: "";
background-image: url(images/quote2.png);
background-repeat: no-repeat;
background-position: right bottom;
height: 50px;
margin-top: -50px;   
margin-left: 360px;
padding-bottom: 0px;
margin-bottom: 0px;
}
 
blockquote cite {
display: block;
text-align: right;
border-top: 1px dashed #69c;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 5px;
}

The rendering is pretty good—except for IE6, which doesn’t display the images at all, but degrades pretty gracefully—but I can’t for the life of me figure out why Opera pushes the open-quote so far to the right (see below). Anyone have any ideas? I was able to fix it. For some reason, I overlooked the fact that the original curly quotes designer had used em width only for the left margin on the blockquote:before declaration. When I noticed that Opera seems to handle em a bit differently than its peers, it clicked.

Safari 1.3.2 [OS X 10.3]

Safari 2.0.3 [iCapture]

Konqueror 3.4.2 [SuSe 10]

Firefox 1.0.7 [SuSe 10]

Firefox 1.5.0.1 [Windows XP SP2]

Opera 8.5.2 [Windows XP SP2]

Internet Explorer 6.0 [Windows XP SP2]