I implemented this in my online book[1] and it wasn&#x27;t too bad. Try resizing the window to see.<p>The entirety of the JS (not including jQuery) is:<p><pre><code>    $(document).ready(function() {
      $(window).resize(refreshAsides);

      &#x2F;&#x2F; Since we may not have the height correct for the images, adjust the asides
      &#x2F;&#x2F; too when an image is loaded.
      $(&#x27;img&#x27;).load(function() {
        refreshAsides();
      });

      &#x2F;&#x2F; On the off chance the browser supports the new font loader API, use it.
      if (document.fontloader) {
        document.fontloader.notifyWhenFontsReady(function() {
          refreshAsides();
        });
      }

      &#x2F;&#x2F; Lame. Just do another refresh after a second when the font is *probably*
      &#x2F;&#x2F; loaded to hack around the fact that the metrics changed a bit.
      window.setTimeout(refreshAsides, 200);

      refreshAsides();
    });

    function refreshAsides() {
      &#x2F;&#x2F; Don&#x27;t position them if they&#x27;re inline.
      if ($(document).width() &lt; 800) return;

      &#x2F;&#x2F; Vertically position the asides next to the span they annotate.
      $(&quot;aside&quot;).each(function() {
        var aside = $(this);

        &#x2F;&#x2F; Find the span the aside should be anchored next to.
        var name = aside.attr(&quot;name&quot;);
        var span = $(&quot;span[name=&#x27;&quot; + name + &quot;&#x27;]&quot;);
        if (span == null) {
          window.console.log(&quot;Could not find span for &#x27;&quot; + name + &quot;&#x27;&quot;);
          return;
        }

        aside.offset({top: span.position().top - 3});
      });
    }
</code></pre>
In my book, the asides are positioned very precisely next to certain lines. If you don&#x27;t need that level of precision, a pure CSS solution is possible, I think.<p>Overlapping footnotes could be a problem, but to me that&#x27;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&#x27;s often worth tweaking copy a bit to make it look better with your design.<p>In a couple of cases with my book, I tweaked or rearranged asides to avoid them overlapping.<p>[1]: <a href="http:&#x2F;&#x2F;gameprogrammingpatterns.com&#x2F;introduction.html" rel="nofollow">http:&#x2F;&#x2F;gameprogrammingpatterns.com&#x2F;introduction.html</a>