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


/ Published in: jQuery
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.