[css books] endnotes, table notes, footnotes, and sidenotes in HTML/CSS

I've spent some time formatting documents with various types of notes
in paged documents. Results are uplifting: many types of notes can be
handled by CSS alone, others with a little help from JavaScript. This
message is an attempt to survey common types of notes, point to
sample HTML/CSS documents where these notes are used, and pose some spec
questions along the way. All sample documents are linked from here:

  http://css4.pub


1 ENDNOTES

Endnotes are quite easy as their placement are not relative to the page.
In their simplest form, an endnote is placed at the end of the
document by the author, with a (hyperlinked) call in the text.

However, it can be laborious to manually synchronize references in
this manner. An easier alternative is to keep the notes inline and to
move them to the end of the document at the time of formatting. This
is a simple tree transformation which can be performed by a script.
Here is a sample document where references are kept inline and moved
to the end by a script:

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

No new CSS functionality is introduced to support end notes.


2 TABLE NOTES

Table notes are a variation of end notes. Instead of moving the notes
to the end of the document, the notes are moved to the end of the
table, or to the end of the table cell. Again, this is a simple tree
transformation which doesn't require anything new from CSS.

The table in this document has inline notes that are moved to the end
of the table by a script:

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


3 FOOTNOTES

Footnotes have a rich tradition in western typography and many
esoteric examples can be found. Footnotes are typically moved to the
bottom of the page of their reference point. A footnote call is shown
at the reference point, and a corresponding footnote marker is shown
by the footnote. 

Both Prince and AntennaHouse implement basic CSS footnotes
interoperably, as shown in this test case linked from here:

  https://books.spec.whatwg.org/#footnotes

Multi-column layout increases the complexity of footnote formatting.
Should the footnote area span across all columns, or should footnotes
be shown in columns? If so, which one -- (a) the first, or (b) the
last? Or, perhaps, (c) each column should have its own foonote area? I
believe all these options must be achievable. No spec nor
implementation handle all of these.

Another complexity is the height of the foonote area. Some footnotes
can be long, but the footnote areas should not take up the full page.
Setting 'max-height' makes sense, but no implmeentations seems to
support this. Here is a document where a long footnote takes up a full page:

  http://css4.pub/2015/malthus/essay.pdf  (around page 157)

The PDF is generated from this HTML/CSS source:

  http://css4.pub/2015/malthus/essay.html

The use of 'text-replace' to get the "long s" in the pdf version may
be of interest to some.

  http://typophile.com/node/124371
  http://en.wikipedia.org/wiki/Long_s


4 SIDENOTES

Sidenotes are placed to the side of the main text, typically in a
purposeful wide margin. Here's a sample document with 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 alternation between left/right pages is done with:

  float: outside;
  margin-outside: -80mm;
  width: 75mm;

That is, "outside" and "inside" are used as aliases for "left" and
"right". Even 'text-align' can be made to depend on this, but it's
imposible for sidenotes to (say) have differnet background colors for
left/right pages. 

Floating to the inside/outside of pages is described here:

  https://figures.spec.whatwg.org/#floating-inside-and-outside-pages

Using these techniques, I believe it is possible to format a wide
range of textbooks in CSS.

However, the margin-inside and margin-outside properties are not part
of a spec. Perhaps they should, along with padding-inside,
padding-outside, and the corresponding border properties?

Somewhat more ambitious schemes are sketched here:

  https://books.spec.whatwg.org/#named-areas
  https://books.spec.whatwg.org/#selecting-elements-within-pages

These would allow sidenotes to live in multi-column environments, for
notes to be placed somewhat flexibly away from their reference point,
and to select elements depending on which page they end up on.

---

In conclusion, it is possible to encode many types of notes in
HTML/CSS. Also, I'm sure that all readers that have made it this far
can point to examples of note styles that cannot replicated.

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

Received on Tuesday, 7 April 2015 14:45:08 UTC