How should “sidenotes” inside inline content be handled?

(Please be aware that I am writing this from a user perspective.)

On a project called Wikisource ( which is slowly converting print works to a wiki based archive)

There is the following page: https://en.wikisource.org/wiki/Page:Historical_Works_of_Venerable_Bede_vol._2.djvu/121

The underlying print document page is https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Historical_Works_of_Venerable_Bede_vol._2.djvu/page121-2451px-Historical_Works_of_Venerable_Bede_vol._2.djvu.jpg

The current approach used is an ugly hack.

The underlying HTML/CSS for the page effectively being like that here:-

Another approach was that presented here :

None of these are ideal or (especially in the last example) consistent in display.

I would therefore like to ask for views on how the HTML/CSS spec could be extended to allow for the content to be better represented.

HTML 5 supports<aside></aside>, but currently these break up paragraphs, (and when I was using them in Firefox, <Aside></aside> forced a paragraph closure when used. Using a pusedo-element (in the above examples a “span”) and a CSS style was the ‘recommended’ best approach, but as demonstrated it isn’t ideal for the use case, especially as it in effect forces a layout, which may be inappropriate for some user-agents and browsers. ( Not everyone has wide screens.)

My thoughts on possible approaches to supporting “side-note” and “foot-note” like content were:

1. A form of “inline” Aside, with the positioning being user agent determined.
2. Retention of span (or div) approach with some additional CSS paramters/attributes.
3. No new elements, but some way of hinting to the browser that the content (and thus the positioning of) two elements is directly related.

I’m seeking opinions on which approach I should develop a more detailed proposal for.

You might have a look at the [Web Annotation Data Model] spec (full disclosure, I’m one of the editors ). There are ways to express that model in RDFa.

We’ve also bee discussing the possibility of bringing over (as part of the Digital Publishing Interest Group’s work) bringing over the noteref element from EPUB (or something like it), but that’s a much bigger to fry.

I’m confident others in the Web Annotation Working Group would enjoy hearing about your use cases! We’d love to hear from you on the WG’s mailing list.

Thanks for posting this!

Thank you for the response. The side-notes nominally are part of the “content” document though, as opposed to an “annotation” added later.

If you mean “annotation” with the meaning "elements which form part of the content of the document content, but which sit outside the linear/logical flow of other elements, " (such as margin notes, side-notes, paragraph numbering, and line numbeering in some poetic works.), then that’s a definition that should ideally be in specification.

My concern in posting originally is that at present, the approach uses ‘fixes’ a layout whereas in some applications like for example moblile, the screen width might not be suited to having full side-note (at-side) display, and where a foot-note (at-end) display may be more appropriate.

I’ve mentioned paragraph numbering, line numbers in poetic works as these are a slightly different use-case.

Web Annotation endeavors to encompass those use cases also. The word “annotation” certainly does.

Paragraph and line numbering would typically be done using something besides annotation, but you could use them for that also if needed.

Web Annotation Data Model document can also be presented in various ways, so you could choose how you render them based on the modality of the user.

It mostly depends on how you intend to render them and what tools (JS or “just” CSS and HTML) you have at your disposal. The Web Annotation Data Model, though, can contain the annotation you have their. FWIW.

In respect of the Wikisource example I gave at the start of this thread, a proposal has been made to the Wikimedia community Tech iniative concerning the issue of sidenotes, in this page( https://meta.wikimedia.org/wiki/2016_Community_Wishlist_Survey/Categories/Wikisource )

(Aside: I’d also suggest taking a look at some of the other proposals, from the perspective of whether they are areas for development of HTML/CSS etc.).