

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

* How could I set the notes' horizontal position relative to the margin or to an element other than the enclosing ? */ So as to make its vertical center align with the text * BTW: This should be proportional to the note's height, My first try employs absolute positioning: Both of them use relative positioning on the marker (a ) so as to be able to position the note (a ) with a top offset relative to that of the referencing text. Tufte is a well-known proponent of this solution. Keep in mind that, past a certain width, we'll have margins anyway, since text lines cannot exceed a certain length if they are to remain readable, so we could as well employ that otherwise unused space. Notes shall be displayed as sidenotes if there is enough room for them in the margins otherwise, they shall appear as footnotes. This is part of the responsive design of a blog. I can do it with JavaScript, looking at the offsetTop property of the note reference, but then I would have to handle viewport resizes and zooming as well, whereas a CSS solution would leave that to the browser. The foremost concern is, of course, placing them at a height relative to that of the text referencing them.
