Title: CSS Generated Content for Paged Media Module Level 4 Status: ED Work Status: Exploring Shortname: css-gcpm-4 Level: 4 Group: csswg ED: https://drafts.csswg.org/css-gcpm-4/ Editor: Mike Bremford, BFO, mike@bfo.com, w3cid 118053 Former Editor: Dave Cramer, Hachette Livre, dauwhe@gmail.com, w3cid 65283 Editor: Daniel Glazman, Disruptive Innovations, daniel.glazman@disruptive-innovations.com, w3cid 13329 Abstract: Level 4 of GCPM proposes a region-based approach to footnotes and running heads. Ignored Terms: Warning: Not Ready
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
Name: copy-into Value: none | [ [ <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. <> < >] [, < > < >]* ]? Initial: none Applies To: all elements and pseudo-elements, but not ::first-line or ::first-letter. Inherited: no Computed value: as specified Animation type: discrete
<> = element | content | text | <> | < >
h1 { copy-into: chapter-title element; font-size: 1.5em; } @page { @top-center { content: chapter-title '.'; font-size: .9em; font-variant: small-caps; } }
<h1>The Voyage of the Beagle</h1>CSS:
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; }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 ''copy-into/contents'', not ''copy-into/text''. The value of the named string “headerP3” will be “.”. The top-center content will be “Chapter 1: The Voyage of the Horizon.”
<section title="Loomings">CSS:
section:first-of-page { copy-into: header attr(title) }The value of the “header” string will be “Loomings”, assuming that section intersected with the page.
@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.
@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?
<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>CSS:
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; }