Posted By

MikeyLikesIt on 03/12/10


Tagged

css textmate blockquote jquery pullquote


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

MikeyLikesIt


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


 / Published in: jQuery
 

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.

  1. /* this function adds Curly Quotes around the content of the specified html container. */
  2. $(document).ready(function() {
  3. // Curly Quotes by Michael Thorne
  4. // 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.
  5. $('.quote-wrapper').each(function() {
  6. // Get the text of the span
  7. $(this).prepend('<span class="bq-start">�</span>');
  8. $(this).append('<span class="bq-end">�</span>');
  9. }
  10. );
  11. // End Curly Quote code
  12. }
  13. );
  14.  
  15.  
  16. /* styles for curly quotes */
  17. .bq-start, .bq-end {
  18. position:absolute;
  19. display:block;
  20. z-index:-5;
  21. color:#CCCCCC;
  22. font-size:4.5em;
  23. }
  24. .bq-start {
  25. left:-10px;
  26. top:10px
  27. }
  28. .bq-end {
  29. right:0px;
  30. bottom:-0.4em;
  31. }
  32. /* since we are using absolute positioning for the quotes, the wrapper needs to be position:relative. */
  33. blockquote, .quote-wrapper {
  34. z-index:10;
  35. position:relative;
  36. }

Report this snippet  

You need to login to post a comment.