CSS Generated Content for Paged Media Module Level 4

Introduction

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().

This module proposes a unified approach to paginated layout based on [CSS3-REGIONS] and [CSS3-PAGE-TEMPLATE]. Additional properties will be introduced as necessary.

Value Definitions

This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types.

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

[CSS3GCPM] provides for copying the string values of elements into the existing page margin boxes.

The existing mechanisms do not cover many use cases.

1.1. Copying a flow: the copy-into property

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

The copy-into property contains one or more pairs, each consisting of a custom identifier followed by a content-level keyword describing how to construct the value of the named content fragment.

content-level expands to the following values:

content-list = element | content | text | attr(<identifier>) | counter() | counters()

element

the entire element is copied into the named content fragment

contents

only the element’s contents are copied into the named content fragment. This is the default if content-level is not specified.

text

only the element’s text (including normally collapsed white space) is copied into the named content fragment.

h1 {
  copy-into: chapter-title element;
  font-size: 1.5em;
}

@page {
  @top-center {
    content: chapter-title '.';
    font-size: .9em;
    font-variant: small-caps;
    }
}

1.2. Choosing among multiple values on a page

1.2.1. Page selector pseudo-classes

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.

:nth-of-page(n)

The element is the nth matched element on the page.

:first-of-page

Same as :nth-of-page(n), but where n = 1 (it is the first matched element on the page).

:last-of-page

The element is the last matched element on the page.

:start-of-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.

<h1>The Voyage of the Beagle</h1>

h1::before {
  content: 'Chapter 'counter(chapterNumber);
}
h1:first-of-page {
  copy-into: headerP1 counter(chapter), headerP2;
}
h1::after {
  content: '.' copy-into: headerP3;
}

@top-center {
  content: headerP1 ": " headerP2 headerP3;
}

<section title="Loomings">

section:first-of-page { copy-into: header attr(title) }

CSS:

@page {
   size: 15cm 10cm;
   margin: 1.5cm;

   @top-left {
   content: "first: " heading1;
   }
   @top-center {
   content: "start: " heading2;
   }
    @top-right {
    content: "last: " heading3;
   }
  }

h2:first-of-page { copy-into: heading1 }
h2:start-of-page { copy-into: heading2 }
h2:last-of-page { copy-into: heading3 }

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.

@page body {
  @slot center-header {
    top: 0px;
    left: 1em;
    right: 1em;
    height: 2em;
    flow-from: header;
    flow-persist: persist;
    wrap-flow: clear;
  }
}

Is there a need for both @page and @template?

3. Footnotes

3.1. Terminology

Footnotes are complex objects, so it will be helpful to define some terms before proceeding.

footnote element

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.

footnote body

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.

footnote area

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>

span.footnote {
  flow-into: footnote;
  flow-policy: copy;
  display: block;
}

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

span.reference::before {
  content: counter(footnote);
  font-variant-position: super;
}

@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;
    wrap-flow: clear;
  }
}

The above HTML contains two nested spans for the footnote, as CSS has no mechanism to leave a reference object where something was removed from the flow.

Would it be possible to specify flow-into: none on span.footnote::after? [CSS3-REGIONS] forbids the flow-into property on pseudo-elements, but should that be changed?

span.footnote {
  flow-into: footnote;
  display: inline;
}

Acknowledgments

Tab Atkins, Jr., Brad Kemper, Håkon Wium Lie, Liam Quin, Peter Sorotokin, Alan Stearns