In this article I demonstrate an easy method of creating pull quotes from a block of text using jQuery (a JavaScript library), CSS, and the html span element. I hope you find this method useful.

The code

To use the easy pull quote script you need the javascript and the css code, then a simple span surrounding what you want to be in the pullquote.

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// When the page is ready...
$(document).ready(
   function()
   {
 
	   	// Easy Pullquotes by Mike Jolley
                // Go through each span element with a classname of "pullquote"
		$('span.pullquote').each(function() {
                        // Get the text of the span
			text = $(this).text();
                        // Get rid of unwanted charactors
			text=text.replace( /\((.*)\)/gi, " " );
                        // Check if this is to be a right or left pull quote and output it
			if ($(this).is(".right")) 
				$(this).parent().before('<blockquote class="pullquote right"><p>&quot;'+ text +'&quot;</p></blockquote>');
			else
				$(this).parent().before('<blockquote class="pullquote"><p>&quot;'+ text +'&quot;</p></blockquote>');
		});
                // End pull quote code
   }
);

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

blockquote.pullquote {
	padding:12px 0;
	margin: 5px 15px 8px 0;
	float:left;
	width:180px;
	text-align: center;
	border-top:3px double #ccc;
	border-bottom:3px double #ccc;
        border-left:0;
        border-right:0;
	line-height:1.6em;
        background:#fefefe;
}
blockquote.pullquote.right {
	margin: 5px 0 8px 15px;
	float:right;
}
blockquote.pullquote p {
	margin:0 !important;
	font-size:1.4em;
	color:#666;
	font-weight:bold;
}

Instructions

For a left aligned pull quote simply wrap the text you want in the quote with a span with the classname “pullquote”:

<p>Lorem ipsum dolor sit amet <span class="pullquote">purus mollis dictum</span>.</p>

For a left aligned pull quote also add the “right” classname:

<p>Lorem ipsum dolor sit amet <span class="pullquote right">purus mollis dictum</span>.</p>

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum felis. Aliquam elit urna, dapibus id, gravida non, fermentum sit amet, libero. Aenean posuere ante at tellus. Nulla pharetra justo nec tellus. Cras feugiat sapien quis metus. Donec bibendum. Nam eget augue. Phasellus eu nisi. Vivamus tincidunt blandit leo. Integer eu mi et purus mollis dictum.

Mauris imperdiet lectus a ante. Nunc vestibulum lacus eu tortor. Sed et risus. Morbi orci leo, posuere adipiscing, pharetra ut, fringilla in, risus. Morbi auctor aliquam neque. Vivamus id lacus sit amet felis porta tincidunt. Pellentesque vehicula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce a elit fringilla turpis nonummy ultrices. Pellentesque in pede. Phasellus non dolor et metus venenatis nonummy. Proin sit amet eros vitae mi tempus convallis. Mauris vel dui sit amet risus facilisis luctus. Sed quis orci. Phasellus vitae velit ac mauris viverra pellentesque. Curabitur eros.

Acknowledgments

My Easy pull quotes were inspired by Roger Johansson’s automatic pull quotes which use normal JavaScript and CSS to achieve the same effect.

First I found the “JQuery Corner” plugin for rounded corners, but was disappointed that it did not include smooth, anti-aliased corners.

I then did some more google-trawling and found this post, which contained a modified version of Curvy Corners for use with JQuery. Now this script was much much better.

However…the filesize was a massive 40kb, way too big for production use, and to make things worse the code was not compatible with packer so I could not reduce the filesize.

Well, I got busy, and fixed the errors. It is now fully packer friendly meaning easy rounded corners in JQuery at only 9kb 8kb 15kb 20kb 16kb 10kb. Excellent. Read more for the download link.

Demo and download

You can also grab the plugin from Google Code.

The packed version is only 10kb, the uncompressed version is 23kb (thats half the size of the original script!).

Quick example

To make a curvy cornered box simply use:

1

		$('.round_this').corner();

Thats all there is too it. A great script!

For more information on Curvy Corners, check out its official site.!

*Edit: Found a small error in IE7 with the backgroundPosition property, fixed now. New file uploaded.

*Edit 2 – 25th Sep 07: More optimizations, smaller file!

*Edit 3 – 29th Sep 07: More optimizations, smaller file, and demo page up!

*Edit 4 – 6th March 08: New version up with better background image support.

*Edit 5 – 19th May 08: No extra padding, safari fixed, larger filesize to reduce overhead and increase speed.

*Edit 6 – 9th Aug 08: General fixes from feedback

*Edit 7 – 7th Oct 08: Major overhaul to improve compatibility with other plugins

*Edit 8 – 2nd June 09: Now compatible with jquery 1.3.2 – All future updates will be on Google Code (http://code.google.com/p/jquerycurvycorners/) – Hence im closing comments here. Post your contributions either on google code or in the forum.