Large double quotes: best way to add them

Question

I'm trying to wrap text in some big nice double quotes. I looked at this tutorial, but seems a little more complicated than I thought it should be. My gut tells me someone here in SO knows a smarter way. I'm open to anything: CSS, or PHP or Javascript, or Jquery (but preferably not JS/Jquery)

Answer 1

I'd recommend following the method they suggest: just add some styling on a blockquote element to give it a background image of your large quotes.

If you wanted a pure CSS solution, you can use something like this:

blockquote:before, blockquote:after {
    content: '"';
    font-size: 400%;
}

Of course, you'll have to play with the line heights and margins to get it looking ok, but even then, it's not gonna work in IE.

Answer 2

The tutorial doesn't look too complicated to me—I think their method is quite a good one. If you don't like specifying one of the background images in :first-letter, you could use CSS3's support for multiple background images:

blockquote {
    background: url("open-quote.gif") top left no-repeat,
      url("close-quote.gif") bottom right no-repeat;
    /* Other rules... */
}

...but this will only work in some browsers.

If I were you, I'd use the method described in the tutorial.