Level 4 of GCPM proposes a region-based approach to footnotes and running heads.
CSS is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
Please send feedback
by filing issues in GitHub (preferred),
including the spec code “css-gcpm-4” in the title, like this:
“[css-gcpm-4] …summary of comment…”.
All issues and comments are archived.
Alternately, feedback can be sent to the (archived) public mailing list firstname.lastname@example.org.
There have been many proposals for using CSS to move document content, often motivated by the desire for magazine- or book-style layout of footnotes, running heads, pull quotes, sidebars, and so on. [CSS3GCPM] used float: footnote and position: running(). The now-abandoned [CSS3GENCON] Working Draft used content: footnote. PrinceXML (and older GCPM drafts) has content: flow() and flow: static(). WHATWG CSS Books has flow: area().
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the CSS-wide keywords as their property value.
For readability they have not been repeated explicitly.
1. Running headers and footers
[CSS3PAGE] describes the sixteen page margin boxes which can be used for running headers and footers, but does not describe a mechanism for inserting content in those boxes.
[CSS3GCPM] provides for copying the string values of elements into the existing page margin boxes.
The existing mechanisms do not cover many use cases.
Headers often contain document content, and it is desirable to both display that content normally (for example, as an h1) and to use the content in a running head. [CSS3-REGIONS] allows for an element to be moved to a named flow, but doesn’t allow for using the same content in two ways. The copy-into property allows an element to be copied into a content fragment which can then be placed with the content property.
Use cases for running heads can be found in [dpub-latinreq] https://w3c.github.io/dpub-pagination/#content
By default, the content fragment name would be global, as the named flow is with flow-into. But if one of the following pseudo-classes are used on the subject of the selector, then the name is locally scoped to just the page the element is on.
The element is the nth matched element on the page.
Same as :nth-of-page(n), but where n = 1 (it is the first matched element on the page).
The element is the last matched element on the page.
The element is the first matched element on the page, and neither it nor its ancestors have any previous siblings that appear on the page.
The value of the named string “headerP1” will be “Chapter 1”, and the value of the named string “headerP2” will be “Voyage of the Beagle”. headerP2 will include the italic tags around "Beagle", because the content-type defaults to contents, not text. The value of the named string “headerP3” will be “.”. The top-center content will be “Chapter 1: The Voyage of the Horizon.”
The following figures show the first, start, and last assignments of the “heading” string on various pages.
2. Creating Page Areas
[CSS3-PAGE-TEMPLATE] introduces @template and @slot rules. We propose to allow the use of @slot in the @page context, to allow greater flexibility than the page margin boxes in [CSS3PAGE]. These slots can also be used for sidenotes, pull quotes, footnotes, and many other document features.
Ancillary content may be moved to the bottom or side of a page. A footnote is created when such content moves to the bottom of the page, leaving a reference indicator.
Footnotes are complex objects, so it will be helpful to define some terms before proceeding.
The element containing the content of the footnote, which will be removed from the flow and displayed as a footnote.
footnote marker (also known as footnote number)
A number or symbol adjacent to the footnote body, identifying the particular footnote. The footnote marker should use the same number or symbol as the corresponding footnote call, although the marker may contain additional punctuation.
The footnote marker is placed before the footnote element, and together they represent the footnote body, which will be placed in the footnote area.
footnote call (also known as footnote reference)
A number or symbol, found in the main text, which points to the footnote body.
The page area used to display footnotes.
footnote rule (also known as footnote separator)
A horizontal rule is often used to separate the footnote area from the rest of the page. The separator (and the entire footnote area) cannot be rendered on a page with no footnotes.
3.2. Footnotes as Regions
<p>Though the body was erect, the head was thrown back so that the closed eyes were pointed towards the needle of the tell-tale that swung from a beam in the ceiling..<span class="reference"><span class="footnote">The cabin-compass is called the tell-tale, because without going to the compass at the helm, the Captain, while below, can inform himself of the course of the ship.</span></span></p>
Tab Atkins, Jr., Brad Kemper, Håkon Wium Lie, Liam Quin, Peter Sorotokin, Alan Stearns
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes. [RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with class="example",
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with class="note", like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with <strong class="advisement">, like
this: UAs MUST provide an accessible alternative.
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance to this specification
is defined for three conformance classes:
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers must treat as invalid (and ignore
as appropriate) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents must not selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
Implementations of Unstable and Proprietary Features
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS