Cross-Browser Blockquotes Using CSS and jQuery

Back in December 2005, Simon Collison posted a tutorial on how to get "Swooshy Curly Quotes Without Images" on 24 Ways. I'd like to expand on that concept using jQuery, automating and skipping adding the additional span tags each time getting the same effect.

Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.

Before we begin, let me say that this method can be used with images or character entities, your choice. I'll show you how to do both methods through the tutorial.

Getting Started

The first thing you want to do is make sure you have the jQuery library linked on your page, this can be done in between the head tags or before the closing body tag at the bottom of the page. I prefer to use the Google cache version simply because I can include one link instead of downloading the latest version, uploading it to the server and changing all the links on every page. I manage many different websites using jQuery and managing multiple implementations of it on every site is a pain. This method makes it just that much easier.

Include jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

Okay, now that we have the easy part finished, lets start with the html. This one is pretty easy. Simply wrap your quoted text in blockquote tags as you always do. Done. Easy.

Blockquote html

<blockquote>Speech marks. Curly quotes. That annoying thing cool people do
with their fingers to emphasize a buzzword, shortly before you hit them.</blockquote>

On to the CSS

Now I'm going to define the blockquote style, width and height. The example I'm using is directly from the stylesheet for www.vagrantradio.com. Because WordPress automatically inserts paragraph tags in just about everything when writing a post, I also had to format the blockquote p. Specify your width for the blockquote in your post leaving room on either side for the quotes and add proper margins for the top and left to give it some spacing in order to stand out a bit. The right side doesn't need a margin due to the width being set, it should keep the box from getting too large.

Blockquote CSS

blockquote p {
  font-style:italic;
  font-weight:bold;
  color:#000;
}
blockquote {
  width:560px;
  margin:20px 0 0 20px;
}

That gives us our plain old blockquote style. Not very pretty, but that will be fixed very soon once I apply the jQuery.

Making jQuery do the work for you

The next step is to make jQuery take away some of the monotony and automatically apply our magic images or characters around our blockquote tag. Using the before and after manipulation attributes will insert the span tags we're about to create.

The code below when the page has finished loading will find any instance of blockquote on the page and the first line will apply our span with an id of tq for top-quote before our blockquote, and the second line will also find any instance of blockquote and apply another span with an id of bq for bottom-quote after our blockquote.

Span Manipulation

$("blockquote").before("<span id='tq'></span>");
$("blockquote").after("<span id='bq'></span>");

Now that we've got our span tags inserted, we can create the images to be used and set up the Css. For this website I used the Photoshop text tool and made two 16x16 images of blockquotes in Georgia and uploaded them to my server. Here is the top quote, and here is the bottom quote. After we get our style set I'll also show you how to use characters instead of images.

Even more Css

After a bit of fiddling with margin and padding, I've set my top quote as a background image with a width and height of 16 pixels, applied a negative bottom margin to bring the blockquote up to the beginning image position. The bottom quote does the same, but with different margins. The top negative margin is set to bring the closing background image up to the blockquote, the right margin doesn't really need to do anything here so it's set to zero. Setting the bottom margin to 20px gives a little room to even out the negative margins and the left margin is set to auto in order to push it directly outside and to the left of our blockquote. Most of you may have problems getting this to lay out correctly, but I might also add that I am using the Eric Meyer Css Reset with an attribute of text-align left in my style sheet. Some toying with the margins may be needed to get everything aligned correctly.

Styling the blockquotes

#tq {
  background: url(images/icons/top-quote.png) no-repeat;
  width:16px;
  height:16px;
  display:block;
  margin:0 0 -10px 0;
}

#bq {
 background: url(images/icons/bottom-quote.png) no-repeat right;
  width:16px;
  height:16px;
  display:block;
  margin:-30px 0 20px auto;
}

Now if the planets align correctly and everything is where it should be, you should have the beautiful sight you see below. Perfectly styled blockquotes.

Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.

But What About Not using Images?

Good question, and the solution is easy because you will use the same method to get our outcome. Now I might add that this solution requires some additional tweaking of the stylesheet to get them looking pretty, but you're good with that, right? Good. Let's do it.

Remember the code that was used to insert the span tags for the blockquotes? There only needs to be two simple changes made to it. Simply add the character entities inside the span tags in our jQuery function.

Span Manipulation Part Deux

$(document).ready(function() {
$("blockquote").before("“");
$("blockquote").after("”");
});

Tweak the css

#tq {
 font-size: 400%;
font-family:Georgia, "Times New Roman", Times, serif;
width:16px;
height:16px;
display:block;
margin:20px 0 -25px 0;

}
#bq {
font-size: 400%;
font-family:Georgia, "Times New Roman", Times, serif;
width:16px;
height:16px;
display:block;
margin:-20px 0 20px auto;
}

This gives us our blockquote with a bit different look, nicely styled and easily customized with different fonts and sizes.

Browsers Happy?

This solution may require some tweaking to get it to display correctly in every browser, but it looks great in just about every modern browser out there.

And as Simon Collison originally said:

It’s probably not perfect, but together we can beat the evil typographic limitations of the web and walk together towards a brighter, more aligned world.

Now, if we could just figure out a viable way to get IE6 out of the picture. I can't think of a brighter, more aligned world than that.