I implemented this in my online book[1] and it wasn't too bad. Try resizing the window to see.
The entirety of the JS (not including jQuery) is:
$(document).ready(function() {
$(window).resize(refreshAsides);
// Since we may not have the height correct for the images, adjust the asides
// too when an image is loaded.
$('img').load(function() {
refreshAsides();
});
// On the off chance the browser supports the new font loader API, use it.
if (document.fontloader) {
document.fontloader.notifyWhenFontsReady(function() {
refreshAsides();
});
}
// Lame. Just do another refresh after a second when the font is *probably*
// loaded to hack around the fact that the metrics changed a bit.
window.setTimeout(refreshAsides, 200);
refreshAsides();
});
function refreshAsides() {
// Don't position them if they're inline.
if ($(document).width() < 800) return;
// Vertically position the asides next to the span they annotate.
$("aside").each(function() {
var aside = $(this);
// Find the span the aside should be anchored next to.
var name = aside.attr("name");
var span = $("span[name='" + name + "']");
if (span == null) {
window.console.log("Could not find span for '" + name + "'");
return;
}
aside.offset({top: span.position().top - 3});
});
}
In my book, the asides are positioned very precisely next to certain lines. If you don't need that level of precision, a pure CSS solution is possible, I think.
Overlapping footnotes could be a problem, but to me that's a case where trying to completely separate design from content is a bad idea. Design should optimize for the actual prose you have and not all possible copy you might write. Likewise, it's often worth tweaking copy a bit to make it look better with your design.
In a couple of cases with my book, I tweaked or rearranged asides to avoid them overlapping.
[1]: http://gameprogrammingpatterns.com/introduction.html