W3C home > Mailing lists > Public > www-style@w3.org > October 2013

[css-books] Re: [css3-gcpm] Complex Footnotes

From: Håkon Wium Lie <howcome@opera.com>
Date: Sat, 26 Oct 2013 19:57:22 +0200
Message-ID: <21100.642.265849.619937@gargle.gargle.HOWL>
To: "Cramer\, Dave" <Dave.Cramer@hbgusa.com>
Cc: "liam\@w3.org" <liam@w3.org>, James Clark <jjc@jclark.com>, "www-style\@w3.org" <www-style@w3.org>, Bert Bos <bert@w3.org>
Dave Cramer wrote:

 > >The digital publishing interest group (Member-only) is producing a very
 > >helpful document describing requirements for page layout from the
 > >publishing industry, although I fear it could become rather large.
 > Indeed! I was drafted to lead this effort by Markus and Ivan. We're hoping
 > to have something online soon

An early draft is now available, as announced by Dave:


There are many interesteing cases in there. I've spent some time
trying to style Fig 12 and Fig 13, available from here:


The challenges, compared to simple footnotes, are:

 a) two streams of footnotes, with separate formatting
 b) footnote numbering based on line numbers
 c) inline vs block-level footnotes 


To address a), "named areas" have been added 


Using this, one can define two named areas, each representing a stream of footnotes:

  @page {
    @area fn1, fn2 {
      float: bottom; column-span: all;

The areas will be generated in the order specified, so that fn1 will
be below fn2 (as it goes to the bottom first). The areas would only
appear on pages where they have content and, as floats, their size
would depend on their content and 'max-height' would apply.

One can then float footnote elements into the two named areas:

  .fn1 { float: to(fn1) }
  .fn2 { float: to(fn2) }

In Fig 12, there are no footnote calls. This can be specified with:

  .fn1::call, .fn2::call { content: "" }

(But it's not necessary, as calls for elements floated into named
areas will only be generated when specified.)

To differentiate the two footnote areas, one could e.g. do:

  @page {
    @area fn1 {
      float: bottom; column-span: all;
    @area fn2 {
      float: bottom; column-span: all;
      columns: 2;

Named areas are a generalization of the "footnote" area, which would
still be easier to use for simple footnotes. 


To address b), we first need a line counter:

 .line { counter-increment: 1 }

(which would count elements marked up as lines, and not lines themsleves)

Then number every 5th line:

  .line:nth-of-type(5n)::after { content: leader(space) counter(line) }

And use the line counter to number footnotes:

 .fn1::marker { content: counter(line) }

Here's a sample document which uses this technique:


This is not a complete solution. In Fig 13, some of the footnote markers have two numbers. e.g.:

  40, 41 O my ... uncle

This is similar to having numbered list items like:

  3, 4

It may be that these cases must be hand-coded.


To address c), I think we need a new value on 'display'. CSS 2.0 had
two display values either became block or inline, depending on

  run-in and compact 
    These values create either block or inline boxes, depending on context. 


It seems that neigher 'compact' or 'run-in', as defined in 1998, give
us what we need to do inline footnotes. Perhaps we need something like:

  make the element inline if it takes up less than a line, otherwise
  make it a a block

Or something. 

I believe this display value would be useful outside of footnotes,
too. As such, this is not a footnote-specific issue.



              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Saturday, 26 October 2013 17:58:06 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:51:03 UTC