platypope.org

No — you've got sidebar in my footnotes!

...

Ahem.

One of the guys in #atlrug1 wanted some more details on how I did the footnotes-in-sidebar thing. It's actually a pretty straightforward semantic XHTML + Javascript + CSS triple-whammy. Each footnote/footnote-reference pair is marked up like this, with all the footnotes collected at the end of the post content:

<p> ... Ruby on Rails<a class="footref" href="#fn.1.1">1</a> ... </p>
...
<p class="footnote"><a class="footnum" name="fn.1.1">1</a>  I don't ... </p>

I then use the following Javascript to move each footnote into a <div/> preceding the paragraph containing its footnote-reference2:

/* Event.onReady() from lowpro.js <URL:http://www.ujs4rails.com/> */
Event.onReady(function () {
    $$('.footnote').each(function (footnote) {
        footnote.cleanWhitespace();

        var anchor = '#' + footnote.firstChild.getAttribute('name');
        var footref = $$('.footref').find(function (e) {
            return e.getAttribute('href') == anchor;
        });

        /* Be safe in case of reference-less footnotes */
        if (footref) {
            var parent = $(footref.parentNode);
            var holder = $(parent.previousSibling);
            var tag = holder.tagName;

            if (tag) {
                tag = tag.toLowerCase();
            }

            /* Create the <div/> if it doesn't yet exist */
            if (!(tag == "div" && holder.hasClassName('sidebar'))) {
                holder = document.createElement('div');
                holder.addClassName('sidebar');
                parent.parentNode.insertBefore(holder, parent);
            }

            footnote.remove();
            holder.appendChild(footnote);
        }
    });
});

Then the final bit of magic CSS3:

#sidebar, .sidebar {
  position: absolute;
  right: 0px;
  width: 28%;
  /* ... */
}

The way CSS works, absolute-positioned elements are pulled out of where they would be in the element flow to their specified absolute position. Because we only specify an x position (right: 0px) for sidebar elements, the elements retain the y position they would have had if they had remained in the layout. The elements following the sidebar elements then move up into the space left behind, automatically placing them in the same vertical position as their sidebars.

It's missing a few refinements, like footnotes in footnotes and footnotes in code examples. But the current result is pretty nice: nutritious footnote-like footnotes in the XHTML (and the Atom feed), but delicious sidebar-like footnotes in the rendered page.

1 IRC channel of the Atlanta Ruby Users' Group.

2 Any tips on making this better would be appreciated. Despite Prototype's help (so far as I've learned it), this still seems like more code than necessary.

3 There's actually a little more CSS to deal with the position of the first sidebar element in my .content blocks, but I haven't gotten that working properly across Firefox and Opera yet. And I haven't even rendered the page in IE or Safari. Take that!