Styling blockquotes

For ages now I’ve been meaning to write up a brief tutorial on styling quotes. There are many articles out there, many great resources which talk of the different ways of styling quotes – worth a read. My aim here is to give you a bit of info on handling this popular typographical feature, hoping to inspire you to give quotes the attention they deserve.

let’s take this quote from one of my favourite web gurus
(as published on Twitter, 5/5/08):

Jeffrey Zeldman

Content precedes design. Design in the absence of content is not design, it’s decoration.

A quick list of the tags you can use:

  • <blockquote>  </blockquote>
    used for long quotations – a default margin is applied, the unstyled font appears in italic.
    —w3c—
  • <q></q>
    used for short inline quotations which do not require a line break.
    —w3c—
  • <cite></cite>
    used to define a citation
    —w3c—
    (I’m referring to the HTML tag here, NOT the blockquote attribute)

To show the quotation marks around the quote – you can use generated content, ie use CSS to add the quotation marks for you. This is a somewhat debated technique which is nonetheless very useful but is unfortunately not supported by all browsers. I will not go into this technique here as it is not widely used yet (though I have started using it for several projects myself) – please refer to the W3C for further information.

The other method of adding the quotations marks is to use the HTML entities, surrounded by the span tag. Make sure to pay close attention to the correct entities here – and do not mistake the apostrophe or a double, single quote for the appropriate quotation marks.
& for your reference here are the quotation entities:

&ldquo; — left double quotation mark (“)
&rdquo; — right double quotation mark (”)
&lsquo; — left single quotation mark (‘)
&rsquo; — right single quotation mark (’)
&quot; — straight quotation mark (“)

Another option is to create the quotation marks as graphics and add them as background images to the quote. I will go more into detail another time – for now – please take a look at my sample file.

PS: I had planned a much longer write up for this – but alas, time is not on my side and I will need to leave it there for now. I will however return to this post and elaborate on the details soon.

19/01/2009 blog,handcoding

4 Responses to “Styling blockquotes”

  1. Gravatar ilze says:

    thanks :)
    It’s little reminder for me.
    I love quotes :)

  2. Gravatar prisca says:

    Ilze :) thanks ;)
    Well, I’m not quite finished with this one yet – I will elaborate a little more soon :)

  3. Gravatar ilze says:

    I can’t wait ;)

  4. Gravatar Ana Laura says:

    thank you, it’s very explicative even if short, as you say. i’ll be waiting for more details, anyway.

graphiceyedea prisca schmarsow – portfolio

portfolio