/*  this function adds Curly Quotes around the content of the specified html container.  */
$(document).ready(function() {
    // Curly Quotes by Michael Thorne
    // Go through each element from the quote field with a class of "quote-wrapper".  This can be adjusted to any HTML selector you choose, including blockquote elements.
    $('.quote-wrapper').each(function() {
        // Get the text of the span
        $(this).prepend('<span class="bq-start">�</span>');
        $(this).append('<span class="bq-end">�</span>');
      }
    );
    // End Curly Quote code
  }
);


/* styles for curly quotes */
.bq-start, .bq-end  {
  position:absolute;
  display:block;
  z-index:-5;
  color:#CCCCCC;
  font-size:4.5em;
}
.bq-start {
  left:-10px;
  top:10px
}
.bq-end {
  right:0px;
  bottom:-0.4em;
}
/*  since we are using absolute positioning for the quotes, the wrapper needs to be position:relative.  */
blockquote, .quote-wrapper {
 z-index:10;
 position:relative;
}

/*  this function adds Curly Quotes around the content of the specified html container.  */
$(document).ready(function() {
    // Curly Quotes by Michael Thorne
    // Go through each element from the quote field with a classname of "views-field-field-quote-value"
    $('.views-field-field-quote-value .field-content').each(function() {
        // Get the text of the span
        $(this).prepend('<span class="bq-start">�</span>');
        $(this).append('<span class="bq-end">�</span>');
      }
    );
    // End Curly Quote code
  }
);


/* styles for curly quotes */
.bq-start, .bq-end  {
  position:absolute;
  display:block;
  z-index:-5;
  color:#CCCCCC;
  font-size:4.5em;
}
.bq-start {
  left:-10px;
  top:10px
}
.bq-end {
  right:0px;
  bottom:-0.4em;
}
.views-field-field-quote-value {
 position:relative;
}
.views-field-field-quote-value .field-content {
 z-index:10;
 position:relative;
}

/*  this function adds Curly Quotes around the content of the specified html container.  */
$(document).ready(function() {
    // Curly Quotes by Michael Thorne
    // Go through each element from the quote field with a classname of "views-field-field-quote-value"
    $('.views-field-field-quote-value .field-content').each(function() {
        // Get the text of the span
        $(this).prepend('<span class="bq-start">“</span>');
        $(this).append('<span class="bq-end">”</span>');
      }
    );
    // End Curly Quote code
  }
);


/* styles for curly quotes */
.bq-start, .bq-end  {
  position:absolute;
  display:block;
  z-index:-5;
  color:#CCCCCC;
  font-size:4.5em;
}
.bq-start {
  left:-10px;
  top:10px
}
.bq-end {
  right:0px;
  bottom:-0.4em;
}
.views-field-field-quote-value {
 position:relative;
}
.views-field-field-quote-value .field-content {
 z-index:10;
 position:relative;
}

This is a method that I use to easily wrap an HTML container with nice curly quotes.  I much prefer this method over using images because the quotes can be easily stylized using css fonts, colors, and sizes.  Also, the markup is semantically correct.

Curly Quotes using jQuery and CSS - pullquotes, blockquotes, and more...

css, textmate, jquery

jQuery