(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:
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:
- A form of “inline” Aside, with the positioning being user agent determined.
- Retention of span (or div) approach with some additional CSS paramters/attributes.
- 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.