Automatic References and Footnotes

Citing references in technical media is important. If you’ve ever spent time writing technical media for the web you know how tedious referencing can be. Unless you have some fancy software, woe to the man who has to refactor his footnote references. Whether you’re in academia, a law office, or if you’re just a blogger like me and you’re in need of automatic footnotes all you need is a little snippet of code to do the trick.

First, for all of your inline quotations (<q>) and block quotes (<blockquote>) ensure that you have properly cited them by defining cite attributes. (E.g. <blockquote cite=”http://bitdesigner.com/”>) Additionally, if you’d like to have nice titles for you citations then define your citation titles by defining the title attributes. (E.g. <q cite=”http://bitdesigner.com/” title=”Lorem Ipsum, Publisher, 2013″>) This will do for quotations. However, what if there is content that you want to cite that is not a direct quotation? To cite non-quotes simply enclose the content that you want cited in a span tag with the class cite and be sure to define these with citation titles by defining the title attributes. (E.g. <span class=”cite” title=”The Title”>Lorem Ipsum</span>)

There’s an option to have references cited inline instead of being included in the reference list. To do this, add the class inline to each element that is to be cited inline. (E.g. <q cite=”http://bitdesigner.com/” title=”Lorem Ipsum, Publisher, 2013″ class=”inline”>)

You may want to exclude some items from being a reference. To do this, add the class exclude to any elements that you don’t want cited. (E.g. <blockquote cite=”http://bitdesigner.com/” title=”Lorem Ipsum, Publisher, 2013″ class=”exclude”>)

The next step is to add this small HTML snippet to where you want your reference list to appear (e.g. at the bottom of the page as footnotes):

<div id=”references-container”></div>

Next, include jQuery on the page and then include the following JavaScript code in the page just before the closing </body> tag.


$(document).ready(function() {
			$("q[cite],q[title],blockquote[cite],blockquote[title]").addClass("cite"); // Add class cite to elements with cite and/or title attribute values
		citations = $("q.cite,blockquote.cite,span.cite[title],a.cite[href],a.cite[title]"); // Get all citations
		if(citations.length > 0) { // There are citations
			var references = new Array();
			i = 0;
			citations.each(function(){
				citation = $(this);
				if (!citation.hasClass("exclude")) { // Not excluded from citations
					referencecontent = "";
					url = citation.attr("cite");
					title = citation.attr("title");
					href = citation.attr("href");
					if(href) {
						if(!url) { // use href as url
							url = href;
						}
						if(!title) {
							title = href; // use href as title
						}
					}
					if(title && url) {
						referencecontent += "<a href="">" + title + "";
					}
					else if(title) {
						if ((title.indexOf(":\/\/") > -1) || (title.indexOf("mailto:") > -1)) { // Title is URI
							referencecontent += "<a href="" title>" + title + "";
						}
						else {
						referencecontent += title;
						}
					}
					else if(url) {
						referencecontent += "<a href="">" + url + "";
						title = url; // Format reference title
					}
					if (citation.hasClass("inline")) { // Inline citation
						citationcontent = "<span class="note">" + referencecontent + "";
						if (citation.is("blockquote")) { // Is blockquote element
							citation.append(citationcontent);
						}
						else {
							citation.after(citationcontent);
						}
					}
					else {
						reference = i;
						ibid = "Ibid."; // Ibidem ("the same place")
						if (referencecontent.indexOf(ibid)  -1) { // Search for title in existing reference
									referenceindex = index; // Get existing reference index position
									return false;
								}
							});
							if (referenceindex > -1) { // Reference exists
								if (referenceindex == (i-1)) { // Existing reference is immediately preceding
									referencecontent = ibid; // Apply ibidem
								}
								else {
									ibidref = referenceindex + 1; // Ibidem reference number
									referencecontent = ibid + " " + ibidref; // Apply ibidem reference
								}
							}
						}
						referencecontent = referencecontent.replace(RegExp(ibid,"gi"), "<span class="ibid">" + ibid + ""); // Span ibids
						reference++;
						referencecontent = "<span class="backlink"><a href="#note-">^<span class="content">" + referencecontent + ""; // Prepend backlink and span reference content
						references[i] = referencecontent; // Append new reference
						i++;
						citationcontent = "<sup><a href="#reference-" title="">" + reference + "";
						if (citation.is("blockquote")) { // Is blockquote element
							if (citation.children().length > 0) {
								citation.children(":last-child").append(citationcontent);
							}
							else {
								citation.append(citationcontent);
							}
						}
						else {
							citation.after(citationcontent);
						}
					}
				}
			});
			if(references.length > 0) { // There are references
				referencescontent = "";
				$.each(references, function(index, value){
					index++;
					referencescontent += "<li>";
					referencescontent += value;
					referencescontent += "";
				});
				if (!referencescontainer) { // References container not defined
					referencescontainer = "#references-container"; // Default references container
				}
				$(referencescontainer).append("<div class="references">");
				$("div.references").append("<h1>References:<ol>");
				$("#references").append(referencescontent);
			}
		}
});

This code first waits for the DOM to be ready, then it looks through the entire page for quote and blockquotes with cite and/or title attributes. Additionally it looks for span tags assigned the class cite with a defined title attribute. For each of these elements that aren’t excluded it formats the references with the cite and title attribute values. If an inline reference is assigned it cites accordingly. For each item that is to be cited in the references list, it adds a superscript note that links to the associated reference list item. Finally, the script takes all of the reference items and includes them in a reference list that is displayed where the reference-container is located.

Additionally, you may want to add some CSS to style the notes and references.


/* Print Style Sheet */

@media print
{

	/* Citations */
	
	span.note a[href]:after, div.references ol li a[href]:after
	{
		content: " (" attr(href) ") ";
	}

}

/* Global (All) Style Sheet */

@media all
{
	
	/* Citations */
	
	span.note
	{
		font-style: normal;
	}
	
	span.note:before
	{
		content: " (";
	}
	
	span.note:after
	{
		content: ")";
	}
	
	blockquote span.note
	{
		display: block;
	}
	
	blockquote span.note:before
	{
		content: "\2013\20";
	}
	
	blockquote span.note:after
	{
		content: normal;
	}
	
	sup.note
	{
		font-style: normal;
	}
	
	sup.note:before
	{
		content: "[";
	}
	
	sup.note:after
	{
		content: "]";
	}
	
	blockquote sup.note:last-child
	{
		font-size: 1em;
	}
	
}

What’s accomplished is that we are able to automatically annotate content and compile a user-friendly reference list. Check out an example here.