"Floating" annotations with HTML/CSS/JavaScript/whatever

Question

I have a text document with some annotations, and I would like to make them appear near the text they accompany, on a webpage.

That is, I want to convert something like this:

   The Houdan hen was never drawn into the
   cult of Sredni Vashtar. Conradin had
   long ago settled that she was an
   Anabaptist. He did not pretend to have        [23]
   the remotest knowledge as to what an
   Anabaptist was, but he privately hoped
   that it was dashing and not very
   respectable.

appropriately, so that in a browser, the [23] is displayed somewhere on the same line as the words "pretend to have" (preferably in the left or right 'margin' on the page), whatever the font size or wherever the line breaks might be. Is this possible, with any mix of CSS/JavaScript/pre-processing, whatever?

See (the left margin on) this page for an example of what I want to do: have page numbers accompany the text. Except that the text isn't just verse that is all in <pre>, so I can't exactly copy what they do. (I guess it is possible to move all the annotations to the top/bottom of paragraphs and have them appear there, but I'd really not prefer that.)

I realise the question might be vague, but I'm open to suggestions.

[Note: I don't need anything to "float" in the technical (CSS/whatever) sense; I just imagined that having these "annotations" beside text mid-paragraph requires something of a floating nature. I'm open to suggestions for a better question title too :)]

Update: Also, does your method work if the "annotations" are longer than just a number, e.g. small paragraphs themselves or images?

Answer 1

The joy of absolute positioning

    .on-margin {
        position: absolute;
        right: 10%;      /* right margin from the containing box */
    }

How this works: With absolute positioning, you usually specify one of each right/left and top/bottom pairs of attributes. However, you don't have to: omitting top attribute leaves it at auto, that is, on the current line.

Clarification: after careful reading, I believe the CSS 2.1 specification doesn't mention that it's possible to specify right: 10%; top: auto; and that the specification doesn't prescribe any behavior.

Note: Earlier I specified display:block explicitly. In fact, per specification, display is automatically changed to block for most absolutely positioned elements.

Tested: Safari 4.0, Firefox 3.6a1pre, Camino 2.0b3, Opera 10.00b1 /Mac

References: CSS 2.1 visual model, my showcase page, answer to a related question.

Re: update. This perfectly works for large blocks. Note though that HTML doesn't like when div, header or similar 'big' tag is put inside p (and some browsers will break p in this case), so you might have to do some workaround around it. Showcase page updated with example.