Grauw’s blog

To mark up quotes, HTML has an element called blockquote. This element also has a cite attribute, with which the author can designate the source of the citation. Unfortunately, this information is not used by any of the popular web browsers (or well, actually Firefox shows it in the the citation’s properties window).

So, Anne van Kesteren thought it a nice idea to dynamically add a link to the citation source, using script. Good idea, let’s do something with all those citation sources I tend to add to blockquotes. In the following quote, if you’re using a Mozilla-based browser, note the symbol on the right:

Bonus points for the XBL implementation.

Apparantly, doing it using XBL is better, or at least gives bonus points. Huzzah, I know some (Mozilla) XBL! So let me do this. Here’s the contents of the grauw-xbl.xml file:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <binding id="blockquote-cite">
        <content>
            <xhtml:a xbl:inherits="href=cite" class="citelink" rev="citation"
                     title="Go to citation source">※</xhtml:a>
            <children/>
        </content>
    </binding>
</bindings>

Fyi, the ※ character designates a reference. Also note the nice rev="citation" attribute. Goodness. Put this file in the same path as your CSS files, and refer (and style) it in your CSS as follows:

blockquote {
    -moz-binding: url("grauw-xbl.xml#blockquote-cite");
}
blockquote > a.citelink {
    display: none;
}
blockquote[cite] > a.citelink {
    display: block;
    float: right;
    border: 1px solid black;    /* Yes this looks ugly. Do it better yourself. */
}

For added coolness, you could do something like this instead of that last rule to make it appear on top of the quote when you hover over it:

blockquote[cite]:hover > a.citelink {
    display: block;
    float: right;
    height: 1.1em;
    margin-top: -1.1em;
    border: 1px solid black;
    border-width: 1px 1px 0 1px;
}