Footnotes as CSS Regions

 The following is a copy of a tiny presentation given at the CSS Working Group F2F meeting in Seoul earlier in May. I've posted this only so that the minutes may link here, helping explain what we were talking about. 

—Dave

---

Having to read footnotes resembles having to go downstairs to answer the door while in the midst of making love.

—Noël Coward

Current Footnote Syntax in GCPM

span.footnote { float: footnote }

@page {
    @footnote {
        float: bottom;
    }
}

footnote::call { content: counter(footnote) }
footnote::marker { content: counter(footnote) }

Issues with Current Approach

1. How to extend to multiple footnote areas?
2. How to handle columns?
3. What if the footnote is itself a block element?
4. It's magic all the way down

Proposal using Regions and Pagination Templates

span.footnote {
  flow-into: footnote;
}

span.footnote::before {
  content: counter(footnote) '. ';
}

@page {
  @slot footnote {
    flow-from: footnote;
    required-flow: footnote;
    position: absolute;
    left: 54pt;
    bottom: 0pt;
    width: 352pt;
    height: auto;
    border-top: .25pt solid black;
    vertical-align: bottom;
  }
}

 The Good News

1. Easily extended for multiple footnote regions and sidenotes
2. Good way to suppress footnote area if there are no footnotes on the page.
3. Doesn’t require float for the footnote element
4. Regions rule!!

The Bad News

1. Change of syntax from existing implementations
2. How do you create footnote reference?
3. How do define constraint that footnote stays on same page as reference?
4. Still requires magic

Running Heads using Regions

h1 {
  flow-into: chapter-title;
  flow-options: static; /* so not "consumed" by flow */
}

@page {
  @top-center {
    flow-from: chapter-title;
    font-size: 10pt;
    font-variant: small-caps;
    letter-spacing: 1pt;
    }
}

@page {
  @top-center {
    content: string(header);
    }
}