Footnotes

[bertfrees]

Add a section describing how notes can be positioned at the bottom of pages.

Depends on:

• [ ] https://github.com/snaekobbi/braille-css-spec/issues/8

[bertfrees]

There are a number of alternatives for handling footnotes. The recommended solution seems to be to use the ‘footnote’ value of the ‘float’ property, the ‘@footnote’ area box, the footnote counter and the ‘::footnote-call’ and ‘::footnote-marker’ pseudo-elements as defined in [CSS3GCPM]. For example:

note {
  display: list-item;
  float: footnote;
}
note::footnote-call {
  content: counter(footnote, footnotes)
}
note::footnote-marker {
  content: counter(footnote, footnotes)
}
@page {
  counter-reset: footnote;
  @footnote {
    margin-top: 1;
    max-height: 10;
  }
}
@counter-style footnotes {
  system: symbolic;
  symbols: '*' '†' '‡' '§';
}

The ‘footnote-policy’ property allows specifying how to handle footnotes that fall near the bottom of the page leaving not enough room for the footnote body so that it has to move to the next page. With ‘line’ and ‘block’, a page break is inserted before the note reference. With ‘auto’, the user agent chooses how to render footnotes, and will place the footnote body on a later page than the footnote reference. I would add a few more values to further refine ‘auto’. A note reference could be left on the current page, but allowing only note bodies on the next page(s), and requiring a page break before continuing the normal flow. Another approach would be to just leave the reference on the current page without taking other precautions. (Note: this approach is acceptable when notes are numbered continuously, but if numbering is reset on each page, it would be possible that there is a note reference and a note body with the same number on the same page, but that don't belong together.)

The ‘footnote-display’ property seems less useful.

The approach of [CSS3GCPM] is also used in [PRINCE], except that here the ‘@footnote’ area is called ‘@footnotes’ and the ‘footnote-policy’ values are named differently.

The other existing alternative is to use the ‘move-to’ property, the ‘pending()’ value of the content property, and the ‘::alternate’ pseudo-element as defined in [CSS3GENCON]. For example:

noteref {
  display: inline;
  counter-increment: footnote;
  content: counter(footnote);
}
noteref::alternate {
  content: target-content(attr(idref url));
  display: list-item;
  move-to: footnotes;
}
noteref::alternate::marker {
  content: counter(footnote);
}
note {
  display: none;
}
@page {
  counter-reset: footnote;
  @footnote {
    content: pending(footnotes);
  }
}

Elements and pseudo-elements that are moved using the ‘move-to’ property inherit from their position in the DOM, not from their new position. The DOM is not changed.

This alternative seems a bit more low-level, flexible and wider applicable, but on the other hand it lacks the special treatment that is needed for footnotes, and the explicit "move-to" isn't very intuitive because it's unpredictable where the note will be moved to (could be on the next page). Also, the specification is a bit out of date. According to the latest draft it even appears to be obsolete.

To enable footnotes using the named flow mechanism, notes could be channeled through the "footnote" flow into the ‘@footnotes’ area of the page. Note that the "footnote" flow has no special meaning (it could have any name). This means that, as opposed to the "float: footnote" method (see above), the footnote counter is not implicitely incremented, and the "footnote" flow is not inserted automatically. Also, no ‘::footnote-call’ and ‘::footnote-marker’ pseudo-elements are generated. The note body is styled through the ‘:flow(footnote)’ pseudo-class, the note reference is styled through the element itself.

note {
  flow: normal footnote;
  counter-increment: footnote;
  display: inline;
  content: counter(footnote, footnotes);
}
note:flow(footnote) {
  display: list-item;
  content: content();
}
note:flow(footnote)::marker {
  content: counter(footnote, footnotes);
}
@page {
  counter-reset: footnote;
  @footnotes {
    content: flow(footnote);
  }
}

If the note elements are being referenced with noterefs instead of inserted inline, the example would look like this:

noteref {
  flow: normal footnote;
  counter-increment: footnote;
  display: inline;
  content: counter(footnote, footnotes);
}
noteref:flow(footnote) {
  display: list-item;
  content: target-content(attr(idref url));
}
noteref:flow(footnote)::marker {
  content: counter(footnote, footnotes);
}
note {
  display: none;
}
@page {
  counter-reset: footnote;
}

Possibly, the value ‘footnote’ could get a special meaning, so that ‘footnote-policy’ would work as expected.

The ‘position’ property which is used for positioning elements with respect to the normal flow, is kind of related and could be used here as well, but ‘flow’ sounds more direct.

The ‘flow’ property could possibly get additional values in order to support the "notes layout fallback mechanism".

[bertfrees]

Using the revised named flow model (as proposed in comment https://github.com/snaekobbi/braille-css-spec/issues/8#issuecomment-71455691), the CSS would indeed look quite a bit simpler:

note {
  flow: footnote;
  counter-increment: footnote;
  display: list-item;
}
note::marker {
  content: counter(footnote, footnotes);
}
note::alternate {
  display: inline;
  content: counter(footnote, footnotes);
}
@page {
  counter-reset: footnote;
  @footnotes {
    content: flow(footnote);
  }
}

And if note elements are being referenced with noterefs:

noteref {
  counter-increment: footnote;
  display: inline;
  content: counter(footnote, footnotes);
}
noteref::alternate {
  flow: footnote;
  display: list-item;
  content: target-content(attr(idref url));
}
noteref::alternate::marker {
  content: counter(footnote, footnotes);
}
note {
  display: none;
}
@page {
  ...
}