5 Nov. 2007 • I’ve formatted this code as a plugin, too. Go to the project page.

Blockquotes, by definition, can and should in most cases have a title attribute and, if possible, a cite attribute. The former is the actually name of the quote’s source. The latter is the URI to the quotes location, if it was retrieved online.

For instance:

<blockquote cite="//heliologue.com" title="A Modest Construct">
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.
 
</blockquote>

This is all well and good for search engines, but it doesn’t do much for human readers (who are arguably more important, though it depends on who you ask). A human might want to see something like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

A Modest Construct

Which I achieved by appending

<cite class="source">
     <a href="//heliologue.com" title="A Modest Construct">A Modest Construct</a>
</cite>

to the blockquote.

But nobody wants to hard-code a citation into every blockquote, especially when it’s technically correct to attach the information to the semantic element in question (the blockquote, for those of you not following along). So, how to be structurally correct when using blockquotes, while still allowing human readers the benefit of such data?

Well, there are a number of methods. If you’re using a CMS or any kind of dynamically-generated page, you can use the system itself to parse blockquotes for their attributes and reuse that information.

The Old Way

A somewhat simpler and more flexible solution would be Javascript, which isn’t foolproof, but should be good enough for most people. Previously, I used Dunstan’s Blockquotes, which was an excellent solution for a long time.

function extractBlockquoteInfo()
        {
        quotes = document.getElementsByTagName('blockquote');
	for (i = 0; i < quotes.length; i++)
		{
		cite = quotes[i].getAttribute('cite');
		title = quotes[i].getAttribute('title');
		if ((cite) && (cite != ''))
			{
			if ( (cite.match('http://', 'i')) || (cite.match('ftp://', 'i')) || (cite.match('person://', 'i')) )
				{
				newlink = document.createElement('a');
				newlink.setAttribute('href', cite);
				newlink.setAttribute('title', ('Go to ' + cite));
				title = quotes[i].getAttribute('title');
				if ((title) && (title != ''))
					{
					newlink.appendChild(document.createTextNode(title));
					}
				else
					{
					newlink.appendChild(document.createTextNode('Quote source'));
					}
				newdiv = document.createElement('div');
				newdiv.className = 'source';
				newdiv.appendChild(document.createTextNode('\u2014 '));
				newdiv.appendChild(newlink);
				quotes[i].appendChild(newdiv);
				}
			else
				{
				newdiv = document.createElement('div');
				newdiv.className = 'source';
				newdiv.appendChild(document.createTextNode('\u2014 ' + cite));
				quotes[i].appendChild(newdiv);
				}
			}
 
		else if ((title) && (title != ''))
			{
			newdiv = document.createElement('div');
			newdiv.className = 'source';
			newdiv.appendChild(document.createTextNode('\u2014 ' + title));
			quotes[i].appendChild(newdiv);
			}
		}
	}
 
window.onload = function(e) {
extractBlockquoteInfo();
}

The New Way

I ran into conflict issues, however. Also, the script seems overly complicated for what it’s doing. I long ago chose my spot in the jQuery camp, and am currently using it on this blog for Thickbox and a few other miscellaneous things. So I thought: why not get blockquote data using jQuery? Here’s my resulting code (which I’m sure is flawed and crufty, but I put it together in about five minutes; suggestions are welcome).

$(document).ready(function(){
     $("blockquote").each(function(){
          var title = $(this).attr("title");
          var cite = $(this).attr("cite");
 
          if (cite == null && title != null) {
              $(this).append("<cite class='source'>"+title+"</cite>");
          }
 
          else if (cite != null && title == null) {
               $(this).append("<cite class='source'><a href='"+cite+"' title='"+cite+"'>"+cite+"</a></cite>");
          }
 
          else if (cite != null && title != null) {
               $(this).append("<cite class='source'><a href='"+cite+"' title='"+title+"'>"+title+"</a></cite>");
          }
 
          else {
          }
     });
});

Essentially, I’m looking for blockquotes that contains at least one of our particular attributes, and then parsing them for title and cite values. There are four possible outcomes:

1. title but no cite:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

2. cite but no title:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

3. cite and title:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

4. no cite and no title:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

I think that the <cite> element is the most semantically correct, but of course you’ll have to change that to fit your needs. I style it like this:

blockquote cite.source {
     text-align: right;
     border-top: 1px dashed #aaa;
     font-size: 0.95em;
     display: block;
     }

And there you go. An excellent Javascript library, a few lines of code (more than necessary even, as I wanted to cover all the possible cases), and you’ve got a flexible solution to blockquote citations.

§1906 · September 18, 2007 · Tags: , , , , , , ·

1 Comment to “Using jQuery to extract blockquote metadata”

  1. Conor says:

    This is a really great post, thanks for sharing. I only have sporadic connection to the internet at the moment, but I’ve downloaded this page for testing with my site, and I’ll implement it live later.

    I would appreciate seeing a lot more posts about the blog itself! This is a really mean site you have going.