sidenotes, footnotes, and endnotes samples

There seems to be a healthy interest in sidenotes, footnotes, and
endnotes in the digipub IG:

  https://lists.w3.org/Archives/Public/public-digipub-ig/2015Feb/0006.html
  
I've created some sample documents that show types of notes that are
currently possible. The documents are linked from here:

  http://css4.pub

Prince [1] hase been used to convert all HTML/CSS pages to PDF on that page.

This first document shows the use of sidenotes:

  http://css4.pub/2015/textbook/somatosensory.pdf
  http://css4.pub/2015/textbook/somatosensory.html

There are two types of sidenotes in the document:

  a) figure captions: narrow figures have their caption in the outside
  margins, alternating between left/right on left/right pages.

  b) meta-information is shown in the pink boxes; notice how text
  alignment changes on left/right pages.

The left/right magic is due to 'inside' and 'outside' property names
and keywords. Only Prince [1] support these, I believe.

Also, there's a footnote in the document, floated to the bottom of the
page.

---

The second document shows footnotes floated to the bottom of the
column:

  http://css4.pub/2015/usenix/example.pdf
  http://css4.pub/2015/usenix/example.html

Also, two types of endnotes are used:

  a) references to other articles are marked up with the <cite>
  element and placed inline. A small script collects all these at the
  time of formatting, and move them to the end, leaving an endnote
  call behind

  b) the table has inline footnotes that are moved to the end of the table
  (and not the bottom of the page/column)

In both these cases, the notes are moved by way of a small script.
Since the movement in structural (to an element), rather than
presentational (to a place in the layout), using a script to perform a
tree transform seems like better solution than making CSS do the job.
In any case, CSS is used to style the notes. 

--

In conclusion, it's possible to replicate many types of notes using
current web technologies. Also, I'm sure that all readers that have
made it this far can point to examples of note styles that cannot
replicated.

[1] http://www.princexml.com  

    Disclosure: I'm a board member of YesLogic, the company behind
    Prince

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Wednesday, 25 March 2015 16:13:11 UTC