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


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.

Blockquotes as rendered by Safari 1.3.2
Safari 1.3.2 [OS X 10.3]
Blockquotes as rendered by Safari 2.0.3
Safari 2.0.3 [iCapture]
Blockquotes as rendered by Konqueror 3.4.2
Konqueror 3.4.2 [SuSe 10]
Blockquotes as rendered by Firefox 1.0.7
Firefox 1.0.7 [SuSe 10]
Blockquotes as rendered by Firefox
Firefox [Windows XP SP2]
Blockquotes as rendered by Opera 8.5.2
Opera 8.5.2 [Windows XP SP2]
Blockquotes as rendered by Internet Explorer 6.0
Internet Explorer 6.0 [Windows XP SP2]
§1010 · March 3, 2006 · Tags: , , ·

8 Comments to “Curly Quotes”

  1. Rus says:

    You’ve specified margins/padding correctly, right? I feel quite dodgy even mentioning this given my almost non-existant knowledge of CSS, but I’m sure I remember reading that Opera uses different default values for whatever reason. I almost have to presume you’ve catered for this, but just in case…

  2. Ben says:

    Nah, nevermind, I found the problem.

  3. Lina says:

    I’m so behind. :(

  4. Ben says:

    Well, you’re using IE6. There’s your first problem. :-P

  5. rob says:

    Ah, but it might be misleading, as the inevitable presumption that I’m using IE6 for this comment will show :)

  6. Ben says:

    Well sure, CSS3 is all good and fine, but what’s the support like? Isn’t it limited even among good browsers.

  7. rob says:

    Yeah, hence the “roll on” :)

Leave a Reply