CSS Generated Content for Paged Media Module Level 4

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Generated Content for Paged Media Module Level 4</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version d29f71adb, updated Wed Jul 19 11:08:56 2023 -0700" name="generator"> <link href="https://drafts.csswg.org/css-gcpm-4/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { white-space: pre; display: inline-block; max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: .5em; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; } .dfn-paneled[role="button"] { cursor: pointer; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { white-space: pre; display: inline-block; max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: .5em; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; } .dfn-paneled[role="button"] { cursor: pointer; } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <style type='text/css'></style><body class="h-entry"> <div class="head"> <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> </p> <h1 class="p-name no-ref" id="title">CSS Generated Content for Paged Media Module Level 4</h1> <p id="w3c-state"><a href="https://www.w3.org/standards/types#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2023-07-17">17 July 2023</time></p> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/css-gcpm-4/">https://drafts.csswg.org/css-gcpm-4/</a> <dt>Issue Tracking: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-gcpm-4-4">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="118053"><a class="p-name fn u-email email" href="mailto:mike@bfo.com">Mike Bremford</a> (<span class="p-org org">BFO</span>) <dd class="editor p-author h-card vcard" data-editor-id="13329"><a class="p-name fn u-email email" href="mailto:daniel.glazman@disruptive-innovations.com">Daniel Glazman</a> (<span class="p-org org">Disruptive Innovations</span>) <dt class="editor">Former Editor: <dd class="editor p-author h-card vcard" data-editor-id="65283"><a class="p-name fn u-email email" href="mailto:dauwhe@gmail.com">Dave Cramer</a> (<span class="p-org org">Hachette Livre</span>) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-gcpm-4-4/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"> <details class="annoying-warning" open> <summary>Not Ready For Implementation</summary> <p> This spec is not yet ready for implementation. It exists in this repository to record the ideas and promote discussion. </p> <p> Before attempting to implement this spec, please contact the CSSWG at www-style@w3.org. </p> </details> </div> <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>®</sup> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-software" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. </p> <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> <p>Level 4 of GCPM proposes a region-based approach to footnotes and running heads.</p> <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd"><span class="content">Status of this document</span></h2> <div data-fill-with="status"> <p> 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. </p> <p>Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-gcpm-4” in the title, like this: “[css-gcpm-4] <i>…summary of comment…</i>”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-gcpm-4%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. </p> <p>This document is governed by the <a href="https://www.w3.org/2023/Process-20230612/" id="w3c_process_revision">12 June 2023 W3C Process Document</a>. </p> <p></p> </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#introduction"><span class="secno"></span> <span class="content"> Introduction </span></a> <ol class="toc"> <li><a href="#values"><span class="secno"></span> <span class="content"> Value Definitions</span></a> </ol> <li> <a href="#running-headers-and-footers"><span class="secno">1</span> <span class="content"> Running headers and footers </span></a> <ol class="toc"> <li><a href="#copy-into-heading"><span class="secno">1.1</span> <span class="content">Copying a flow: the <span class="property">copy-into</span> property</span></a> <li> <a href="#flow-persist-heading"><span class="secno">1.2</span> <span class="content">Choosing among multiple values on a page</span></a> <ol class="toc"> <li><a href="#page-selector-pseudo-classes"><span class="secno">1.2.1</span> <span class="content">Page selector pseudo-classes</span></a> </ol> </ol> <li><a href="#page-area-head"><span class="secno">2</span> <span class="content">Creating Page Areas</span></a> <li> <a href="#footnotes"><span class="secno">3</span> <span class="content"> Footnotes </span></a> <ol class="toc"> <li><a href="#footnote-terms"><span class="secno">3.1</span> <span class="content">Terminology</span></a> <li><a href="#footnotes-as-regions"><span class="secno">3.2</span> <span class="content">Footnotes as Regions</span></a> </ol> <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments </span></a> <li> <a href="#w3c-conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> <ol class="toc"> <li><a href="#w3c-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> <li><a href="#w3c-conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> <li> <a href="#w3c-partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> </ol> <li><a href="#w3c-testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a> </ol> <li> <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> <ol class="toc"> <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> </ol> <li> <a href="#references"><span class="secno"></span> <span class="content">References</span></a> <ol class="toc"> <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a> </ol> <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> </ol> </nav> <main> <h2 class="no-num heading settled" id="introduction"><span class="content"> Introduction </span></h2> <p>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. <a data-link-type="biblio" href="#biblio-css3gcpm" title="CSS Generated Content for Paged Media Module">[CSS3GCPM]</a> used float: footnote and position: running(). The now-abandoned <a data-link-type="biblio" href="#biblio-css3gencon" title="CSS Generated Content Module Level 3">[CSS3GENCON]</a> Working Draft used content: footnote. PrinceXML (and older GCPM drafts) has content: flow() and flow: static(). WHATWG CSS Books has flow: area().</p> <p>This module proposes a unified approach to paginated layout based on <a data-link-type="biblio" href="#biblio-css3-regions" title="CSS Regions Module Level 1">[CSS3-REGIONS]</a> and <a data-link-type="biblio" href="#biblio-css3-page-template" title="CSS Pagination Templates Module Level 3">[CSS3-PAGE-TEMPLATE]</a>. Additional properties will be introduced as necessary.</p> <h3 class="heading settled" id="values"><span class="content"> Value Definitions</span></h3> <p>This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. Value types not defined in this specification are defined in CSS Values & Units <span title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</span>. Combination with other CSS modules may expand the definitions of these value types.</p> <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly.</p> <h2 class="heading settled" data-level="1" id="running-headers-and-footers"><span class="secno">1. </span><span class="content"> Running headers and footers </span><a class="self-link" href="#running-headers-and-footers"></a></h2> <a data-link-type="biblio" href="#biblio-css3page" title="CSS Paged Media Module Level 3">[CSS3PAGE]</a> 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. <p><a data-link-type="biblio" href="#biblio-css3gcpm" title="CSS Generated Content for Paged Media Module">[CSS3GCPM]</a> provides for copying the string values of elements into the existing page margin boxes.</p> <p>The existing mechanisms do not cover many use cases.</p> <h3 class="heading settled" data-level="1.1" id="copy-into-heading"><span class="secno">1.1. </span><span class="content">Copying a flow: the <a class="property css" data-link-type="property" href="#propdef-copy-into" id="ref-for-propdef-copy-into">copy-into</a> property</span><a class="self-link" href="#copy-into-heading"></a></h3> <p>Headers often contain document content, and it is desirable to both display that content normally (for example, as an <code>h1</code>) and to use the content in a running head. <a data-link-type="biblio" href="#biblio-css3-regions" title="CSS Regions Module Level 1">[CSS3-REGIONS]</a> allows for an element to be moved to a <span class="css">named flow</span>, but doesn’t allow for using the same content in two ways. The <a class="property css" data-link-type="property" href="#propdef-copy-into" id="ref-for-propdef-copy-into①">copy-into</a> property allows an element to be copied into a content fragment which can then be placed with the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content">content</a> property.</p> <p class="note" role="note">Use cases for running heads can be found in <a data-link-type="biblio" href="#biblio-dpub-latinreq" title="Requirements for Latin Text Layout and Pagination">[dpub-latinreq]</a> https://w3c.github.io/dpub-pagination/#content</p> <table class="def propdef" data-link-for-hint="copy-into"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-copy-into">copy-into</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> [ [ <custom-ident> <content-level>] [<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma">,</a> <custom-ident> <content-level>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus">*</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements and pseudo-elements, but not ::first-line or ::first-letter. <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> <p>The <a class="property css" data-link-type="property" href="#propdef-copy-into" id="ref-for-propdef-copy-into②">copy-into</a> 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.</p> <p><span class="css">content-level</span> expands to the following values:</p> <pre class="prod"><dfn data-dfn-type="dfn" data-noexport id="content-list">content-list<a class="self-link" href="#content-list"></a></dfn> = element <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> content <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> text <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> attr(<identifier>) <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> counter() <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> counters() </pre> <dl> <dt>element <dd>the entire element is copied into the named content fragment <dt>contents <dd>only the element’s contents are copied into the named content fragment. This is the default if <span class="css">content-level</span> is not specified. <dt>text <dd>only the element’s text (including normally collapsed white space) is copied into the named content fragment. </dl> <div class="example" id="example-3cd5e9c7"> <a class="self-link" href="#example-3cd5e9c7"></a> <pre>h1 { copy-into: chapter-title element; font-size: 1.5em; } @page { @top-center { content: chapter-title '.'; font-size: .9em; font-variant: small-caps; } } </pre> </div> <h3 class="heading settled" data-level="1.2" id="flow-persist-heading"><span class="secno">1.2. </span><span class="content">Choosing among multiple values on a page</span><a class="self-link" href="#flow-persist-heading"></a></h3> <h4 class="heading settled" data-level="1.2.1" id="page-selector-pseudo-classes"><span class="secno">1.2.1. </span><span class="content">Page selector pseudo-classes</span><a class="self-link" href="#page-selector-pseudo-classes"></a></h4> <p>By default, the content fragment name would be global, as the named flow is with <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-regions-1/#propdef-flow-into" id="ref-for-propdef-flow-into">flow-into</a>. 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.</p> <dl> <dt><dfn class="css" data-dfn-type="selector" data-export id="selectordef-nth-of-page-n">:nth-of-page(n)<a class="self-link" href="#selectordef-nth-of-page-n"></a></dfn> <dd>The element is the nth matched element on the page. <dt><dfn class="css" data-dfn-type="selector" data-export id="selectordef-first-of-page">:first-of-page<a class="self-link" href="#selectordef-first-of-page"></a></dfn> <dd>Same as :nth-of-page(n), but where n = 1 (it is the first matched element on the page). <dt><dfn class="css" data-dfn-type="selector" data-export id="selectordef-last-of-page">:last-of-page<a class="self-link" href="#selectordef-last-of-page"></a></dfn> <dd>The element is the last matched element on the page. <dt><dfn class="css" data-dfn-type="selector" data-export id="selectordef-start-of-page">:start-of-page<a class="self-link" href="#selectordef-start-of-page"></a></dfn> <dd>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. </dl> <div class="example" id="example-635562dc"> <a class="self-link" href="#example-635562dc"></a> <p>HTML:</p> <pre><h1>The Voyage of the <i>Beagle</i></h1> </pre> <p>CSS:</p> <pre>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; } </pre> <p>The value of the named string “headerP1” will be “Chapter 1”, and the value of the named string “headerP2” will be “Voyage of the <i>Beagle</i>”. headerP2 will include the italic tags around "Beagle", because the <code>content-type</code> defaults to <span class="css">contents</span>, not <span class="css">text</span>. The value of the named string “headerP3” will be “.”. The top-center content will be “Chapter 1: The Voyage of the <i>Horizon</i>.”</p> </div> <div class="example" id="example-d1cfe769"> <a class="self-link" href="#example-d1cfe769"></a> HTML: <pre><section title="Loomings"> </pre> <p>CSS:</p> <pre>section:first-of-page { copy-into: header attr(title) } </pre> <p>The value of the “header” string will be “Loomings”, assuming that section intersected with the page.</p> </div> <div class="example" id="example-426c4f92"> <a class="self-link" href="#example-426c4f92"></a> CSS: <pre>@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 } </pre> <p>The following figures show the first, start, and last assignments of the “heading” string on various pages.</p> <figure> <img alt src="images/using-strings-1.jpg" width="480"> <figcaption>The <code>start</code> value is empty, as the string had not yet been set at the start of the page.</figcaption> </figure> <figure> <img alt src="images/using-strings-2.jpg" width="480"> <figcaption>Since the page starts with an h2, the <code>start</code> value is the value of that head.</figcaption> </figure> <figure> <img alt src="images/using-strings-3.jpg" width="480"> <figcaption>Since there’s not an h2 at the top of this page, the <code>start</code> value is the exit value of the previous page.</figcaption> </figure> </div> <h2 class="heading settled" data-level="2" id="page-area-head"><span class="secno">2. </span><span class="content">Creating Page Areas</span><a class="self-link" href="#page-area-head"></a></h2> <p><a data-link-type="biblio" href="#biblio-css3-page-template" title="CSS Pagination Templates Module Level 3">[CSS3-PAGE-TEMPLATE]</a> 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 <a data-link-type="biblio" href="#biblio-css3page" title="CSS Paged Media Module Level 3">[CSS3PAGE]</a>. These slots can also be used for sidenotes, pull quotes, footnotes, and many other document features.</p> <div class="example" id="example-776d51e1"> <a class="self-link" href="#example-776d51e1"></a> <pre>@page body { @slot center-header { top: 0px; left: 1em; right: 1em; height: 2em; flow-from: header; flow-persist: persist; wrap-flow: clear; } } </pre> </div> <p class="issue" id="issue-de25de6c"><a class="self-link" href="#issue-de25de6c"></a>Is there a need for both @page and @template?</p> <h2 class="heading settled" data-level="3" id="footnotes"><span class="secno">3. </span><span class="content"> Footnotes </span><a class="self-link" href="#footnotes"></a></h2> 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. <h3 class="heading settled" data-level="3.1" id="footnote-terms"><span class="secno">3.1. </span><span class="content">Terminology</span><a class="self-link" href="#footnote-terms"></a></h3> <p>Footnotes are complex objects, so it will be helpful to define some terms before proceeding.</p> <figure> <p><img alt="page with footnotes" src="images/footnote-diagram.001.jpg" width="480"></p> <figcaption>Footnote terminology</figcaption> </figure> <dl> <dt>footnote element <dd>The element containing the content of the footnote, which will be removed from the flow and displayed as a footnote. <dt>footnote marker (also known as footnote number) <dd>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. <dt>footnote body <dd>The footnote marker is placed before the footnote element, and together they represent the footnote body, which will be placed in the footnote area. <dt>footnote call (also known as footnote reference) <dd>A number or symbol, found in the main text, which points to the footnote body. <dt>footnote area <dd>The page area used to display footnotes. <dt>footnote rule (also known as footnote separator) <dd>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. </dl> <h3 class="heading settled" data-level="3.2" id="footnotes-as-regions"><span class="secno">3.2. </span><span class="content">Footnotes as Regions</span><a class="self-link" href="#footnotes-as-regions"></a></h3> <div class="example" id="example-4a4d04f0"> <a class="self-link" href="#example-4a4d04f0"></a> HTML: <pre style="word-wrap: break-word; white-space: pre-wrap;"><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> </pre> <p>CSS:</p> <pre>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; } } </pre> </div> <p class="issue" id="issue-5b376f66"><a class="self-link" href="#issue-5b376f66"></a>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.</p> <p class="issue" id="issue-db66e478"><a class="self-link" href="#issue-db66e478"></a>Would it be possible to specify <code>flow-into: none</code> on <code>span.footnote::after</code>? <a data-link-type="biblio" href="#biblio-css3-regions" title="CSS Regions Module Level 1">[CSS3-REGIONS]</a> forbids the flow-into property on pseudo-elements, but should that be changed?</p> <div class="example" id="example-7e61490d"> <a class="self-link" href="#example-7e61490d"></a> Inline footnote <pre>span.footnote { flow-into: footnote; display: inline; } </pre> </div> <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> Acknowledgments </span><a class="self-link" href="#acknowledgments"></a></h2> <p>Tab Atkins, Jr., Brad Kemper, Håkon Wium Lie, Liam Quin, Peter Sorotokin, Alan Stearns</p> </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"><span class="content"> Conformance</span><a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#w3c-conventions"></a></h3> <p>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. </p> <p>All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a></p> <p>Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: </p> <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> <p>This is an example of an informative example.</p> </div> <p>Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: </p> <p class="note" role="note">Note, this is an informative note.</p> <p>Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code><strong class="advisement"></code>, like this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong></p> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <p>Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative.</p> <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#w3c-conformance-classes"></a></h3> <p>Conformance to this specification is defined for three conformance classes: </p> <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> <p>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. </p> <p>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.) </p> <p>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. </p> <h3 class="no-ref heading settled" id="w3c-partial"><span class="content"> Partial implementations</span><a class="self-link" href="#w3c-partial"></a></h3> <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents <strong>must not</strong> 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 be ignored.</p> <h4 class="heading settled" id="w3c-conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#w3c-conform-future-proofing"></a></h4> <p>To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p> <h3 class="no-ref heading settled" id="w3c-testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#w3c-testing"></a></h3> <p>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. </p> <p>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 Working Group. </p> <p>Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list.</p> <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#content-list">content-list</a><span>, in § 1.1</span> <li><a href="#propdef-copy-into">copy-into</a><span>, in § 1.1</span> <li><a href="#selectordef-first-of-page">:first-of-page</a><span>, in § 1.2.1</span> <li><a href="#selectordef-last-of-page">:last-of-page</a><span>, in § 1.2.1</span> <li><a href="#selectordef-nth-of-page-n">:nth-of-page(n)</a><span>, in § 1.2.1</span> <li><a href="#selectordef-start-of-page">:start-of-page</a><span>, in § 1.2.1</span> </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="68150e76">*</span> <li><span class="dfn-paneled" id="9f9120ff">,</span> <li><span class="dfn-paneled" id="537cf076">?</span> <li><span class="dfn-paneled" id="358fd6ff">css-wide keywords</span> <li><span class="dfn-paneled" id="6ec67710">|</span> </ul> <li> <a data-link-type="biblio">[CSS3-REGIONS]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="6c9c44f7">flow-into</span> </ul> <li> <a data-link-type="biblio">[CSS3GENCON]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="2467179e">content</span> </ul> </ul> <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-css3-regions">[CSS3-REGIONS] <dd>Rossen Atanassov; Alan Stearns. <a href="https://drafts.csswg.org/css-regions/"><cite>CSS Regions Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-regions/">https://drafts.csswg.org/css-regions/</a> <dt id="biblio-css3gencon">[CSS3GENCON] <dd>Elika Etemad; Dave Cramer. <a href="https://drafts.csswg.org/css-content-3/"><cite>CSS Generated Content Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-content-3/">https://drafts.csswg.org/css-content-3/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> </dl> <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css3-page-template">[CSS3-PAGE-TEMPLATE] <dd>Alan Stearns. <a href="https://drafts.csswg.org/css-page-template-1/"><cite>CSS Pagination Templates Module Level 3</cite></a>. Proposal for a CSS module. URL: <a href="https://drafts.csswg.org/css-page-template-1/">https://drafts.csswg.org/css-page-template-1/</a> <dt id="biblio-css3gcpm">[CSS3GCPM] <dd>Dave Cramer. <a href="https://drafts.csswg.org/css-gcpm/"><cite>CSS Generated Content for Paged Media Module</cite></a>. URL: <a href="https://drafts.csswg.org/css-gcpm/">https://drafts.csswg.org/css-gcpm/</a> <dt id="biblio-css3page">[CSS3PAGE] <dd>Elika Etemad; Simon Sapin. <a href="https://drafts.csswg.org/css-page-3/"><cite>CSS Paged Media Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-page-3/">https://drafts.csswg.org/css-page-3/</a> <dt id="biblio-dpub-latinreq">[DPUB-LATINREQ] <dd>Dave Cramer. <a href="https://w3c.github.io/dpub-pagination/"><cite>Requirements for Latin Text Layout and Pagination</cite></a>. URL: <a href="https://w3c.github.io/dpub-pagination/">https://w3c.github.io/dpub-pagination/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-copy-into" id="ref-for-propdef-copy-into③">copy-into</a> <td>none | [ [ <custom-ident> <content-level>] [, <custom-ident> <content-level>]* ]? <td>none <td>all elements and pseudo-elements, but not ::first-line or ::first-letter. <td>no <td>n/a <td>discrete <td>per grammar <td>as specified </table> </div> <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue">Is there a need for both @page and @template? <a class="issue-return" href="#issue-de25de6c" title="Jump to section">↵</a></div> <div class="issue">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. <a class="issue-return" href="#issue-5b376f66" title="Jump to section">↵</a></div> <div class="issue">Would it be possible to specify <code>flow-into: none</code> on <code>span.footnote::after</code>? <a data-link-type="biblio" href="#biblio-css3-regions" title="CSS Regions Module Level 1">[CSS3-REGIONS]</a> forbids the flow-into property on pseudo-elements, but should that be changed? <a class="issue-return" href="#issue-db66e478" title="Jump to section">↵</a></div> </div> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { const dfnsJson = window.dfnsJson || {}; function genDfnPanel({dfnID, url, dfnText, refSections, external}) { return mk.aside({ class: "dfn-panel", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url}, url), mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), ); } function genAllDfnPanels() { for(const panelData of Object.values(window.dfnpanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); } else { const panel = genDfnPanel(panelData); append(document.body, panel); insertDfnPopupAction(dfn, panel) } } } document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); // Add popup behavior to all dfns to show the corresponding dfn-panel. var dfns = queryAll('.dfn-paneled'); for(let dfn of dfns) { ; } document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }) function hideAllDfnPanels() { // Turn off any currently "on" or "activated" panels. queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>hideDfnPanel(el)); } function showDfnPanel(dfnPanel, dfn) { hideAllDfnPanels(); // Only display one at this time. dfn.setAttribute("aria-expanded", "true"); dfnPanel.classList.add("on"); dfnPanel.style.left = "5px"; dfnPanel.style.top = "0px"; const panelRect = dfnPanel.getBoundingClientRect(); const panelWidth = panelRect.right - panelRect.left; if (panelRect.right > document.body.scrollWidth) { // Panel's overflowing the screen. // Just drop it below the dfn and flip it rightward instead. // This still wont' fix things if the screen is *really* wide, // but fixing that's a lot harder without 'anchor()'. dfnPanel.style.top = "1.5em"; dfnPanel.style.left = "auto"; dfnPanel.style.right = "0px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel(dfnPanel, dfn) { if(!dfn) { dfn = document.getElementById(dfnPanel.getAttribute("data-for")); } dfn.setAttribute("aria-expanded", "false") dfnPanel.classList.remove("on"); dfnPanel.classList.remove("activated"); } function toggleDfnPanel(dfnPanel, dfn) { if(dfnPanel.classList.contains("on")) { hideDfnPanel(dfnPanel, dfn); } else { showDfnPanel(dfnPanel, dfn); } } function insertDfnPopupAction(dfn, dfnPanel) { // Find dfn panel const panelWrapper = document.createElement('span'); panelWrapper.appendChild(dfnPanel); panelWrapper.style.position = "relative"; panelWrapper.style.height = "0px"; dfn.insertAdjacentElement("afterend", panelWrapper); dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { showDfnPanel(dfnPanel, dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { pinDfnPanel(dfnPanel); } event.stopPropagation(); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }) } } </script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { const dfnsJson = window.dfnsJson || {}; function genDfnPanel({dfnID, url, dfnText, refSections, external}) { return mk.aside({ class: "dfn-panel", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url}, url), mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), ); } function genAllDfnPanels() { for(const panelData of Object.values(window.dfnpanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); } else { const panel = genDfnPanel(panelData); append(document.body, panel); insertDfnPopupAction(dfn, panel) } } } document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); // Add popup behavior to all dfns to show the corresponding dfn-panel. var dfns = queryAll('.dfn-paneled'); for(let dfn of dfns) { ; } document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }) function hideAllDfnPanels() { // Turn off any currently "on" or "activated" panels. queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>hideDfnPanel(el)); } function showDfnPanel(dfnPanel, dfn) { hideAllDfnPanels(); // Only display one at this time. dfn.setAttribute("aria-expanded", "true"); dfnPanel.classList.add("on"); dfnPanel.style.left = "5px"; dfnPanel.style.top = "0px"; const panelRect = dfnPanel.getBoundingClientRect(); const panelWidth = panelRect.right - panelRect.left; if (panelRect.right > document.body.scrollWidth) { // Panel's overflowing the screen. // Just drop it below the dfn and flip it rightward instead. // This still wont' fix things if the screen is *really* wide, // but fixing that's a lot harder without 'anchor()'. dfnPanel.style.top = "1.5em"; dfnPanel.style.left = "auto"; dfnPanel.style.right = "0px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel(dfnPanel, dfn) { if(!dfn) { dfn = document.getElementById(dfnPanel.getAttribute("data-for")); } dfn.setAttribute("aria-expanded", "false") dfnPanel.classList.remove("on"); dfnPanel.classList.remove("activated"); } function toggleDfnPanel(dfnPanel, dfn) { if(dfnPanel.classList.contains("on")) { hideDfnPanel(dfnPanel, dfn); } else { showDfnPanel(dfnPanel, dfn); } } function insertDfnPopupAction(dfn, dfnPanel) { // Find dfn panel const panelWrapper = document.createElement('span'); panelWrapper.appendChild(dfnPanel); panelWrapper.style.position = "relative"; panelWrapper.style.height = "0px"; dfn.insertAdjacentElement("afterend", panelWrapper); dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { showDfnPanel(dfnPanel, dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { pinDfnPanel(dfnPanel); } event.stopPropagation(); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel(dfnPanel, dfn); event.stopPropagation(); event.preventDefault(); } }) } } </script> <script>/* Boilerplate: script-dfn-panel-json */ window.dfnpanelData = {}; window.dfnpanelData['68150e76'] = {"dfnID": "68150e76", "url": "https://drafts.csswg.org/css-values-4/#mult-zero-plus", "dfnText": "*", "refSections": [{"refs": [{"id": "ref-for-mult-zero-plus"}], "title": "1.1. Copying a flow: the copy-into property"}], "external": true}; window.dfnpanelData['9f9120ff'] = {"dfnID": "9f9120ff", "url": "https://drafts.csswg.org/css-values-4/#comb-comma", "dfnText": ",", "refSections": [{"refs": [{"id": "ref-for-comb-comma"}], "title": "1.1. Copying a flow: the copy-into property"}], "external": true}; window.dfnpanelData['537cf076'] = {"dfnID": "537cf076", "url": "https://drafts.csswg.org/css-values-4/#mult-opt", "dfnText": "?", "refSections": [{"refs": [{"id": "ref-for-mult-opt"}], "title": "1.1. Copying a flow: the copy-into property"}], "external": true}; window.dfnpanelData['358fd6ff'] = {"dfnID": "358fd6ff", "url": "https://drafts.csswg.org/css-values-4/#css-wide-keywords", "dfnText": "css-wide keywords", "refSections": [{"refs": [{"id": "ref-for-css-wide-keywords"}], "title": "\nValue Definitions"}], "external": true}; window.dfnpanelData['6ec67710'] = {"dfnID": "6ec67710", "url": "https://drafts.csswg.org/css-values-4/#comb-one", "dfnText": "|", "refSections": [{"refs": [{"id": "ref-for-comb-one"}, {"id": "ref-for-comb-one\u2460"}, {"id": "ref-for-comb-one\u2461"}, {"id": "ref-for-comb-one\u2462"}, {"id": "ref-for-comb-one\u2463"}, {"id": "ref-for-comb-one\u2464"}], "title": "1.1. Copying a flow: the copy-into property"}], "external": true}; window.dfnpanelData['6c9c44f7'] = {"dfnID": "6c9c44f7", "url": "https://drafts.csswg.org/css-regions-1/#propdef-flow-into", "dfnText": "flow-into", "refSections": [{"refs": [{"id": "ref-for-propdef-flow-into"}], "title": "1.2.1. Page selector pseudo-classes"}], "external": true}; window.dfnpanelData['2467179e'] = {"dfnID": "2467179e", "url": "https://drafts.csswg.org/css-content-3/#propdef-content", "dfnText": "content", "refSections": [{"refs": [{"id": "ref-for-propdef-content"}], "title": "1.1. Copying a flow: the copy-into property"}], "external": true}; window.dfnpanelData['propdef-copy-into'] = {"dfnID": "propdef-copy-into", "url": "#propdef-copy-into", "dfnText": "copy-into", "refSections": [{"refs": [{"id": "ref-for-propdef-copy-into"}, {"id": "ref-for-propdef-copy-into\u2460"}, {"id": "ref-for-propdef-copy-into\u2461"}], "title": "1.1. Copying a flow: the copy-into property"}], "external": false}; </script> <script>/* Boilerplate: script-dom-helper */ function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } } </script><a class='fatal' href='/date/2023-07-21T08:55:41/bikeshed/css-gcpm-4/' id='generator' title='Bikeshed Errors'><svg height='24' viewbox='0 0 100 100' width='24'><g stroke="blue" stroke-width="6" fill="none"><path fill="blue" stroke="none" d="M 5 95 L 5 35 L 50 10 L 50 95"/><path d="M 1 37 L 54 8"/><path fill="blue" stroke="none" d="M 1 40 v -6 l 60 -32 v 6 z" /><circle cx="75" cy="79" r="15" /><circle fill="blue" stroke="none" cx="75" cy="79" r="4" /><path d="M 75 79 L 65 49 L 55 49" /><path d="M 67 55 L 48 69" /></g></svg></a>

CINXE.COM

CSS Generated Content for Paged Media Module Level 4