Hanging Quotation Marks

Having recently released a Joomla Module that allows you to add blockquotes to your Joomla sites I have had a few requests for some further information on styling blockquotes. Blockquotes are intended to be used separately from other text in its own block, if you want to include an inline quote you should be using the Q tag. The Q tag adds quote marks, Internet Explorer being the exception to the rule, the blockquote tag does not.

We are able to add quotes marks automatically using CSS pseudo-elements. Again it should be noted older versions of IE don’t support pseudo-elements. This is the CSS that will add a right double quotation mark before the contents of the blockquote, and left double quotation mark after the contents of the blockquote.

blockquote:before {
  content: "“";
}

blockquote:after {
  content: "&rdquo";
}

The correct way to display quotes is to have the opening punctuation “hanging” over the edge of the block.

Normally, blockquotes will look something like this:

“How is education supposed to make me feel smarter? Besides, every time I learn something new, it pushes some old stuff out of my brain. Remember when I took that home winemaking course, and I forgot how to drive?.”

The quote mark makes it look a like the first line is indented by one character, it in fact is. We can sort that out and make it look better like this:

“How is education supposed to make me feel smarter? Besides, every time I learn something new, it pushes some old stuff out of my brain. Remember when I took that home winemaking course, and I forgot how to drive?.”

This can be done with a single line of CSS:

blockquote { text-indent: -1ex; }

That line sets the indentation of the text to a negative value, to push it just enough to the left to shove that opening quote over the edge of the block. We use the ex measurement that should be approximately the same as the width of a double quote. This value will also not always be 100% accurate unless you are using a monospace font.

The ‘ex’ unit is defined by the font’s ‘x-height’. The x-height is so called because it is often equal to the height of the lowercase “x”. However, an ‘ex’ is defined even for fonts that don’t contain an “x”.

Hey that looks good how did you do that? Blockquotes are commonly styled using an image of a quotemark in the background. Again this is a few lines of CSS adding background image and positioning it.

blockquote {
  background: url(quote.png) no-repeat 0px 0px;
  padding: 10px 10px 10px 50px;
}

You will need al alter the padding depending on the size of your image. Please leave a comment if you use any of theses techniques on your site.

This article was posted on 8 October 2010 in CSS, HTML

What you have had to say about all this...

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.