Citr.js JavaScript Rendering of References for Quotations and Paraphrases

28th Aug 2013: My sloppy searching yesterday failed to find Jeremy Keith's excellent write-up which gives a similar solution.
29th Aug 2013: I've created a technical test sheet.
2nd Sep 2013: I've updated this article and given the script a name (for now)

Summary

The cite attribute is not presented to the reader by many browsers, even though it can hold important information. Citr.js is JavaScript that exposes this information along with the title attribute in blockquote and q elements to create meaningful references. Citr.js is made available under the GNU Affero General Public Licence and is on Github.

Introduction

Whether it's verbatim or as a paraphrase, it's good practice (and manners) to give a reference to the original source of a quotation. In HTML, we can represent full quotations and paraphrases with blockquote and q. And the cite attribute is exactly the right attribute to use for referencing a source. But it's a pity that browser makers have consistently chosen to ignore it: if solutions on how to present this to a user had been tried, we could have had all sorts of interlinking for documents. But here we are, with the situation that a perfectly decent, semantically sensible attribute is not used, and we have to either create ugly hacks or have long discussions on document structure to replicate its true function. This is my ugly hack.

Citr.js would be handy for academic writing (which is mainly why I've written this: I'm just trying to solve a problem I know I'll have later). Key to this is using the attributes available to us as they were intended; and understanding that "quote" does not have to mean "direct speech".

A few technical assumptions:

you're going to make a web-page, and not just use a blogging engine;
you have already thought of using structural pseudo-elements to generate the text of the link source, say like blockquote:after {content: attr(title);}
you're happy to use JavaScript to render elements on a page, with all the problems that creates; and
you are capable of extrapolating the principles presented here for your own ends and taste in style.

Full quotations

If it's words on the Internet you're quoting, then the URL is fine. But if the words are from a book, it might be best to refer to a record of the book.

In most cases, you can find a link to the book on the web if it has an ISBN. You can use a library site like Worldcat to find the right book, and link to its record. We can then use the title attribute - yes, with the intention for which it was created - to provide the title and author of the book; and the Citr script to release the gold in a cite element.

In African societies, participation in music may be a voluntary activity or an obligation imposed by one's membership in a social group. Such a social group may be a descent group (a group of people who trace their ancestry back to the same person), or it may be any group based on the broader societal classifications of age, sex, interest or occupation.

The HTML looks like this:

<blockquote cite="http://www.worldcat.org/title/music-of-africa/oclc/841677" title="J. H. Kwabena Nketia, 'The Music of Africa' (1974), p. 35"> 
<p>In African societies, participation in music may be a voluntary activity or an obligation imposed by one's membership in a social group. Such a social group may be a descent group (a group of people who trace their ancestry back to the same person), or it may be any group based on the broader societal classifications of age, sex, interest or occupation.</p>
</blockquote>

Without a link to a book, you can still display relevant information through the title attribute: but bear in mind my second assumption, as without JavaScript it will be information that will not be rendered.

There is no theory. You have only to listen. Pleasure is the law. I love music passionately. And because l love it, I try to free it from barren traditions that stifle it. It is a free art gushing forth - an open-air art, boundless as the elements, the wind, the sky, the sea. It must never be shut in and become an academic art.

Paraphrasing with reference

Consider the following paragraph:

J. H. Nketia said that playing music in African societies may either be voluntary or an obligation by belonging to a certain group or family. We explored this idea by following fifty groups from the Copperbelt region of Zambia over a five-year period.

Yes, they're "my own words" but in fact I have quoted someone (specifically as a paraphrase) and that paraphrase can be referenced. The partially-quoted fragment is too short to put in a block of its own, so the q element is appropriate here.

Most browsers will render this with quotation marks, but we don't need them in our case. By adding a simple CSS rule (for example, q.indirect {quotes:none}) we can turn off quotes:

And then (once again using the title attribute appropriately) we can add the reference and use CSS to present it perhaps as

a footnote (which you can see at the end of this page);
marginalia (which is an aside); or
as a reference in parentheses (Harvard referencing).

The script processes the different styles by CSS class - checking for either "marginalia", "footnote" or "harvard" for the positioning of the reference, and "indirect" to hide quotation marks.

J. H. Nketia said that playing music in African societies is done by choice, or by belonging to a certain group or family. We explored this idea by following fifty groups from the Copperbelt region of Zambia over a five-year period.

Paraphrase, citation as marginalia

J. H. Nketia (1974) said that playing music in African societies is done by choice, or by belonging to a certain group or family. We explored this idea by following fifty groups from the Copperbelt region of Zambia over a five-year period.

Paraphrase, citation as parentheses

Debussy wanted to free music from older traditions. He saw it as a free art gushing forth - an open-air art, boundless as the elements, the wind, the sky, the sea.

Paraphrase followed by direct quoting, citation as footnote in main body of document.

The framework for the HTML is as follows. In this case, we'd create footnotes:

pblah blah q class="footnote indirect" cite="#url" title="text for reference"paraphrase/q. Blah blah q class="footnote" cite="#url" title="text for reference"direct quote/q./p

Discussion

Citr.js gives the web author the option of writing clean code while the script dynamically extracts the meaning in a form that most of the page's audience can use. This slightly guarded approach comes from knowing how this affects people who have no access to Javascript in the browser: they won't have access to the references. So it isn't foolproof. But it uses the two quote elements with their proper meanings. As an author you still have to know how to write references; but citr.js might save some time in formatting them.

The script doesn't handle cases where you might want to refer to two different authors within the same quote:

Many 19th Century American authors noted the importance of religion in conceiving literature (Emerson 1123; Thoreau 1994).

From the OWL Perdue site

But in most cases, it will be fine. Except with Internet Explorer, which has no support for the quotes:none CSS declaration and (still) shaky inline-block support.

There are two other things to think about:

code structure and definitions

I've gone for using a specific code structure for the block quotes ~~which is possibly unpopular~~. In my opinion, if cite were reverted to its original HTML4 definition and then treated as figcaption is for figure, we'd all go a long way to being happier. This is exactly what I've done here: it doesn't require a huge leap of imagination.
```
blockquote cite="#url" title="text for citation"
{text of quotation}
/blockquote
```
what the page author would type, if using the Javascript described above.
```
blockquote cite="#url" title="text for citation"
{text of quotation}
citea href="#url"text for citation/a/cite
/blockquote
```
what Citr.js generates from the preceding code.
figure blockquote {text of quotation} /blockquote figcaptiona href="#url"text for citation/a/figcaption /figure

One of the recommended methods: note that this stretches the definition of figure to the point where you may as well use div.

Also note that the structure pattern for the figure block is identical to the blockquote pattern in preceding figure:

blockquote {content} cite{content}/cite /blockquote figure {content} figcaption{content}/figcaption /figure

Two identically-structured code blocks: only one of them conforms. Why?

I cannot see any decent reason why the definition of cite couldn't be expanded, so that it represents a citation for the contents of its parent blockquote.

This was changed, so cite can represent a citation for a block.
browser implementation

In Opera (well, at least, the old Opera) you can bring up a context menu on an image: from there you can go to "Image properties..." and read the alternative text, long description and title. My knowledge of other browsers is woolly, but I suspect there is something similar. Could this not be done for blockquote? I suppose the script above could be modified to do bring up an alert box, so someone could make an extension (or in the old Opera, build it into the menu - yes, it really was that flexible): but how hard would this be for a browser maker to do?