Quoting blockquotes

Many designers like adding large and stylish quotation marks around blockquotes to make the quote stand out from the surrounding text. Typographically, block quotations should not be enclosed in quotation marks, at least in English. As far as I can tell from my books on typography it is acceptable in Swedish.

Since many designers enclose blockquotes in quotation marks (and will continue to do so regardless of what the typographical rules state), the technique described by Simon Collison in Swooshy Curly Quotes Without Images looks useful.

Simon’s contribution to 24 ways is a neat way of getting those quotation marks in there without having to create images.

Posted on January 9, 2006 in CSS, Quicklinks, Typography

Comments

  1. Cheers Roger. Couple of things to note about the technique.

    1. I wrote the article because people will always want to use big quotes in comments, or inside the blockquote element. Turns out (as you say) that it’s not really very clever to add quotation marks, and many people pulled me up in the comments about that one. Consider me told off. People will still do it though, so I’m helping them!

    2. It mostly works cross-browser. Stupidly I used Verdana for PCs in the example. Verdana makes terrible quote marks at 700% font-size! being a Mac boy I didn’t test on PC once I’d got the positioning right (happily lost in Lucida Grande), so as some people rightly say, the technique “looks terrible” on PC.

    It was all a bit experimental. If not useful for curly quotes, it could be useful for other irregularly spaced characters.

  2. Very nice article Colly (I stumbled over it just recently too).

    One interesting thing you could do with that code is combine it with language specific quotes (http://www.google.com/search?hl=en&lr=&q=language+specific+quotation). That way you get customized quotes in all languages, and still no images!

  3. A very clear and nice way of doing it is like this

    It looks good in Thunderbird and should look just as good on a webpage.

    My ten cents.

  4. I have always prefered the simple method of adding a left margin (3em or so depending) and left border to highlight a blockquote. This method is in close agreement to the Chicago manual of style guidelines that Rodger mentioned above (11.11 in 15th edition) and very simple to implement.

    What I am still hunting for is a clean way to include proper quote attributions via CSS. I know that the cite attribute of the blockquote element exists but to my knowledge no user agent currently uses it. Additionally, the cite attribute is officially only allowed to contain URI’s and this doesn’t help much if you want to quote something from a book.

  5. January 10, 2006 by Roger Johansson (Author comment)

    Colly: Thanks for the heads-up. I hadn’t checked the technique on PC.

    Aaron: A bit of CSS can be used display the value of the cite attribute in browsers that support generated content. There is an example in Quotations and citations: quoting text.

  6. I am currently implementing language specific quotation marks for Debian website and have created an example page for inline quotes.

    I think, it is quite difficult to find out the typographical rules for all the languages, and I am not sure, if alle the quotation marks there are well done. But the inline stylesheet might be interesting for those interested in a solution working with nearly every browser. For IE the only solution seems to be to include the IE7 Javascript package (insert .ie in the url above for IE - not yet linked).

    As I want to do an example page for blockquotes, too, I am interested in suggestions, where to get the correct rules for as many languages as possible.

    Please do not blame me for my simple pages. ;-)

  7. @Jutta: I thought this was quite adequate in detailing the different Language Specific Quoting and Quotation Marks.

  8. @Mats: Thanks for correcting the URL.

    @Aaron: If you use the nice example for cite attribute, be aware, that not all browsers allow to access the URI. I added a new version of my quotes page for blockquotes which is not ready yet and using your CSS for the cite attibute, but seems only Opera supports the URI. If it was working well, it would be nice to use it to point to the citation source.

  9. January 12, 2006 by Roger Johansson (Author comment)

    Jutta: I edited your first comment to fix the URL there as well.

  10. @Rodger - Thanks for the link. As Jutta mentioned a lot of the CSS 2.1 features are not broadly supported yet. I really wish that the W3C people had included a version number in the CSS specification and a way to query a user agent for version level compliance but that is an arguement for another day.

    The problem with using the cite attribute of the blockquote element directly is that we are only allowed to assign URIs as sources. Your link got me thinking that the best alternative is to use the blockquote element’s cite attribute to point to a cite element. For Example:

    <blockquote cite="#fn1"><p>I hate quotations. Tell me what you know.</p></blockquote>
    <cite id="fn1">
        Ralph Waldo Emerson
    </cite>
    

    This works semantically since we retain a link between the quote and its attribution. Using Rodger’s CSS we can include an anchor at the end of the quote that will lead to the cite if we decide to position it away from the quote (ie, in a footnote section at the end of an article, etc).

  11. Sorry about that, Markdown ate my example code even though it looked fine in preview. Here is the code snippet again:

    <blockquote cite=”#fn1”>
         I hate quotations. Tell me what you know.
    </blockquote>
    <cite id=”fn1”>
         Ralph Waldo Emerson
    </cite>

  12. And lest we forget, a proper response to Emerson is “I’d be glad to. Now, as it happens, this guy said it really well…”

  13. While I am Swedish myself, and as such might be under suspicion of holding opinions that would not apply :-) I would say designers have picked up on what orthodox Manual of Style readers have not: the iconographic semantic message signalled by the quotation mark, as identifying a quotation, whether block quoted or not.

    As such, it is helpful, whether correct or not.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.