I’d seen http://24ways.org/2005/swooshy-curly-quotes-without-images a while back, and decided to improve upon it for the new Streetsblog site. In particular, the floated close quotes in Simon Willison’s approach will often leave a lot of whitespace.

The first version I’d done looked fine, and is what we launched with, but after a while folks found an odd renderbug. Internet Explorer (versions 6 and 7) would drop the quoted text down by about 2em, but only if the quote fit on a single line.

This week I was able to track down and fix the issue.

Here’s a screenshot of our launch CSS, as rendered by standards-compliant browsers:

Here’s a screenshot of our launch CSS, as rendered by Internet Explorer:

After a little digging, it became clear that the issue was IE inappropriately using the line-height for the opening quote for the entire blockquote, in those cases where the blockquote fits on a single line.

Lots of tinkering with line-height and vertical-align properties ensued – those have got to be the least consistent CSS properties I’ve run into for a while, and will probably be the subject of a later post.

Eventually, I ended up with something that worked in standards-compliant browsers:

And looks fine in IE7:

IE6 has an issue with line-height still – it will incorrectly indent the second line of text, to make room for the floated open quote (because IE6 ignores our explicit height declaration for that element):

That’s a tradeoff I’m willing to accept, in this case.

Markup for Better Blockquotes

<blockquote class="selfclear">
<span class="open-quote">&#8220;</span>
Fiction is obliged to stick to possibilities. Truth isn't.
<span class="close-quote">&#8221;</span>
</blockquote>

Note: The selfclear class is a variation of the clever method originally written up at Position Is Everything – used to clear floats without unnecessary markup.

CSS for Better Blockquotes

.selfclear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.selfclear {
display: inline-block; /* IE 7 */
}

.selfclear {
display: block;
}

* html .selfclear {
height: 1px; /* IE < 7 */
}

blockquote {
font-style: italic;
color: #191f2f;
font-size: 1.3em;
line-height: 2em;
}

blockquote .open-quote,
blockquote .close-quote {
font-family: georgia, serif;
color: #6b707e;
font-style: normal;
font-size: 4em;
line-height: 1em;
}

blockquote .open-quote {
float: left;
height: 0.35em;
padding: 0 0.1em 0 0;
vertical-align: -60%;
position: relative;
top: -0.1em;
}

blockquote .close-quote {
vertical-align: -50%;
padding: 0 0 0 0.1em;
}

Replace the fonts and colors as needed for your design, and you should be all set!