CSS Hanging Quotation Marks

quote

In just about every article on web typography, one thing that is mentioned is that if you use quotation marks around blockquotes, the correct way to display them is to have the opening punctuation "hanging" over the edge of the block.

Normally, blockquotes will look something like this:

“FWebDe helps people to make fantastic websites, whether you are a designer, a developer, or someone just who loves websites.”

But that can add some weird whitespace below the opening quote, making it look a little bit like the first line is indented by one character.

“FWebDe helps people to make fantastic websites, whether you are a designer, a developer, or someone just who loves websites.”

That look much better. But, articles on web typography often don't mention exactly how to go about doing this. Fortunately, this can be done with a couple lines of CSS:

blockquote {
    text-indent: -0.4em;
}

The right value for text-indent may vary, depending on your font or font size. Just experiment with different sizes and see what works best.

That snippet simply 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.

If you want to automatically add in quotation marks, so that you don't have to worry about it, simply use this bit of CSS:

blockquote {
    text-indent: -0.4em;
}
 
blockquote:before {
    content: "“";
}
 
blockquote:after {
    content: "”";
}

This uses the :before and :after pseudoclasses which, you guessed it, select the content before and after that element. The content property defines the content that it contains. In this case, we're using quotation marks.

Note: To use this, you will need to have the following in between your <head> tags:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

This is to let the browser know that we are using the UTF-8 character encoding, which contains the quotation marks that we are using. Without it, you'll get a bunch of random symbols where the quotes should be.

Do you use hanging quotation marks at your site? Do you even use quotation marks at all? Be sure to leave a comment if you have any questions, or problems.

If you found this quick tip helpful, be sure to subscribe to the RSS feed, subscribe via Email, or follow me on Twitter.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

7 Comments

  1. TenFreddy
    January 9, 2010

    Cool tip! I've always wondered how to actually do this

  2. January 10, 2010

    Thanks for this. I need to make my blockquotes look nicer, this will be a big help.

  3. October 5, 2010

    This CSS effect is a nice touch and adds something to the text for sure.

  4. October 19, 2010

    Thanks for this CSS effect tip. I was looking for something like this to add to my site. I'm looking forward to reading a lot more of your site in the future.

  5. Saprissa2010
    October 30, 2010

    Anyone have an IE7 workaround for the :before and :after pseudo-elements?

Trackbacks/Pingbacks