CINXE.COM

<!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 Paged Media Module Level 3</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 60c422380, updated Thu Feb 20 19:11:22 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-page-3/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="00a4565adc80e6981e7fdefb92480d41c0f5ffea" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <style> #margin-values { border-collapse: collapse; } #margin-values td, #margin-values th { padding: 0.2em; border: thin solid black; } .property-list { border: 1px solid black; padding: .2em; margin-top: 2em; } .property-list td { border: 1px solid black; padding: .1em; } table.page-sizes { border: thin solid; margin-top: 1.5em; } table.page-sizes td { border: thin solid; padding: .5em; } table.page-sizes th { border: thin solid; padding: .5em; background: #ffffaa; } </style> <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); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .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 a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </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-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </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> <body class="h-entry"> <div class="head"> <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> <h1 class="p-name no-ref" id="title">CSS Paged Media Module Level 3</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2023-12-05">5 December 2023</time> <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-page-3/">https://drafts.csswg.org/css-page-3/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-page-3/">https://www.w3.org/TR/css-page-3/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-page-3">CSSWG Issues Repository</a> <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/13">Tracker</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editor: <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple, formerly Mozilla) <dt class="editor">Former Editors: <dd class="editor p-author h-card vcard" data-editor-id="58001"><a class="p-name fn u-url url" href="http://exyr.org/about/">Simon Sapin</a> (Mozilla, formerly Kozea) <dd class="editor p-author h-card vcard">Melinda Grant (HP) <dd class="editor p-author h-card vcard">Håkon Wium Lie (Opera Software) <dd class="editor p-author h-card vcard">Jim Bigelow (Hewlett-Packard) <dd class="editor p-author h-card vcard">Jacob Refstrup (Hewlett-Packard) <dd class="editor p-author h-card vcard">Robert Stevahn (Hewlett-Packard) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-page-3/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <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">Abstract</h2> This CSS module specifies how pages are generated and laid out to hold fragmented content in a paged presentation. It adds functionality for controlling page margins, page size and orientation, and headers and footers, and extends generated content to enable page numbering and running headers / footers. The process of paginating a flow into such generated pages is covered in <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a>. <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. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> 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 <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-page” in the title, like this: “[css-page] …summary of comment…”. 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-page%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </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="#intro">1 Introduction</a> <ol class="toc"> <li><a href="#values">1.1 Value Definitions</a> </ol> <li><a href="#page-terms">2 Page Terminology</a> <li> <a href="#page-model">3 The Page Model</a> <ol class="toc"> <li><a href="#painting">3.1 Page Backgrounds and Painting Order</a> <li><a href="#content-outside-box">3.2 Content outside the page box</a> <li><a href="#progression">3.3 Page Progression</a> </ol> <li> <a href="#page-selector-and-context">4 Page Selectors and the Page Context</a> <ol class="toc"> <li><a href="#at-page-rule">4.1 The @page Rule</a> <li> <a href="#page-selectors">4.2 Page selectors</a> <ol class="toc"> <li><a href="#spread-pseudos">4.2.1 Spread pseudo-classes: :left, :right</a> <li><a href="#first-pseudo">4.2.2 First-page pseudo-class: :first</a> <li><a href="#blank-pseudo">4.2.3 Blank-page pseudo-class: :blank</a> </ol> <li><a href="#syntax-page-selector">4.3 @page rule grammar</a> <li><a href="#cascading-and-page-context">4.4 Cascading in the page context</a> </ol> <li> <a href="#margin-boxes">5 Page-Margin Boxes</a> <ol class="toc"> <li><a href="#margin-at-rules">5.1 At-rules for page-margin boxes</a> <li><a href="#populating-margin-boxes">5.2 Populating page-margin boxes</a> <li> <a href="#margin-dimension">5.3 Computing Page-margin Box Dimensions</a> <ol class="toc"> <li><a href="#margin-box-terms">5.3.1 Page-Margin Box Layout Terminology</a> <li> <a href="#variable-sizing">5.3.2 Page-Margin Box Variable Dimension Computation Rules</a> <ol class="toc"> <li><a href="#variable-auto-margins">5.3.2.1 Margins</a> <li><a href="#variable-auto-sizing">5.3.2.2 Resolving auto widths</a> <li><a href="#variable-minmax">5.3.2.3 Handling min-width and max-width</a> <li><a href="#variable-position">5.3.2.4 Positioning</a> <li><a href="#variable-mapping">5.3.2.5 Boxes on other sides</a> </ol> <li><a href="#fixed-sizing">5.3.3 Page-Margin Box Fixed Dimension Computation Rules</a> </ol> <li><a href="#margin-box-ex">5.4 Page-margin box examples</a> </ol> <li> <a href="#page-properties">6 Page Properties</a> <ol class="toc"> <li><a href="#page-based-counters">6.1 Page-based counters</a> <li><a href="#margin-text-alignment">6.2 Page-margin boxes and default values</a> </ol> <li> <a href="#page-size">7 Page Size</a> <ol class="toc"> <li> <a href="#page-size-prop">7.1 Page size: the size property</a> <ol class="toc"> <li><a href="#page-size-media-query">7.1.1 Media Queries</a> <li><a href="#page-orientation-prop">7.1.2 Rotating The Printed Page: the page-orientation property</a> </ol> <li><a href="#marks">7.2 Crop and Registration Marks: the marks property</a> <li><a href="#bleed">7.3 Bleed Area: the bleed property</a> <li><a href="#renderingpages">7.4 Rendering page boxes that do not fit a page sheet</a> <li><a href="#positioning-page-box">7.5 Positioning the page box on the sheet</a> </ol> <li> <a href="#page-breaks">8 Page Breaks </a> <ol class="toc"> <li><a href="#using-named-pages">8.1 Using named pages: page</a> </ol> <li><a href="#image-properties">9 Image Properties</a> <li> <a href="#properties-list"> Appendix A: Applicable CSS2.1 Properties</a> <ol class="toc"> <li><a href="#page-property-list"> CSS 2.1 Properties that apply within the page context</a> <li><a href="#margin-property-list"> CSS 2.1 properties that apply within the margin contexts</a> </ol> <li><a href="#transfer-possibilities"> Appendix B: Transfer Possibilities</a> <li><a href="#priv-sec"> Privacy and Security Considerations</a> <li><a href="#changes"> Changes</a> <li><a href="#acknowledgements"> Acknowledgements</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li> <a href="#property-index"> Property Index</a> <ol class="toc"> <li><a href="#page-descriptor-table"> @page Descriptors</a> </ol> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> <div class="non-normative"> Paged media (e.g., paper, transparencies, photo album pages, pages displayed on computer screens as printed output simulations) differ from <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-5/#continuous-media" id="ref-for-continuous-media">continuous media</a> in that the content of the document is split into one or more discrete static display surfaces. To handle pages, CSS3 Paged Media describes how: <ul> <li><a href="#page-breaks">page breaks</a> are created and avoided; <li>the page properties such as size, orientation, margins, border, and padding are specified; <li>headers and footers are established within the page margins; and <li>content such as page counters are placed in the headers and footers; </ul> This module defines a <a href="#page-model">page model</a> that specifies how a document is formatted within a rectangular area, called the <a href="#page-box-page-rule">page box</a>, that has finite width and height. Although CSS3 does not specify how user agents transfer page boxes to sheets, it does include certain mechanisms for telling user agents about the intended page sheet <a href="#page-size">size and orientation</a>. In the general case, CSS3 assumes that one page box will be transferred to one surface of similar size. Note: The <a data-link-type="biblio" href="#biblio-css-break-4" title="CSS Fragmentation Module Level 4">[CSS-BREAK-4]</a> specification addresses controls over <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation" id="ref-for-fragmentation">fragmentation</a> (pagination), such as the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before">break-before</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-4/#propdef-break-after" id="ref-for-propdef-break-after">break-after</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-inside" id="ref-for-propdef-break-inside">break-inside</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-4/#propdef-widows" id="ref-for-propdef-widows">widows</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-orphans" id="ref-for-propdef-orphans">orphans</a> properties. </div> <h3 class="heading settled" data-level="1.1" id="values">1.1. Value Definitions<a class="self-link" href="#values"></a></h3> 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 <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. 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 <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. <h2 class="heading settled" data-level="2" id="page-terms">2. Page Terminology<a class="self-link" href="#page-terms"></a></h2> The following terminology and accompanying diagrams help to describe the page model: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-sheet">Page sheet</dfn> <dd> <img alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it" height="148" src="images/PageSheet.png" style="float: right;" width="194"> The page sheet is one surface of the physical medium. The illustration to the right shows a representation of the upper-left corner of a page sheet. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="printable area" id="printable-area">Printable and non-printable areas</dfn> <dd> The non-printable area is the area of a page sheet that a physical device such as a printer is not capable of marking reliably, usually due to the printer’s paper handling mechanism. This value is printer dependent and is usually a small region along each edge of the page sheet. The printable area is the area of page sheet that a printer is capable of marking reliably. The size of the printable area is the size of the page sheet reduced by the size of the non-printable area. A user agent may not know the dimensions of this area for a particular printing device; but when its dimensions are known, user agents may adjust the formatting of the document so that content falls within the printable area. How this adjustment is accomplished is device dependent within the constraints expressed in the sections <a href="#renderingpages">§ 7.4 Rendering page boxes that do not fit a page sheet</a> and <a href="#content-outside-box">§ 3.2 Content outside the page box</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-orientation">Page Orientation</dfn> <dd> The page orientation is defined by comparing the length of the edges of a <a data-link-type="dfn" href="#page-box" id="ref-for-page-box">page box</a>. The page box is a rectangle with two perpendicular edges called the long edge and the short edge. The length of the long edge is always greater than or equal to the length of the short edge. When the page box is square, the two edges are of the same length and either can be used as the long edge with the other being the short edge. This specification defines page orientations of <a class="css" data-link-type="maybe" href="#valdef-page-size-portrait" id="ref-for-valdef-page-size-portrait">portrait</a> and <a class="css" data-link-type="maybe" href="#valdef-page-size-landscape" id="ref-for-valdef-page-size-landscape">landscape</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="portrait|portrait orientation" id="portrait">Portrait Orientation</dfn> <dd> A portrait page’s height is greater than or equal to its width. Horizontal elements are parallel to the short edge and vertical elements to the long edge. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="landscape|landscape orientation" id="landscape">Landscape Orientation</dfn> <dd> A landscape page’s width is greater than or equal to its height. Horizontal elements are parallel to the long edge and vertical elements to the short edge. Note: Note that CSS3 makes no distinction between landscape and reverse-landscape orientations. However, future versions of CSS may do so. UAs should consider, when formatting for duplexed printing, the binding edge, page progression, and ease of reading when choosing between landscape and reverse-landscape renderings. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="duplex-printing">Duplex Printing</dfn> <dd> Duplex printing prints one page box per side of a page sheet and uses both sides of the page sheet. This module provides no ability to specify whether a document is duplex printed, but the concept of left and right pages is based on the assumption that the document is duplex printed, regardless of whether or not it actually is. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="binding-edge">Binding Edge</dfn> <dd> The binding edge is the edge of the page box that is toward the binding if the material is bound. The binding edge often has a larger margin than the opposite edge to provide for the space used by the binding. The binding edge can be any of the four edges. However, page sheets are customarily bound so that the binding edge of page boxes with portrait orientation is vertical. This module provides no method to specify the binding edge. In duplex printing, the binding edge is on opposite sides of the page box for the left and right pages. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="facing-pages">Facing Pages</dfn> <dd> Facing pages are two sequential pages such that when the document is duplex printed they are on separate sheets of paper. Typically, the earlier page will be the back side of one sheet and the later page will be the front side of another. They are usually laid out so that the binding edges of facing pages are vertical and adjacent when the pages are placed in their normal reading orientation. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="left-page">Left Page</dfn> <dd> A page that would be on the left if it is part of a pair of facing pages as typically laid out. Page layouts for documents using a left-to-right page progression have the earlier of the facing pages on the left. Rules specific to the left page can be specified using the <a class="css" data-link-type="maybe" href="#valdef-page-left" id="ref-for-valdef-page-left">:left</a> <a data-link-type="dfn" href="#page-selector" id="ref-for-page-selector">page selector</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="right-page">Right Page</dfn> <dd> A page that would be on the right if it is part of a pair of facing pages as typically laid out. Page layouts for documents using a right-to-left page progression have the earlier of the facing pages on the right. Rules specific to the right page can be specified using the <a class="css" data-link-type="maybe" href="#valdef-page-right" id="ref-for-valdef-page-right">:right</a> <a data-link-type="dfn" href="#page-selector" id="ref-for-page-selector①">page selector</a>. </dl> <h2 class="heading settled" data-level="3" id="page-model">3. The Page Model<a class="self-link" href="#page-model"></a></h2> In the <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-5/#paged-media" id="ref-for-paged-media">paged media</a> formatting model, the document is transferred into one or more page boxes. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-box">page box</dfn> is a specialized CSS box that maps to a rectangular print media surface, such as a page of paper. It is roughly analogous to the <a href="https://www.w3.org/TR/CSS2/visuren.html#viewport">viewport</a>. <img alt height="266" src="images/PageBox.png" style="float: right;" width="267"> As with other CSS <a href="https://www.w3.org/TR/CSS2/box.html">boxes</a>, a page box consists of margin, border, padding, and content areas. The content and margin areas of a page box have special functions: <a class="self-link" href="#issue-16b9253a"></a> In CSS 2.1, both the page box and page area are simple rectangles. Neither is a CSS box with margins, borders, and padding. This CSS box should be distinct from the page box and page area, which would be its margin area and content area, respectively. Naming ideas? <ul> <li> The content area of a page box is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-area">page area</dfn>. The content of the document is flowed into one or more page boxes. The page area acts as a container for all the boxes generated by the root element and its descendants that are laid out within a given page box. The edges of the page area on the first page establish the rectangle that is the initial <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block">containing block</a> of the document. <li> The margin area of a page box is divided into 16 <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-margin-boxes">page-margin boxes</dfn>. Each page-margin box has its own margin, border, padding and content areas. Page-margin boxes are typically used to display running headers and footers. </ul> The properties of a <a data-link-type="dfn" href="#page-box" id="ref-for-page-box①">page box</a> are determined by properties declared within the <a data-link-type="dfn" href="#page-context" id="ref-for-page-context">page context</a>, which is the <a href="https://www.w3.org/TR/CSS2/syndata.html#x14">declaration block</a> of the <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page">@page</a> rule. Similarly the properties of a <a data-link-type="dfn" href="#page-margin-boxes" id="ref-for-page-margin-boxes">page-margin box</a> are determined by properties declared within its <a data-link-type="dfn" href="#margin-context" id="ref-for-margin-context">margin context</a>. Declarations in the page context can affect the page box and/or inherit to the page-margin boxes, but they do not apply to or inherit into the document’s root element or other content. The <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①">containing block</a> of the page box is specified using the <a class="property css" data-link-type="property">size</a> property in the <a data-link-type="dfn" href="#page-context" id="ref-for-page-context①">page context</a>. The width and horizontal margins of the page box are then calculated exactly as for a <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">non-replaced block element in normal flow</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> The height and vertical margins of the page box are calculated analogously (instead of using the block height formulas). In both cases if the values are over-constrained, instead of ignoring any margins, the containing block is resized to coincide with the margin edges of the page box. <h3 class="heading settled" data-level="3.1" id="painting">3.1. Page Backgrounds and Painting Order<a class="self-link" href="#painting"></a></h3> When drawing a page of content, the page layers are painted in the following painting order (bottommost first): <ol> <li>page background <li>document canvas <li>page borders <li>document contents <li>page-margin boxes </ol> In the page model, the page background behaves similar to the root background: its <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-4/#background-painting-area" id="ref-for-background-painting-area">background painting area</a> is the <a data-link-type="dfn" href="#bleed-area" id="ref-for-bleed-area">bleed area</a>, which covers the entire page box, including its margins (regardless of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip" id="ref-for-propdef-background-clip">background-clip</a>). Page backgrounds are anchored within the page box’s padding area by default (and honor <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin" id="ref-for-propdef-background-origin">background-origin</a> if the UA supports <a data-link-type="biblio" href="#biblio-css-backgrounds-3" title="CSS Backgrounds and Borders Module Level 3">[CSS-BACKGROUNDS-3]</a>). However if <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-attachment" id="ref-for-propdef-background-attachment">background-attachment</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-backgrounds-3/#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed">fixed</a> then the image is positioned relative to the page box including its margins (i.e. the <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area" id="ref-for-background-positioning-area">background positioning area</a> is the page’s margin box). The document canvas background is drawn as the page box’s background: by default its <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-4/#background-painting-area" id="ref-for-background-painting-area①">background painting area</a> covers the page box’s border box, and for UAs that support <a data-link-type="biblio" href="#biblio-css-backgrounds-3" title="CSS Backgrounds and Borders Module Level 3">[CSS-BACKGROUNDS-3]</a>, follows the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip" id="ref-for-propdef-background-clip①">background-clip</a> value specified on the root element. It remains, however, positioned with respect to the root element or page area as usual. With respect to the page-margin boxes, the document canvas, page borders, and all of the document contents are treated as a single element with a <code>z-index</code> value of 0 that establishes a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS2/visuren.html#x43" id="ref-for-x43">stacking context</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>: the page-margin boxes never interleave with parts of the document content or between the content and the canvas. They may only paint in front of the document content or behind the document canvas. The page background is always painted underneath everything else. The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-z-index" id="ref-for-propdef-z-index">z-index</a> property applies to page-margin boxes. Since the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position">position</a> property does not apply to page-margin boxes, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-z-index" id="ref-for-propdef-z-index①">z-index</a> always affects page-margin boxes as if they were positioned elements regardless of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position①">position</a> property’s value. Each page-margin boxes always establishes a stacking context. The default painting order, or <a href="https://www.w3.org/TR/CSS2/zindex.html">CSS2.1 Appendix E</a> "tree order", of page-margin boxes with respect to each other is as follows: <ol> <li><a class="css" data-link-type="maybe" href="#at-ruledef-top-left-corner" id="ref-for-at-ruledef-top-left-corner">@top-left-corner</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-top-left" id="ref-for-at-ruledef-top-left">@top-left</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-top-center" id="ref-for-at-ruledef-top-center">@top-center</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-top-right" id="ref-for-at-ruledef-top-right">@top-right</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-top-right-corner" id="ref-for-at-ruledef-top-right-corner">@top-right-corner</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-right-top" id="ref-for-at-ruledef-right-top">@right-top</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-right-middle" id="ref-for-at-ruledef-right-middle">@right-middle</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-right-bottom" id="ref-for-at-ruledef-right-bottom">@right-bottom</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-right-corner" id="ref-for-at-ruledef-bottom-right-corner">@bottom-right-corner</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-right" id="ref-for-at-ruledef-bottom-right">@bottom-right</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-center" id="ref-for-at-ruledef-bottom-center">@bottom-center</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-left" id="ref-for-at-ruledef-bottom-left">@bottom-left</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-left-corner" id="ref-for-at-ruledef-bottom-left-corner">@bottom-left-corner</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-left-bottom" id="ref-for-at-ruledef-left-bottom">@left-bottom</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-left-middle" id="ref-for-at-ruledef-left-middle">@left-middle</a> <li><a class="css" data-link-type="maybe" href="#at-ruledef-left-top" id="ref-for-at-ruledef-left-top">@left-top</a> </ol> Start with <a class="css" data-link-type="maybe" href="#at-ruledef-top-left-corner" id="ref-for-at-ruledef-top-left-corner①">@top-left-corner</a>, then go clockwise. This order is arbitrary but can be overridden with <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-z-index" id="ref-for-propdef-z-index②">z-index</a>. It only has a visible effect when page-margin boxes overlap, which should not happen in most cases. <h3 class="heading settled" data-level="3.2" id="content-outside-box">3.2. Content outside the page box<a class="self-link" href="#content-outside-box"></a></h3> When formatting content in the page model, some content may end up outside the page box. For example, an element whose <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-white-space" id="ref-for-propdef-white-space">white-space</a> property has the value <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-4/#valdef-white-space-pre" id="ref-for-valdef-white-space-pre">pre</a> can generate a box that is wider than the page box. As another example, when boxes are positioned absolutely or relatively, they may end up in "inconvenient" locations. For example, images may be placed on the edge of the page box or 100,000 meters below the page box. A specification for the exact formatting of such elements lies outside the scope of this document. However, it is recommended that authors and user agents observe the following general principles concerning content outside the page box: <ul> <li>Content should be allowed slightly beyond the page box to allow pages to "bleed". <li> User agents SHOULD avoid generating a large number of content-empty pages to honor the positioning of elements (e.g., printing 100 blank pages is probably neither the author’s nor the user’s intent). A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-empty">Content-empty page</dfn> is a page box whose page area contains no printable content other than backgrounds and/or borders. A page box whose page area contains generated content, or content whose visibility is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-visibility-hidden" id="ref-for-valdef-visibility-hidden">hidden</a>, or invisible content such as a zero-width space is not a content-empty page. On the other hand, a page containing only a background and/or borders and/or page-margin box content is a content-empty page. Note, however, that generating a small number of empty page boxes is sometimes necessary to honor the forced-break values for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-page-break-before" id="ref-for-propdef-page-break-before">page-break-before</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before①">break-before</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-page-break-after" id="ref-for-propdef-page-break-after">page-break-after</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-4/#propdef-break-after" id="ref-for-propdef-break-after①">break-after</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> <li> Authors SHOULD NOT position elements in inconvenient locations just to avoid rendering them. Instead: <ul> <li>To suppress box generation entirely, set the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-display" id="ref-for-propdef-display">display</a> property to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-none" id="ref-for-valdef-display-none">none</a>. <li>To make a box invisible, set the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility">visibility</a> property. </ul> <li>This specification does not define how boxes positioned outside the page box are handled. Possibilities include discarding them or creating page boxes for them at the end of the document. </ul> <h3 class="heading settled" data-level="3.3" id="progression">3.3. Page Progression<a class="self-link" href="#progression"></a></h3> CSS distinguishes between left pages and right pages on all documents, whether they are printed duplex or not. Each left page is followed by a right page and vice versa. Left and right pages can be styled differently with the <a href="#left-right-first"><code>:left</code> and <code>:right</code> pseudo-classes</a>. Whether the first page of a document is a left page or a right page depends on the page progression of the document. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-progression">page progression</dfn> is the direction in which the printed pages of a document would be sequenced when laid out side-to-side. For example, English and horizontally-set Japanese typically progress from left to right, whereas Arabic and vertically-set Japanese pages typically progress from right to left. The page progression direction is determined as follows: <ul> <li>If text is laid out in horizontal lines, the <a data-link-type="dfn" href="#page-progression" id="ref-for-page-progression">page progression</a> is the same as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-base-direction" id="ref-for-inline-base-direction">inline base direction</a>. <li>If text is laid out in vertical lines, the <a data-link-type="dfn" href="#page-progression" id="ref-for-page-progression①">page progression</a> is the same as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction">block flow direction</a>. </ul> If the UA supports the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> properties from the CSS 3 Writing Modes Module <a data-link-type="biblio" href="#biblio-css-writing-modes-3" title="CSS Writing Modes Level 3">[CSS-WRITING-MODES-3]</a>, it must <a href="https://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a> the <a data-link-type="dfn" href="#page-progression" id="ref-for-page-progression②">page progression</a> is determined by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#principal-writing-mode" id="ref-for-principal-writing-mode">principal writing mode</a>. In documents with a left-to-right <a data-link-type="dfn" href="#page-progression" id="ref-for-page-progression③">page progression</a> the first page of the document is a right page, and vice versa. To explicitly force a document to begin printing on a left or right page, authors can specify a <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before②">break-before</a> value that that propagates a page break to the root. <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> The UA must suppress the first (empty) page(s) in this case (and the <code>:first</code> pseudo-class matches the first printed page). <div class="example" id="example-0b89bad0"> <a class="self-link" href="#example-0b89bad0"></a> <pre>html { break-before: always } </pre> For an HTML document with a left-to-right page progression, the above style rule will cause the first page of the document to print on a ':left' page <pre>html { break-before: left } </pre> For an HTML document, the above style rule will cause the first page of the document to print on a ':left' page, regardless of the page progression. </div> <h2 class="heading settled" data-level="4" id="page-selector-and-context">4. Page Selectors and the Page Context<a class="self-link" href="#page-selector-and-context"></a></h2> <h3 class="heading settled" data-level="4.1" id="at-page-rule">4.1. The @page Rule<a class="self-link" href="#at-page-rule"></a></h3> Authors can specify various aspects of a page box, such as its dimensions, orientation, and margins, within an <dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-page">@page</dfn> rule. <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page①">@page</a> rules are allowed wherever <a href="https://www.w3.org/TR/CSS2/syndata.html#rule-sets">rule-sets</a> are allowed. An <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page②">@page</a> rule consists of the keyword <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page③">@page</a>, an optional comma-separated list of <a data-link-type="dfn" href="#page-selector" id="ref-for-page-selector②">page selectors</a> and a block of declarations (said to be in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-context">page context</dfn>). An <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page④">@page</a> rule can also contain other at-rules, interleaved between declarations. The current level of this specification only allows <a data-link-type="dfn" href="#margin-at-rule" id="ref-for-margin-at-rule">margin at-rules</a> inside <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑤">@page</a>. <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑥">@page</a> rules without a selector list apply to every page. Other <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑦">@page</a> rules apply to pages that <a data-link-type="dfn" href="#match" id="ref-for-match">match</a> at least one of their selectors. Properties declared within the page context apply to the page box. If an error is encountered during the processing of a declaration block within a page or a margin context, the <a href="https://www.w3.org/TR/CSS2/syndata.html#parsing-errors">Rules for handling parsing errors</a> apply; that is, valid declarations within the block are applied. <h3 class="heading settled" data-level="4.2" id="page-selectors">4.2. Page selectors<a class="self-link" href="#page-selectors"></a></h3> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-selector">page selector</dfn> is made of either a <a data-link-type="dfn" href="#page-type-selector" id="ref-for-page-type-selector">page type selector</a> or a <a data-link-type="dfn" href="#page-pseudo-class" id="ref-for-page-pseudo-class">page pseudo-class</a>, followed by zero or more additional <a data-link-type="dfn" href="#page-pseudo-class" id="ref-for-page-pseudo-class①">page pseudo-classes</a>. No whitespace is allowed between components of a selector. The <a class="production css" data-link-type="type" href="#typedef-page-selector" id="ref-for-typedef-page-selector"><page-selector></a> grammar and examples can be found below. A <a data-link-type="dfn" href="#page-selector" id="ref-for-page-selector③">page selector</a> is said to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="match">match</dfn> a given page if and only if all of its components match the page. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-type-selector">page type selector</dfn> is a case-sensitive <a href="https://www.w3.org/TR/CSS2/syndata.html#value-def-identifier">CSS identifier</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. It <a data-link-type="dfn" href="#match" id="ref-for-match①">matches</a> pages of the <a href="#using-named-pages">named page type</a> generated by the <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page">page</a> property. A page type name of auto (<a href="https://www.w3.org/TR/CSS2/syndata.html#characters">ASCII case-insensitive</a>) does not make the rule invalid, but must never match. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-pseudo-class">page pseudo-class</dfn> is <a href="https://www.w3.org/TR/CSS2/syndata.html#characters">ASCII case-insensitive</a> and has the same syntax as <a href="https://www.w3.org/TR/selectors/#pseudo-classes">pseudo-classes</a> in regular Selectors. <a data-link-type="biblio" href="#biblio-select" title="Selectors Level 3">[SELECT]</a> The various <a data-link-type="dfn" href="#page-pseudo-class" id="ref-for-page-pseudo-class②">page pseudo-classes</a> are defined below. <h4 class="heading settled" data-level="4.2.1" id="spread-pseudos">4.2.1. Spread pseudo-classes: <a class="css" data-link-type="maybe" href="#valdef-page-left" id="ref-for-valdef-page-left①">:left</a>, <a class="css" data-link-type="maybe" href="#valdef-page-right" id="ref-for-valdef-page-right①">:right</a><a class="self-link" href="#spread-pseudos"></a></h4> When printing double-sided documents, left and right pages are often formatted differently. This can be expressed by using the <a class="css" data-link-type="maybe" href="#valdef-page-left" id="ref-for-valdef-page-left②">:left</a> and <a class="css" data-link-type="maybe" href="#valdef-page-right" id="ref-for-valdef-page-right②">:right</a> page pseudo-classes. All pages are automatically classified by user agents as either left pages or right pages, based on <a href="#progression">page progression</a>. The <dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="value" data-export id="valdef-page-left">:left</dfn> and <dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="value" data-export id="valdef-page-right">:right</dfn> pseudo-classes only <a data-link-type="dfn" href="#match" id="ref-for-match②">match</a> <a data-link-type="dfn" href="#left-page" id="ref-for-left-page">left</a> or <a data-link-type="dfn" href="#right-page" id="ref-for-right-page">right pages</a>, respectively. <div class="example" id="example-d233352a"> <a class="self-link" href="#example-d233352a"></a> The following example creates left and right binding edges using these pseudo-classes: <pre>@page :left { margin-left: 3cm; margin-right: 4cm; } @page :right { margin-left: 4cm; margin-right: 3cm; } </pre> </div> If different declarations have been given for left and right pages, the user agent must honor these declarations even if the user agent does not transfer the page boxes to left and right sheets (i.e., a printer that only prints on one side of the medium must nevertheless produce correctly formatted output). <div class="note" role="note"> Note. Adding declarations to the <a class="css" data-link-type="maybe" href="#valdef-page-left" id="ref-for-valdef-page-left③">:left</a> or <a class="css" data-link-type="maybe" href="#valdef-page-right" id="ref-for-valdef-page-right③">:right</a> pseudo-class does not necessarily influence whether the document comes out of the printer double- or single-sided (which is outside the scope of this specification). </div> <h4 class="heading settled" data-level="4.2.2" id="first-pseudo">4.2.2. First-page pseudo-class: <a class="css" data-link-type="maybe" href="#valdef-page-first" id="ref-for-valdef-page-first">:first</a><a class="self-link" href="#first-pseudo"></a></h4> The <dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="value" data-export id="valdef-page-first">:first</dfn> pseudo-class <a data-link-type="dfn" href="#match" id="ref-for-match③">matches</a> the first printed page of a document. <div class="example" id="example-0c64c208"> <a class="self-link" href="#example-0c64c208"></a> <pre>@page { margin: 2cm } /* All margins set to 2cm */ @page :first { margin-top: 10cm /* Top margin on first page 10cm */ } </pre> </div> <h4 class="heading settled" data-level="4.2.3" id="blank-pseudo">4.2.3. Blank-page pseudo-class: <a class="css" data-link-type="maybe" href="#valdef-page-blank" id="ref-for-valdef-page-blank">:blank</a><a class="self-link" href="#blank-pseudo"></a></h4> The <dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="value" data-export id="valdef-page-blank">:blank</dfn> pseudo-class <a data-link-type="dfn" href="#match" id="ref-for-match④">matches</a> <a data-link-type="dfn" href="#content-empty" id="ref-for-content-empty">content-empty pages</a> that appear as a result of <a href="https://www.w3.org/TR/css3-break/#forced-breaks">forced page breaks</a>. <div class="note" role="note"> Only the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-break-4/#valdef-break-before-left" id="ref-for-valdef-break-before-left">left</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-break-4/#valdef-break-before-right" id="ref-for-valdef-break-before-right">right</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-break-4/#valdef-break-before-recto" id="ref-for-valdef-break-before-recto">recto</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-break-4/#valdef-break-before-verso" id="ref-for-valdef-break-before-verso">verso</a> values of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before③">break-before</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-4/#propdef-break-after" id="ref-for-propdef-break-after②">break-after</a> properties can generate pages that match <a class="css" data-link-type="maybe" href="#valdef-page-blank" id="ref-for-valdef-page-blank①">:blank</a>. </div> <div class="example" id="example-63622ae9"> <a class="self-link" href="#example-63622ae9"></a> In this example, forced page break may occur before <code>h1</code> elements. <pre>h1 { break-before: left } @page :blank { @top-center { content: "This page is intentionally left blank" } } </pre> </div> A page matched by <a class="css" data-link-type="maybe" href="#valdef-page-blank" id="ref-for-valdef-page-blank②">:blank</a> can also be matched by other page pseudo-classes. <div class="example" id="example-f6c58f27"> <a class="self-link" href="#example-f6c58f27"></a> If headers have been specified on all right pages, a blank right page will be matched by both <code>:blank</code> and <code>:right</code>. Therefore, margin boxes set on right pages will have to be removed unless they are wanted on blank pages. Here is an example where the top center header is removed from blank pages, while the page number remains: <pre>h1 { break-before: left } @page :blank { @top-center { content: none } } @page :right { @top-center { content: "Preliminary edition" } @bottom-center { content: counter(page) } } </pre> Due to the higher <a data-link-type="dfn" href="#specificity" id="ref-for-specificity">specificity</a> of <code>:blank</code> over <code>:right</code>, the top center header is removed even if <code>content: none</code> comes before <code>content: "Preliminary edition"</code>. </div> <div class="note" role="note"> Note. Future versions of CSS may include other page pseudo-classes. </div> <h3 class="heading settled" data-level="4.3" id="syntax-page-selector">4.3. @page rule grammar<a class="self-link" href="#syntax-page-selector"></a></h3> <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑧">@page</a> rules are <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar">parsed</a> according to the following grammar, plus the additional rules noted below: <pre class="prod">@page = @page <a class="production" data-link-type="type" href="#typedef-page-selector-list" id="ref-for-typedef-page-selector-list"><page-selector-list></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-rule-list" id="ref-for-typedef-declaration-rule-list"><declaration-rule-list></a> } <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-page-selector-list"><a class="production" data-link-type="type" href="#typedef-page-selector-list" id="ref-for-typedef-page-selector-list①"><page-selector-list></a></dfn> = <a class="production" data-link-type="type" href="#typedef-page-selector" id="ref-for-typedef-page-selector①"><page-selector></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-page-selector"><a class="production" data-link-type="type" href="#typedef-page-selector" id="ref-for-typedef-page-selector②"><page-selector></a></dfn> = [ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token"><ident-token></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a class="production" data-link-type="type" href="#typedef-pseudo-page" id="ref-for-typedef-pseudo-page"><pseudo-page></a><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-req" id="ref-for-mult-req">!</a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-pseudo-page"><a class="production" data-link-type="type" href="#typedef-pseudo-page" id="ref-for-typedef-pseudo-page①"><pseudo-page></a></dfn> = ':' [ left <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> right <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> first <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> blank ] /<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus①">*</a> Margin rules <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus②">*</a>/ <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-left-corner">@top-left-corner</dfn> = @top-left-corner { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-left">@top-left</dfn> = @top-left { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-center">@top-center</dfn> = @top-center { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list②"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-right">@top-right</dfn> = @top-right { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list③"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-right-corner">@top-right-corner</dfn> = @top-right-corner { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list④"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-left-corner">@bottom-left-corner</dfn> = @bottom-left-corner { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑤"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-left">@bottom-left</dfn> = @bottom-left { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑥"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-center">@bottom-center</dfn> = @bottom-center { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑦"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-right">@bottom-right</dfn> = @bottom-right { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑧"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-right-corner">@bottom-right-corner</dfn> = @bottom-right-corner { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑨"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-left-top">@left-top</dfn> = @left-top { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①⓪"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-left-middle">@left-middle</dfn> = @left-middle { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①①"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-left-bottom">@left-bottom</dfn> = @left-bottom { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①②"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-right-top">@right-top</dfn> = @right-top { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①③"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-right-middle">@right-middle</dfn> = @right-middle { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①④"><declaration-list></a> }; <dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-right-bottom">@right-bottom</dfn> = @right-bottom { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①⑤"><declaration-list></a> }; </pre> In addition, the following rules apply: <ul> <li data-md> No whitespace is allowed between the productions in <a class="production css" data-link-type="type" href="#typedef-page-selector" id="ref-for-typedef-page-selector③"><page-selector></a> or <a class="production css" data-link-type="type" href="#typedef-pseudo-page" id="ref-for-typedef-pseudo-page②"><pseudo-page></a> (similar to the rule for <a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-compound-selector" id="ref-for-typedef-compound-selector"><compound-selector></a>). <li data-md> The <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑨">@page</a> rule can only contain <a data-link-type="dfn" href="#page-property" id="ref-for-page-property">page properties</a> and <a data-link-type="dfn" href="#margin-at-rule" id="ref-for-margin-at-rule①">margin at-rules</a>. <li data-md> The <a data-link-type="dfn" href="#margin-at-rule" id="ref-for-margin-at-rule②">margin at-rules</a> can only contain <a data-link-type="dfn" href="#page-margin-property" id="ref-for-page-margin-property">page-margin properties</a>. </ul> <div class="example" id="example-691ff5b9"> <a class="self-link" href="#example-691ff5b9"></a> The following are examples of page selectors (declaration block intentionally left blank) <pre>@page { ... } @page :left { ... } @page :right { ... } @page LandscapeTable { ... } @page CompanyLetterHead:first { ... } /* identifier and pseudo page. */ @page:first { ... } @page toc, index { ... } @page :blank:first { ... } </pre> The following are examples of page-margin boxes where the declaration blocks are intentionally left blank. <pre>@page { @top-left { ... /* document name */ } @bottom-center { ... /* page number */} } @page :left { @left-middle { ... /* page number in left margin */ }} @page :right{ @right-middle { ... /* page number in right margins of right pages */}} @page :left { @bottom-left-corner { ... /* left page numbers */ }} @page :right { @bottom-right-corner { ... /* right page numbers */ }} @page :first { @bottom-left-corner { ... /* empty footer on 1st page */ } @bottom-right-corner { ... /* empty footer */ } } </pre> </div> <h3 class="heading settled" data-level="4.4" id="cascading-and-page-context">4.4. Cascading in the page context<a class="self-link" href="#cascading-and-page-context"></a></h3> Declarations in page and margin contexts <a href="https://www.w3.org/TR/CSS2/cascade.html">cascade</a> just like declarations in style rule for elements. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="specificity">specificity</dfn> of a page selector is computed in a manner analogous to the computations defined in the <a href="https://www.w3.org/TR/CSS2/selector.html">Selectors</a> module: <ul> <li> Count the number of page type names (= <var>f</var>) Given the syntax of page selectors, <var>f</var> can only ever be 0 or 1. <li>Count the number of ':first' or ':blank' pseudo-classes (= <var>g</var>) <li>Count the number of ':left' or ':right' pseudo-classes (= <var>h</var>) </ul> Note: Repeated occurrences of the same pseudo-classes are allowed and do increase specificity. Due to storage limitations, implementations may have limitations on the size of <var>f</var>, <var>g</var>, or <var>h</var>. If so, values higher than the limit must be clamped to that limit, and not overflow. Specificities are compared by comparing the three components in order (<var>f</var>, <var>g</var>, <var>h</var>): the specificity with a larger <var>f</var> value is more specific; if the two <var>f</var> values are tied, then the two <var>g</var> values are compared, etc. If all the values are tied, the two specificities are equal. <div class="example" id="example-f7460463"> <a class="self-link" href="#example-f7460463"></a> Some page specificity calculation examples follow: <pre>@page { } /* specificity = (0,0,0) */ @page :left { } /* specificity = (0,0,1) */ @page :first { } /* specificity = (0,1,0) */ @page :blank:left { } /* specificity = (0,1,1) */ @page artsy { } /* specificity = (1,0,0) */ @page artsy:left { } /* specificity = (1,0,1) */ @page artsy:first { } /* specificity = (1,1,0) */ </pre> </div> <div class="example" id="example-66f92469"> <a class="self-link" href="#example-66f92469"></a> Consider the following usage example: <pre>@page :left { margin-left: 4cm; } @page { margin-left: 3cm; } </pre> Due to the higher specificity of the pseudo-class selector, the left margin on left pages will be 4cm and all other pages (the right-facing pages) will have a left margin of 3cm. </div> <div class="example" id="example-8b37b195"> <a class="self-link" href="#example-8b37b195"></a> In this example, the higher specificity of the green rules wins over the red rule. Therefore the first page will have blue text in the top-left page-margin box and green text in the top-right page-margin box, while subsequent pages will have red text in the page-margin boxes. <pre>@page :first { color: green; @top-left { content: "foo"; color: blue; } @top-right { content: "bar"; } } @page { color: red; @top-center { content: "Page " counter(page); } } </pre> </div> <div class="example" id="example-ba05142d"> <a class="self-link" href="#example-ba05142d"></a> Page contexts cascade, so the following stylesheet would style pages with 25 millimeter margins and 14 point type in the page-margin boxes: <pre>@page { margin: 25mm;} @page { font-size: 14pt;} </pre> </div> <h2 class="heading settled" data-level="5" id="margin-boxes">5. Page-Margin Boxes<a class="self-link" href="#margin-boxes"></a></h2> Page-margin boxes are boxes within the page margin that, like pseudo-elements, can contain generated content. Page-margin boxes can be used to create page headers and footers, which are portions of the page set aside for supplementary information such as the page number or document title. <div class="example" id="example-e18d595c"> <a class="self-link" href="#example-e18d595c"></a> Typically, a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="page-header">page header</dfn> is located at the top of the page in documents with a predominately horizontal writing direction and on the side opposite the <a data-link-type="dfn" href="#binding-edge" id="ref-for-binding-edge">binding edge</a> for documents with a predominately vertical writing direction. One possible design of page headers for horizontally written documents uses the <a class="css" data-link-type="maybe" href="#at-ruledef-top-left-corner" id="ref-for-at-ruledef-top-left-corner②">@top-left-corner</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-left" id="ref-for-at-ruledef-top-left①">@top-left</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-center" id="ref-for-at-ruledef-top-center①">@top-center</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-right" id="ref-for-at-ruledef-top-right①">@top-right</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-top-right-corner" id="ref-for-at-ruledef-top-right-corner①">@top-right-corner</a> page-margin boxes. Another design, for vertically written documents, could use the <a class="css" data-link-type="maybe" href="#at-ruledef-right-top" id="ref-for-at-ruledef-right-top①">@right-top</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-right-middle" id="ref-for-at-ruledef-right-middle①">@right-middle</a>, and <a class="css" data-link-type="maybe" href="#at-ruledef-right-bottom" id="ref-for-at-ruledef-right-bottom①">@right-bottom</a> page-margin boxes for <a data-link-type="dfn" href="#right-page" id="ref-for-right-page①">right facing pages</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-left-top" id="ref-for-at-ruledef-left-top①">@left-top</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-left-middle" id="ref-for-at-ruledef-left-middle①">@left-middle</a>, and <a class="css" data-link-type="maybe" href="#at-ruledef-left-bottom" id="ref-for-at-ruledef-left-bottom①">@left-bottom</a> for <a data-link-type="dfn" href="#left-page" id="ref-for-left-page①">left facing pages</a>. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="page-footer">page footer</dfn> is typically at the opposite end of the page from the page header. For example, the design of a horizontally written document with a page header at the top of the page could use the <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-left-corner" id="ref-for-at-ruledef-bottom-left-corner①">@bottom-left-corner</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-left" id="ref-for-at-ruledef-bottom-left①">@bottom-left</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-center" id="ref-for-at-ruledef-bottom-center①">@bottom-center</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-right" id="ref-for-at-ruledef-bottom-right①">@bottom-right</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-right-corner" id="ref-for-at-ruledef-bottom-right-corner①">@bottom-right-corner</a> page-margin boxes as the page footer. The design of a vertically written document could use the page-margin boxes of the binding edge of the page for the page footer. </div> Page-margin boxes are positioned with respect to the page area and are independent of page orientation, for example the top page-margin boxes are above the page area in both portrait and landscape orientation. The various page-margin boxes are defined and illustrated in the diagram below: <table class="data" id="margin-box-def"> <caption>Table 1 Page-Margin Box Definitions</caption> <thead> <tr> <th>Box <th>Description <th>Placement <tbody> <tr id="top-margin-boxes-def"> <th id="top-left-corner-box-def">top-left-corner <td>a fixed-size box defined by the intersection of the top and left margins of the page box <td><img alt="the top left corner box with margin, border, and padding, nested within intersection of the page's top and left margins" height="47" src="images/TopLeftCornerBox.png" width="181"> <tr id="top-left-box-def"> <th>top-left <td>a variable-width box filling the top page margin between the top-left-corner and top-center page-margin boxes <td><img alt="the top left box with margin, border, and padding, nested in the page's top margin next to the top left corner box" height="47" src="images/TopLeftMarginBox.png" width="181"> <tr id="top-center-box-def"> <th>top-center <td>a variable-width box centered horizontally between the page’s left and right border edges and filling the page top margin between the top-left and top-right page-margin boxes <td><img alt="the top center box with margin, border, and padding, centered within the page's top margin" height="47" src="images/TopCenterMarginBox.png" width="181"> <tr id="top-right-box-def"> <th>top-right <td>a variable-width box filling the top page margin between the top-center and top-right-corner page-margin boxes <td><img alt="the top right box with margin, border, and padding, nested within the page's top margin" height="47" src="images/TopRightMarginBox.png" width="181"> <tr> <th id="top-right-corner-box-def">top-right-corner <td>a fixed-size box defined by the intersection of the top and right margins of the page box <td><img alt="the top right corner box with margin, border, and padding, nested within the intersection of the page's top and right margin" height="47" src="images/TopRightCornerMarginBox.png" width="181"> <tr id="left-margin-boxes-def"> <th id="left-top-box-def">left-top <td>a variable-height box filling the left page margin between the top-left-corner and left-middle page-margin boxes <td rowspan="3"><img alt="left-top, left-middle, and left-bottom page-margin boxes in the page box's left margin" height="226" src="images/LeftMarginBoxes.png" width="181"> <tr id="left-middle-box-def"> <th>left-middle <td>a variable-height box centered vertically between the page’s top and bottom border edges and filling the left page margin between the left-top and left-bottom page-margin boxes <tr id="left-bottom-box-def"> <th>left-bottom <td>a variable-height box filling the left page margin between the left-middle and bottom-left-corner page-margin boxes <tr id="right-margin-boxes-def"> <th id="right-top-box-def">right-top <td>a variable-height box filling the right page margin between the top-right-corner and right-middle page-margin boxes <td rowspan="3"><img alt="right-top, right-middle, and right-bottom page-margin boxes in the page box's right margin" height="226" src="images/RightMarginBoxes.png" width="181"> <tr id="right-middle-box-def"> <th>right-middle <td>a variable-height box centered vertically between the page’s top and bottom border edges and filling the right page margin between the right-top and right-bottom page-margin boxes <tr id="right-bottom-box-def"> <th>right-bottom <td>a variable-height box filling the right page margin between the right-middle and bottom-right-corner page-margin boxes <tr id="bottom-margin-boxes-def"> <th id="bottom-left-corner-box-def">bottom-left-corner <td>a fixed-size box defined by the intersection of the bottom and left margins of the page box <td><img alt="bottom left corner box with margin, border, and padding, nested within the page margin at the intersection of the left and bottom page margins" height="48" src="images/BottomLeftCornerBox.png" width="181"> <tr id="bottom-left-box-def"> <th>bottom-left <td>a variable-width box filling the bottom page margin between the bottom-left-corner and bottom-center page-margin boxes <td><img alt="bottom left page-margin box with margin, border, and padding, nested within the page's bottom margin next to the bottom-left-corner box" height="48" src="images/BottomLeftMarginBox.png" width="181"> <tr id="bottom-center-box-def"> <th>bottom-center <td>a variable-width box centered horizontally between the page’s left and right border edges and filling the bottom page margin between the bottom-left and bottom-right page-margin boxes <td style="vertical-align: middle;"><img alt="bottom center box with margin, border, and padding, nested within the page's bottom margin and centered on the page" height="48" src="images/BottomCenterMarginBox.png" width="181"> <tr id="bottom-right-box-def"> <th>bottom-right <td>a variable-width box filling the bottom page margin between the bottom-center and bottom-right-corner page-margin boxes <td><img alt="bottom right page-margin box with margin, border, and padding, nested within the page's bottom margin and next to the bottom-right-corner box" height="48" src="images/BottomRightMarginBox.png" width="181"> <tr id="bottom-right-corner-box-def"> <th>bottom-right-corner <td>a fixed-size box defined by the intersection of the bottom and right margins of the page box <td><img alt="bottom right corner box with margin, border, and padding, nested within the page margin at the intersection of the right and bottom page margins" height="48" src="images/BottomRightCornerBox.png" width="181"> </table> <h3 class="heading settled" data-level="5.1" id="margin-at-rules">5.1. At-rules for page-margin boxes<a class="self-link" href="#margin-at-rules"></a></h3> Page-margin boxes are created by <a data-link-type="dfn" href="#margin-at-rule" id="ref-for-margin-at-rule③">margin at-rules</a> inside the <a href="#page-context" id="ref-for-page-context④">page context</a>. Authors should put these rules after any declarations in the page context as legacy clients may not handle declarations after margin at-rules correctly. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="margin-at-rule">margin at-rule</dfn> is an <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#at-rule" id="ref-for-at-rule">at-rule</a> that identifies the page-margin box (e.g. <a class="css" data-link-type="maybe" href="#at-ruledef-top-left" id="ref-for-at-ruledef-top-left②">@top-left</a>) and a block of descriptors (said to be in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="margin-context">margin context</dfn>). <div class="example" id="example-26a4432a"> <a class="self-link" href="#example-26a4432a"></a> The following style sheet establishes a page header containing the title ("Hamlet") on the left side and the page number, preceded by "Page ", on the right side: <pre>@page { size: 8.5in 11in; margin: 10%; @top-left { content: "Hamlet"; } @top-right { content: "Page " counter(page); } } </pre> </div> <h3 class="heading settled" data-level="5.2" id="populating-margin-boxes">5.2. Populating page-margin boxes<a class="self-link" href="#populating-margin-boxes"></a></h3> As with the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#selectordef-before" id="ref-for-selectordef-before">:before</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#selectordef-after" id="ref-for-selectordef-after">:after</a> pseudo-elements, a specified <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content">content: normal</a> on a page-margin box computes to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-none" id="ref-for-valdef-content-none">none</a>. A page-margin box is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="generated">generated</dfn> if and only if the computed value of its <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 is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-none" id="ref-for-valdef-content-none①">none</a>. Otherwise, no box is generated, as for elements with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/#propdef-display" id="ref-for-propdef-display①">display: none</a>. The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-display" id="ref-for-propdef-display②">display</a> property does not apply to page-margin boxes. <div class="example" id="example-ab340c9c"> <a class="self-link" href="#example-ab340c9c"></a> The following style sheet creates a green box in each corner of the page except the bottom-left corner. <pre>@page { @top-left-corner { content: " "; border: solid green; } @top-right-corner { content: url(foo.png); border: solid green; } @bottom-right-corner { content: counter(page); border: solid green; } @bottom-left-corner { content: normal; border: solid green; } } </pre> </div> <h3 class="heading settled" data-level="5.3" id="margin-dimension">5.3. Computing Page-margin Box Dimensions<a class="self-link" href="#margin-dimension"></a></h3> The width and height of each page-margin box is determined by the rules below. These rules define the equivalent of CSS2.1 Sections 10.3 and 10.6 for page-margin boxes. The rules for applying <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-height" id="ref-for-propdef-min-height">min-height</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-height" id="ref-for-propdef-max-height">max-height</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width">min-width</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-width" id="ref-for-propdef-max-width">max-width</a> <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> do apply to page-margin boxes and may imply a recalculation of the width, height, and/or margins if the dimensions resulting from the specified <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height</a> violate their constraints. If the UA does not support the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-height" id="ref-for-propdef-min-height①">min-height</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width①">min-width</a> properties then it must behave as if <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-height" id="ref-for-propdef-min-height②">min-height</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width②">min-width</a> were always zero. <h4 class="heading settled" data-level="5.3.1" id="margin-box-terms">5.3.1. Page-Margin Box Layout Terminology<a class="self-link" href="#margin-box-terms"></a></h4> In addition to the box model definitions in CSS2.1 <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, and the sizing terms in CSS Sizing <a data-link-type="biblio" href="#biblio-css-sizing-3" title="CSS Box Sizing Module Level 3">[CSS-SIZING-3]</a>, the following terms are defined for use in the subsequent page-margin box calculations: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="available-width">available width</dfn> <dd>The sum of the page’s left border width, left padding, <a data-link-type="dfn" href="#page-box" id="ref-for-page-box②">page area</a> width, right padding, and right border width. In other words, it is the distance between the <a data-link-type="dfn" href="#page-box" id="ref-for-page-box③">page box</a>’s left right border edges. This quantity is used when calculating dimensions of the top and bottom page-margin boxes. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="available-height">available height</dfn> <dd>The sum of the page’s top border width, top padding, <a data-link-type="dfn" href="#page-box" id="ref-for-page-box④">page area</a> height, bottom padding, and bottom border width. In other words, it is the distance between the <a data-link-type="dfn" href="#page-box" id="ref-for-page-box⑤">page box</a>’s top bottom border edges. This quantity is used when calculating dimensions of the left and right page-margin boxes. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="outer-width">outer width</dfn> <dd>The width of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#outer-edge" id="ref-for-outer-edge">outer edge</a>, as defined in <a data-link-type="biblio" href="#biblio-css-box-3" title="CSS Box Model Module Level 3">[CSS-BOX-3]</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="min-content-width">min-content width</dfn> <dd>Whichever of <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-block-size" id="ref-for-min-content-block-size">min-content block size</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-inline-size" id="ref-for-min-content-inline-size">min-content inline size</a> is the physical width. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="max-content-width">max-content width</dfn> <dd>Whichever of <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-block-size" id="ref-for-max-content-block-size">max-content block size</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-inline-size" id="ref-for-max-content-inline-size">max-content inline size</a> is the physical width. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="outer-min-width">outer min width</dfn> <dd>Like the <a data-link-type="dfn" href="#outer-width" id="ref-for-outer-width">outer width</a>, except the <a data-link-type="dfn" href="#min-content-width" id="ref-for-min-content-width">min-content width</a> is used when the computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width①">width</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="outer-max-width">outer max width</dfn> <dd>Like the <a data-link-type="dfn" href="#outer-width" id="ref-for-outer-width①">outer width</a>, except the <a data-link-type="dfn" href="#max-content-width" id="ref-for-max-content-width">max-content width</a> is used when the computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width②">width</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①">auto</a>. </dl> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="containing-block">containing block</dfn> for a page-margin box depends on its location: For a corner page-margin box, it is the rectangle defined by the intersection of the two page margins meeting at that corner. For all other page-margin boxes, the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②">containing block</a> is the rectangle formed by the encapsulating page margin minus the containing blocks of the adjacent corners' page-margin boxes. This means that the size of this containing block is given in one dimension by the used page margin and in the other dimension by the <a data-link-type="dfn" href="#available-width" id="ref-for-available-width">available width</a> (for top and bottom page-margin boxes) or <a data-link-type="dfn" href="#available-height" id="ref-for-available-height">available height</a> (for left and right page-margin boxes). <h4 class="heading settled" data-level="5.3.2" id="variable-sizing">5.3.2. Page-Margin Box Variable Dimension Computation Rules<a class="self-link" href="#variable-sizing"></a></h4> The following rules apply to <a class="css" data-link-type="maybe" href="#at-ruledef-top-left" id="ref-for-at-ruledef-top-left③">@top-left</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-center" id="ref-for-at-ruledef-top-center②">@top-center</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-top-right" id="ref-for-at-ruledef-top-right②">@top-right</a> page-margin boxes, which are referred to as A, B, and C, respectively, in this section. <h5 class="heading settled" data-level="5.3.2.1" id="variable-auto-margins">5.3.2.1. Margins<a class="self-link" href="#variable-auto-margins"></a></h5> If the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a> property of any of the three boxes computes to auto, the used value is zero. <h5 class="heading settled" data-level="5.3.2.2" id="variable-auto-sizing">5.3.2.2. Resolving <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②">auto</a> widths<a class="self-link" href="#variable-auto-sizing"></a></h5> The following algorithm determines the used width of each box. For this purpose, boxes that are not <a data-link-type="dfn" href="#generated" id="ref-for-generated">generated</a> are assumed to have a <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width③">width</a> and an <a data-link-type="dfn" href="#outer-width" id="ref-for-outer-width②">outer width</a> of zero. Note: The high-level goals are (in order of priority) to center the middle box (B) if it is generated, to minimize overflow and overlap, and to distribute space proportionally to the amount of content. If the middle box (B) is not <a data-link-type="dfn" href="#generated" id="ref-for-generated①">generated</a>, distribute the <a data-link-type="dfn" href="#available-width" id="ref-for-available-width①">available width</a> to A and C as follows: <ul> <li> If only one box has 'width: auto', its used width is resolved so that the sum of the <a data-link-type="dfn" href="#outer-width" id="ref-for-outer-width③">outer width</a>s equals <a data-link-type="dfn" href="#available-width" id="ref-for-available-width②">available width</a>. <li id="flex-fit"> <a class="self-link" href="#flex-fit"></a> If A and C both have 'width: auto', distribute the space to each box as follows: <ol> <li>If the sum of the outer <a data-link-type="dfn" href="#max-content-width" id="ref-for-max-content-width①">max-content widths</a> is less than the <a data-link-type="dfn" href="#available-width" id="ref-for-available-width③">available width</a>, call that difference the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="flex-space">flex space</dfn>. Calculate each box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="flex-factor">flex factor</dfn> as proportional to its outer <a data-link-type="dfn" href="#max-content-width" id="ref-for-max-content-width②">max-content width</a>, and set its used outer width to: <code><a data-link-type="dfn" href="#max-content-width" id="ref-for-max-content-width③">max-content width</a> + <a data-link-type="dfn" href="#flex-space" id="ref-for-flex-space">flex space</a> × <a data-link-type="dfn" href="#flex-factor" id="ref-for-flex-factor">flex factor</a> ÷ ∑<a data-link-type="dfn" href="#flex-factor" id="ref-for-flex-factor①">flex factors</a></code> <li>Otherwise if the sum of the outer <a data-link-type="dfn" href="#min-content-width" id="ref-for-min-content-width①">min-content widths</a> is less than the <a data-link-type="dfn" href="#available-width" id="ref-for-available-width④">available width</a>, call that difference the <a data-link-type="dfn" href="#flex-space" id="ref-for-flex-space①">flex space</a> calculate each box’s <a data-link-type="dfn" href="#flex-factor" id="ref-for-flex-factor②">flex factor</a> as proportional to its <a data-link-type="dfn" href="#max-content-width" id="ref-for-max-content-width④">max-content width</a> minus <a data-link-type="dfn" href="#min-content-width" id="ref-for-min-content-width②">min-content width</a>, and set its used outer width to: <code><a data-link-type="dfn" href="#min-content-width" id="ref-for-min-content-width③">min-content width</a> + <a data-link-type="dfn" href="#flex-space" id="ref-for-flex-space②">flex space</a> × <a data-link-type="dfn" href="#flex-factor" id="ref-for-flex-factor③">flex factor</a> ÷ ∑<a data-link-type="dfn" href="#flex-factor" id="ref-for-flex-factor④">flex factors</a></code> <li>Otherwise, calculate its outer size as in the previous case, but set each box’s <a data-link-type="dfn" href="#flex-factor" id="ref-for-flex-factor⑤">flex factor</a> as proportional to its outer <a data-link-type="dfn" href="#min-content-width" id="ref-for-min-content-width④">min-content width</a>. </ol> In each case, both <a data-link-type="dfn" href="#flex-factor" id="ref-for-flex-factor⑥">flex factors</a> are assumed to be 1 if their sum is equal to zero. </ul> If the middle box (B) is <a data-link-type="dfn" href="#generated" id="ref-for-generated②">generated</a>, determine the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto③">auto</a> widths of A, B, and C as follows: <ol> <li> First, resolve any <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto④">auto</a> width of the middle box (B): Assume there are two boxes, B and AC, where each of AC’s dimensions is double the maximum of A and C. (This preserves B’s centering.) Distribute the space to these two boxes (B and the imaginary AC) as described for A and C <a href="#flex-fit">above</a>. <li> Then, resolve any <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑤">auto</a> widths of the side boxes (A and C) by setting that box’s outer width to <code>(<a data-link-type="dfn" href="#available-width" id="ref-for-available-width⑤">available width</a> − used <a data-link-type="dfn" href="#outer-width" id="ref-for-outer-width④">outer width</a>s of B) ÷ 2</code> </ol> <h5 class="heading settled" data-level="5.3.2.3" id="variable-minmax">5.3.2.3. Handling <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width③">min-width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-width" id="ref-for-propdef-max-width①">max-width</a><a class="self-link" href="#variable-minmax"></a></h5> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width④">min-width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-width" id="ref-for-propdef-max-width②">max-width</a> properties <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> apply to page-margin boxes in the variable dimension like on normal elements, except that the three boxes on the same side are considered together. More precisely: <ol> <li> The tentative used widths are calculated (without <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width⑤">min-width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-width" id="ref-for-propdef-max-width③">max-width</a>) following the rules under <a href="#variable-auto-sizing">§ 5.3.2.2 Resolving auto widths</a>. <li> If the tentative used width of any of the three boxes is greater than <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-width" id="ref-for-propdef-max-width④">max-width</a>, the rules above are applied again, but this time using the computed value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-max-width" id="ref-for-propdef-max-width⑤">max-width</a> as the computed value for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width④">width</a>. <li> If the resulting width of any of the three boxes is smaller than <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width⑥">min-width</a>, the rules above are applied again, but this time using the value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-min-width" id="ref-for-propdef-min-width⑦">min-width</a> as the computed value for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑤">width</a>. </ol> <h5 class="heading settled" data-level="5.3.2.4" id="variable-position">5.3.2.4. Positioning<a class="self-link" href="#variable-position"></a></h5> Once the dimensions of the boxes are determined, they are positioned as follows: <ul> <li>The left outer edge of A is flush with the left edge of the containing block <li>The outer area of B is centered in the containing block. <li>The right outer edge of C is flush with the right edge of the containing block. </ul> <h5 class="heading settled" data-level="5.3.2.5" id="variable-mapping">5.3.2.5. Boxes on other sides<a class="self-link" href="#variable-mapping"></a></h5> The used values for <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-left" id="ref-for-at-ruledef-bottom-left②">@bottom-left</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-center" id="ref-for-at-ruledef-bottom-center②">@bottom-center</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-right" id="ref-for-at-ruledef-bottom-right②">@bottom-right</a> page-margin boxes are established by the same rules as for <a class="css" data-link-type="maybe" href="#at-ruledef-top-left" id="ref-for-at-ruledef-top-left④">@top-left</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-center" id="ref-for-at-ruledef-top-center③">@top-center</a>, and <a class="css" data-link-type="maybe" href="#at-ruledef-top-right" id="ref-for-at-ruledef-top-right③">@top-right</a>, respectively. The used values for <a class="css" data-link-type="maybe" href="#at-ruledef-left-top" id="ref-for-at-ruledef-left-top②">@left-top</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-left-middle" id="ref-for-at-ruledef-left-middle②">@left-middle</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-left-bottom" id="ref-for-at-ruledef-left-bottom②">@left-bottom</a> boxes are established by the same rules, with "width" replaced by "height", "left" by "top", "right" by "bottom" and "center" by "middle". The used values for <a class="css" data-link-type="maybe" href="#at-ruledef-right-top" id="ref-for-at-ruledef-right-top②">@right-top</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-right-middle" id="ref-for-at-ruledef-right-middle②">@right-middle</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-right-bottom" id="ref-for-at-ruledef-right-bottom②">@right-bottom</a> page-margin boxes are established by the same rules as for <a class="css" data-link-type="maybe" href="#at-ruledef-left-top" id="ref-for-at-ruledef-left-top③">@left-top</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-left-middle" id="ref-for-at-ruledef-left-middle③">@left-middle</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-left-bottom" id="ref-for-at-ruledef-left-bottom③">@left-bottom</a>, respectively. <h4 class="heading settled" data-level="5.3.3" id="fixed-sizing">5.3.3. Page-Margin Box Fixed Dimension Computation Rules<a class="self-link" href="#fixed-sizing"></a></h4> The rules below are used to calculate the used values of each <a class="css" data-link-type="maybe" href="#at-ruledef-top-left-corner" id="ref-for-at-ruledef-top-left-corner③">@top-left-corner</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-left" id="ref-for-at-ruledef-top-left⑤">@top-left</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-center" id="ref-for-at-ruledef-top-center④">@top-center</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-right" id="ref-for-at-ruledef-top-right④">@top-right</a>, and <a class="css" data-link-type="maybe" href="#at-ruledef-top-right-corner" id="ref-for-at-ruledef-top-right-corner②">@top-right-corner</a> page-margin box’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①">height</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a> properties: <ol> <li> The following constraint must hold among the used values of the margin box’s properties: <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top①">margin-top</a> + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a> + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-top" id="ref-for-propdef-padding-top">padding-top</a> + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height②">height</a> + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-bottom" id="ref-for-propdef-padding-bottom">padding-bottom</a> + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a> + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom①">margin-bottom</a> = top page margin <li> If <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width①">border-top-width</a> + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-top" id="ref-for-propdef-padding-top①">padding-top</a> + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height③">height</a> (if it is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑥">auto</a>) + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding-bottom" id="ref-for-propdef-padding-bottom①">padding-bottom</a> + <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width①">border-bottom-width</a>, plus <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top②">margin-top</a> and/or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom②">margin-bottom</a> if not auto, is larger than the height of the top page margin, then any auto values for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top③">margin-top</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom③">margin-bottom</a> are, for the following rules, treated as zero. <li> If at this point all of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height④">height</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top④">margin-top</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom④">margin-bottom</a> have a computed value other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑦">auto</a>, the values are said to be "over-constrained". In this case, the specified value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top⑤">margin-top</a> is treated as auto. <li> If there is now exactly one value specified as auto, its used value follows from the equality. <li> If <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height⑤">height</a> is set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑧">auto</a>, any other auto values become 0 and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height⑥">height</a> follows from the resulting equality <li> If both <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top⑥">margin-top</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom⑤">margin-bottom</a> are auto, their used values are equal. This vertically centers the page-margin box content within the top page margin. </ol> The same rules apply to the bottom page-margin boxes (bottom-left-corner, bottom-left, bottom-center, bottom-right, and bottom-right-corner), except that in the overconstrained case, the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom⑥">margin-bottom</a> is ignored rather than the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top⑦">margin-top</a>. Analogous rules govern the properties for the left and right page-margin boxes with respect to <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑥">width</a> (top-left-corner, left-top, left-middle, left-bottom, and bottom-left-corner; top-right-corner, right-top, right-middle, right-bottom, bottom-right-corner), with "top" replaced by "left", "bottom" replaced by "right", and "height" replaced by "width". In the overconstrained case for left (right) page-margin boxes, the specified value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-left" id="ref-for-propdef-margin-left①">margin-left</a> (<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin-right" id="ref-for-propdef-margin-right①">margin-right</a>) is ignored. <h3 class="heading settled" data-level="5.4" id="margin-box-ex">5.4. Page-margin box examples<a class="self-link" href="#margin-box-ex"></a></h3> The following is a collection of examples of page-margin box usage. <div class="example" id="example-4c59b2b2"> <a class="self-link" href="#example-4c59b2b2"></a> Here is an example of a page with only a top-left header: <pre>@page { @top-left { content: "Header in Left Cell (top-left)" } } </pre> Because there are no contents defined for the top-center or the top-right page-margin boxes, the extent of the top-left page-margin box is allowed to cross the center of the page box. <img alt="Header Example 1" height="177" src="images/header-ex-1.png" width="737"> </div> <div class="example" id="example-de87cb02"> <a class="self-link" href="#example-de87cb02"></a> The following is an example of a page with a centered header: <pre>@page { @top-center { content: "Header in Center Cell (top-center)" } } </pre> <img alt="Header Example 2" height="177" src="images/header-ex-2.png" width="737"> </div> <div class="example" id="example-7c6898f8"> <a class="self-link" href="#example-7c6898f8"></a> The following is an example of a page with a single header in the top-right page-margin box: <pre>@page { @top-right { content: "Header in Right Cell (top-right)" } } </pre> Because the content of the center cell is empty, the extent of the top-right page-margin box is allowed to cross the center of the page box. <img alt="Header Example 3" height="177" src="images/header-ex-3.png" width="737"> </div> <div class="example" id="example-d8635b6e"> <a class="self-link" href="#example-d8635b6e"></a> The following is an example of a page with a top-center and a top-left header: <pre>@page { @top-left { content: "Left Cell (top-left)" } @top-center { content: "Header in Center Cell (top-center)" } } </pre> <img alt="Header Example 4" height="177" src="images/header-ex-4.png" width="737"> </div> <div class="example" id="example-b1235340"> <a class="self-link" href="#example-b1235340"></a> The following is an example of a page with a top-center and a top-right header: <pre>@page { @top-center { content: "Header in Center Cell (top-center)" } @top-right { content: "Right Cell (top-right)" } } </pre> margin: 10%; <img alt="Header Example 5" height="177" src="images/header-ex-5.png" width="737"> </div> <div class="example" id="example-03fa12f3"> <a class="self-link" href="#example-03fa12f3"></a> The following is an example of a page with top-left and top-right headers: <pre>@page { @top-left { content: "Header in top-left with approx. twice as many words as right cell." } @top-right { content: "Right cell (top-right)" } } </pre> Because there are no center cell contents, the extent of the top-left is allowed to cross the center of the page box. <img alt="Header Example 6" height="177" src="images/header-ex-6.png" width="737"> </div> <h2 class="heading settled" data-level="6" id="page-properties">6. Page Properties<a class="self-link" href="#page-properties"></a></h2> <a href="#properties-list">Appendix A</a> defines the normative list of CSS 2.1 <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <a href="#page-property-list">properties that apply to page boxes</a>. If a conforming user agent supports any of these properties on block boxes, then it must also support that property in the <a data-link-type="dfn" href="#page-context" id="ref-for-page-context②">page context</a>. This specification additionally defines the <a class="property css" data-link-type="property">size</a> property that only applies in the page context. Properties that apply to the page-margin boxes can also be set within the page context: if inheritable or explicitly inherited (with the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a> keyword in the margin context), they will inherit to the page-margin boxes. The same appendix defines the normative list of CSS 2.1 <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <a href="#page-property-list">properties that apply to page-margin boxes</a>. If a conforming user agent supports any of these properties on block boxes, then it must also support that property in the <a data-link-type="dfn" href="#margin-context" id="ref-for-margin-context①">margin context</a>. Other properties defined by <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> do not apply in these contexts. Behavior for properties not included in CSS 2.1 is undefined. Note: The intent of leaving other properties undefined is to allow the gradual addition of appropriate CSS3 properties as they emerge, without having to update this specification with each addition. <a href="https://www.w3.org/TR/CSS2/cascade.html#value-stages">As with elements in the document</a>, both the page context and the margin context have a computed value for every property, even if that property does not apply to the page or page-margin box. The normal rules for CSS properties apply with the following exceptions: <ul> <li> page-margin boxes inherit from the page context. The page context inherits from the root element. However, since the previous revision of CSS Paged Media Level 3 did not specify this point, an implementation that sets inherited properties in the page context to their initial values (as for the root element) is also conformant to CSS Paged Media Level 3. Note that this exception will be removed in Level 4. <li> Values in units of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#em" id="ref-for-em">em</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#ex" id="ref-for-ex">ex</a> are interpreted relative to the font associated with their context. When used on the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a> property in the margin context, they are relative to the font of the page context. When used on the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size①">font-size</a> property in the page context, they are relative to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size②">font-size</a> of the root element. However, since a previous revision of CSS Paged Media Level 3 was ambiguous on this point, an implementation that treats <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#em" id="ref-for-em①">em</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#ex" id="ref-for-ex①">ex</a> on <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size③">font-size</a> as relative to the initial value is also conformant to CSS Paged Media Level 3. Note that this exception will be removed in Level 4. <li> Percentage values on the margin and padding properties are relative to the dimensions of the containing block. For right and left values, percentages are relative to the width of the containing block; for top and bottom values, percentages are relative to the height of the containing block. <li> The used values of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑦">width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height⑦">height</a> have special computation rules for page boxes and page-margin boxes; see <a href="#page-size">Page Size</a> and <a href="#margin-dimension">Computing Page-Margin Box Dimensions</a>. <li> The page background is positioned and painted <a href="#painting">as described above</a>. <li>The rules for counter scoping are modified <a href="#page-based-counters">as described below</a>. <li> As on the '::before' and '::after' pseudo-elements, the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-normal" id="ref-for-valdef-content-normal">normal</a> value of 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 computes to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-none" id="ref-for-valdef-content-none②">none</a> on page-margin boxes. <li> On page-margin boxes, the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a> property behaves <a href="https://www.w3.org/TR/CSS2/tables.html#height-layout">as specified for table cells</a>. It always performs alignment in the vertical dimension, regardless of writing mode. </ul> User agents should establish a default page margin via the user agent stylesheet that includes any non-printable area. Authors should assume that the default page area will not include unprintable regions. <h3 class="heading settled" data-level="6.1" id="page-based-counters">6.1. Page-based counters<a class="self-link" href="#page-based-counters"></a></h3> Counters can be defined and controlled within an <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page①⓪">@page</a> rule, and used as content in page-margin boxes. This is useful for maintaining a page count. A <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-counter-increment" id="ref-for-propdef-counter-increment">counter-increment</a> within either a page or margin context causes the counter to increment with the generation of each page box. If a counter is reset or incremented within the page context, it is in scope for all page-margin boxes and obscures all counters of the same name within the document. If a counter is reset or incremented within a margin context, it is in scope for that page-margin box and obscures any counters of the same name in both the page context and the document. If a counter that has not been reset or incremented within the margin context or the page context is used by counter() or counters() in the margin context, then the resultant value is exactly as if the page-margin box were an element within the document at the start of the page, inside the deepest element in the normal flow that spans the page break. Use of the counter in this way does not affect the calculation of the counter’s value. A counter named page is automatically created and incremented by 1 on every page of the document, unless the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-counter-increment" id="ref-for-propdef-counter-increment①">counter-increment</a> property in the <a data-link-type="dfn" href="#page-context" id="ref-for-page-context③">page context</a> explicitly specifies a different increment for the page counter. The implied page counter is a real counter, and can be directly affected using the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-counter-increment" id="ref-for-propdef-counter-increment②">counter-increment</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-counter-reset" id="ref-for-propdef-counter-reset">counter-reset</a> properties when named explicitly in those properties. It can also be used in the 'counter()' and 'counters()' function forms. <div class="example" id="example-13051aa4"> <a class="self-link" href="#example-13051aa4"></a> The following rules result in the placement of the current page number in the middle of the outside margin of each page. <pre>@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } } </pre> Adding the following rule will make all pages even-numbered. <pre>@page { counter-increment: page 2; } </pre> </div> Additionally, a counter named pages is automatically created by the UA. Its value is always the total number of pages in the document. (In continuous media this is always 1.) The value of pages cannot be manipulated: while <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-counter-reset" id="ref-for-propdef-counter-reset①">counter-reset</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-counter-increment" id="ref-for-propdef-counter-increment③">counter-increment</a> statements that set it are valid, they have no effect. In all other respects, page-associated counters behave as described in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>, <a href="https://www.w3.org/TR/CSS2/generate.html#scope">Nested Counters and Scope</a> and <a href="https://www.w3.org/TR/CSS2/syndata.html#counter">Counters</a>. <h3 class="heading settled" data-level="6.2" id="margin-text-alignment">6.2. Page-margin boxes and default values<a class="self-link" href="#margin-text-alignment"></a></h3> Properties used within page or margin contexts take their initial values from their respective property definitions; however, user agents must behave as though the values in the following table were established by rules in the UA default style sheet. <table class="data" id="margin-values"> <caption>Table 2. Default values for Page-Margin Boxes</caption> <thead> <tr> <th>Page-margin box <th><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> <th><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align①">vertical-align</a> <tbody> <tr> <td><a href="#top-left-corner-box-def">top-left-corner</a> <td>right <td>middle <tr> <td><a href="#top-left-box-def">top-left</a> <td>left <td>middle <tr> <td><a href="#top-center-box-def">top-center</a> <td>center <td>middle <tr> <td><a href="#top-right-box-def">top-right</a> <td>right <td>middle <tr> <td><a href="#top-right-corner-box-def">top-right-corner</a> <td>left <td>middle <tr> <td><a href="#left-top-box-def">left-top</a> <td>center <td>top <tr> <td><a href="#left-middle-box-def">left-middle</a> <td>center <td>middle <tr> <td><a href="#left-bottom-box-def">left-bottom</a> <td>center <td>bottom <tr> <td><a href="#right-top-box-def">right-top</a> <td>center <td>top <tr> <td><a href="#right-middle-box-def">right-middle</a> <td>center <td>middle <tr> <td><a href="#right-bottom-box-def">right-bottom</a> <td>center <td>bottom <tr> <td><a href="#bottom-left-corner-box-def">bottom-left-corner</a> <td>right <td>middle <tr> <td><a href="#bottom-left-box-def">bottom-left</a> <td>left <td>middle <tr> <td><a href="#bottom-center-box-def">bottom-center</a> <td>center <td>middle <tr> <td><a href="#bottom-right-box-def">bottom-right</a> <td>right <td>middle <tr> <td><a href="#bottom-right-corner-box-def">bottom-right-corner</a> <td>left <td>middle </table> <div class="example" id="example-6e92ac02"> <a class="self-link" href="#example-6e92ac02"></a> This example style sheet could be used to create a centered header with the current chapter name: <pre>body {counter-reset: chapter;} div.chapter {counter-increment: chapter;} @page { margin: 10%; @top-center { content: "Chapter" counter(chapter) } } </pre> </div> <h2 class="heading settled" data-level="7" id="page-size">7. Page Size<a class="self-link" href="#page-size"></a></h2> People around the world use many different paper sizes. It is a goal of this specification that web content should be adaptable to a range of different sizes without having to write a specific style sheet for each paper size. However, in some situations it is important that a certain page size achieves a certain style. One way to achieve this goal is to utilize the <a class="property css" data-link-type="property">size</a> property, which indicates that the document should preferentially be displayed on a surface of a certain size; another method is to use Media Queries <a data-link-type="biblio" href="#biblio-mediaq" title="Media Queries Level 4">[MEDIAQ]</a> which allow different style sheets to be applied to different page sizes. <h3 class="heading settled" data-level="7.1" id="page-size-prop">7.1. Page size: the <a class="property css" data-link-type="property">size</a> property<a class="self-link" href="#page-size-prop"></a></h3> <table class="def descdef"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="descriptor" data-export id="descdef-page-size">size</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="#at-ruledef-page" id="ref-for-at-ruledef-page①①">@page</a> <tr> <th>Value: <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value"><length [0,∞]></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> [ <a class="production css" data-link-type="type" href="#typedef-page-size-page-size" id="ref-for-typedef-page-size-page-size"><page-size></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> [ portrait <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> landscape ] ] <tr> <th>Initial: <td>auto <tr> <th>Computed value: <td>specified value, with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value①"><length></a>s made absolute. </table> This property specifies the target size and orientation of the <a data-link-type="dfn" href="#page-box" id="ref-for-page-box⑥">page box</a>’s containing block. In the general case, where one page box is rendered onto one <a data-link-type="dfn" href="#page-sheet" id="ref-for-page-sheet">page sheet</a>, the <a class="property css" data-link-type="property">size</a> property also indicates the size of the destination page sheet. The size of a page box can either be "absolute" (fixed size) or "scalable" (i.e., fitting available sheet sizes). The first three values in the table below can be used to create scalable page boxes. Other values define a fixed-size page box, and thereby indicate the preferred output media size. When possible, output should be rendered on the media size indicated. If the specified size is not available, the rules for <a href="#renderingpages">transposing a page box to a different size</a> apply. If a <a class="property css" data-link-type="property">size</a> property declaration is qualified by a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-size-width" id="ref-for-valdef-anchor-size-width">width</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-size-height" id="ref-for-valdef-anchor-size-height">height</a>, device-width, device-height, aspect-ratio, device-aspect-ratio or orientation media query <a data-link-type="biblio" href="#biblio-mediaq" title="Media Queries Level 4">[MEDIAQ]</a> (or other conditional on the size of the paper), then the declaration must be <a href="https://www.w3.org/TR/CSS2/conform.html#ignore">ignored</a>. Media queries do not honor <a class="property css" data-link-type="property">size</a>: they assume the paper size that would be chosen if no <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page①②">@page</a> rules were specified. <div class="issue" id="issue-59a903e8"> <a class="self-link" href="#issue-59a903e8"></a> It would be useful if media queries could respond at least to sizes specified on an unqualified @page. Another option could be to do like @viewport rules <a data-link-type="biblio" href="#biblio-css-device-adapt" title="CSS Viewport Module Level 1">[CSS-DEVICE-ADAPT]</a>: First apply <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page①③">@page</a> rules (matching which selectors?), using the UA’s default page size for Media Queries and <a href="https://www.w3.org/TR/css3-values/#viewport-relative-lengths">viewport-percentage lengths</a> <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. The resulting page size is the "base page size". The entire set of stylesheets is applied again, this time using the "base page size" for Media Queries and viewport-percentage lengths. </div> <div class="example" id="example-8dd5da73"> <a class="self-link" href="#example-8dd5da73"></a> In the following example <pre>@page { size: 4in 6in; } @media (max-width: 6in) { @page { size: letter; } } </pre> The second <code>size</code> declaration is ignored, i.e. the specified value of the <code>size</code> property is <code>4in 6in</code>. </div> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="@page/size" data-dfn-type="value" data-export id="valdef-page-size-auto">auto</dfn> <dd> The page box will be set to a size and orientation chosen by the UA. In the usual case, the page box size and orientation is chosen to match the target media sheet. <dt><dfn class="dfn-paneled css" data-dfn-for="@page/size" data-dfn-type="value" data-export id="valdef-page-size-landscape">landscape</dfn> <dd> Specifies that the page’s content be printed in landscape orientation. The longer sides of the page box are horizontal. If a <a class="production css" data-link-type="type" href="#typedef-page-size-page-size" id="ref-for-typedef-page-size-page-size①"><page-size></a> is not specified, the size of the page sheet is chosen by the UA. <dt><dfn class="dfn-paneled css" data-dfn-for="@page/size" data-dfn-type="value" data-export id="valdef-page-size-portrait">portrait</dfn> <dd> Specifies that the page’s content be printed in portrait orientation. The shorter sides of the page box are horizontal. If a <a class="production css" data-link-type="type" href="#typedef-page-size-page-size" id="ref-for-typedef-page-size-page-size②"><page-size></a> is not specified, the size of the page sheet is chosen by the UA. <dt><dfn class="dfn-paneled css" data-dfn-for="@page/size" data-dfn-type="value" data-export id="valdef-page-size-length-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value②"><length [0,∞]></a></dfn> <dd> The page box will be set to the given absolute dimension(s). If only one length value is specified, it sets both the width and height of the page box (i.e., the box is a square). If two length values are specified, the first establishes the page box width, and the second the page box height. Values in units of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#em" id="ref-for-em②">em</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#ex" id="ref-for-ex②">ex</a> refer to the page context’s font. Negative lengths are illegal. <dt><dfn class="dfn-paneled css" data-dfn-for="@page/size" data-dfn-type="type" data-export id="typedef-page-size-page-size"><a class="production css" data-link-type="type" href="#typedef-page-size-page-size" id="ref-for-typedef-page-size-page-size③"><page-size></a></dfn> <dd> A page size can be specified using one of the following media names. This is the equivalent of specifying <a class="property css" data-link-type="property">size</a> using length values. The definition of the media names comes from Media Standardized Names <a data-link-type="biblio" href="#biblio-pwgmsn" title="Media Standardized Names.">[PWGMSN]</a>. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-a5">A5</dfn> <dd>Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high. <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-a4">A4</dfn> <dd>Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm high. <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-a3">A3</dfn> <dd>Equivalent to the size of ISO A3 media: 297mm wide and 420mm high. <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-b5">B5</dfn> <dd>Equivalent to the size of ISO B5 media: 176mm wide by 250mm high. <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-b4">B4</dfn> <dd>Equivalent to the size of ISO B4 media: 250mm wide by 353mm high. <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-jis-b5">JIS-B5</dfn> <dd>Equivalent to the size of JIS B5 media: 182mm wide by 257mm high. <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-jis-b4">JIS-B4</dfn> <dd>Equivalent to the size of JIS B4 media: 257mm wide by 364mm high. <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-letter">letter</dfn> <dd>Equivalent to the size of North American letter media: 8.5 inches wide and 11 inches high <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-legal">legal</dfn> <dd>Equivalent to the size of North American legal: 8.5 inches wide by 14 inches high. <dt><dfn class="dfn-paneled css" data-dfn-for="<page-size>" data-dfn-type="value" data-export id="valdef-page-size-ledger">ledger</dfn> <dd>Equivalent to the size of North American ledger: 11 inches wide by 17 inches high. </dl> </dl> The <a class="production css" data-link-type="type" href="#typedef-page-size-page-size" id="ref-for-typedef-page-size-page-size④"><page-size></a> names can be used in conjunction with <a class="css" data-link-type="maybe" href="#valdef-page-size-landscape" id="ref-for-valdef-page-size-landscape①">landscape</a> or <a class="css" data-link-type="maybe" href="#valdef-page-size-portrait" id="ref-for-valdef-page-size-portrait①">portrait</a> to indicate both size and orientation. <div class="example" id="example-3998207e"> <a class="self-link" href="#example-3998207e"></a> <pre>@page { size: A4 landscape; } </pre> The above example sets the width of the page box to be 297mm and the height to be 210mm. The page box in this example should be rendered on a page sheet size of 210 mm by 297 mm. </div> <div class="example" id="example-ed9441bf"> <a class="self-link" href="#example-ed9441bf"></a> In the following example, the outer edges of the page box will align with the page. The percentage value on the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-margin" id="ref-for-propdef-margin">margin</a> property is relative to the page size so if the page sheet dimensions are 210mm x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are no page borders or padding set in the UA default style sheet, the resulting page area is 189mm by 267.3mm (210mm-21mm by 297mm-29.7mm). <pre>@page { size: auto;/* auto is the initial value */ margin: 10%; } </pre> </div> <div class="example" id="example-bd008567"> <a class="self-link" href="#example-bd008567"></a> <pre>@page { size: 8.5in 11in;/* width height */ } </pre> The above example sets the width of the page box to be 8.5 inches and the height to be 11 inches. This indicates that the page sheet size should be 8.5"x11" and the orientation <a class="css" data-link-type="maybe" href="#valdef-page-size-portrait" id="ref-for-valdef-page-size-portrait②">portrait</a>. </div> <h4 class="heading settled" data-level="7.1.1" id="page-size-media-query">7.1.1. Media Queries<a class="self-link" href="#page-size-media-query"></a></h4> This section is informative. By using Media Queries <a data-link-type="biblio" href="#biblio-mediaq" title="Media Queries Level 4">[MEDIAQ]</a>, one style sheet can express different stylistic preferences for different page sizes. Consider this example: <div class="example" id="example-961a4690" style="font-size: 10pt;"> <a class="self-link" href="#example-961a4690"></a> <pre>/* style sheet for "A4" printing */ @media print and (width: 21cm) and (height: 29.7cm) { @page { margin: 3cm; } } /* style sheet for "letter" printing */ @media print and (width: 8.5in) and (height: 11in) { @page { margin: 1in; } } </pre> </div> In the example above, "A4" sheets are given a "3cm" page margin, and "letter" sheets are given a "1in" page margin. <h4 class="heading settled" data-level="7.1.2" id="page-orientation-prop">7.1.2. Rotating The Printed Page: the <a class="property css" data-link-type="property">page-orientation</a> property<a class="self-link" href="#page-orientation-prop"></a></h4> <table class="def descdef"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="descriptor" data-export id="descdef-page-page-orientation">page-orientation</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="#at-ruledef-page" id="ref-for-at-ruledef-page①④">@page</a> <tr> <th>Value: <td class="prod">upright <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> rotate-left <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> rotate-right <tr> <th>Initial: <td>upright <tr> <th>Computed value: <td>as specified </table> High-quality printing implementations can handle pages of varying sizes and orientations, so an author can choose the size of a page according to what’s best for that page’s content. For example, they might use <a class="css" data-link-type="propdesc" href="#descdef-page-size" id="ref-for-descdef-page-size">size: letter portrait;</a> for most pages in a document, but switch to <a class="css" data-link-type="propdesc" href="#descdef-page-size" id="ref-for-descdef-page-size①">size: letter landscape;</a> to lay out a wide information table. However, handling content flowing across pages of differing widths is a relatively complex task, and is not yet solved in many popular printing implementations (notably, web browsers). The page-orientation descriptor is intended to help such implementations, allowing them to lay out pages in a single consistent size, but change the orientation post-layout in the output medium (such as PDF), so that pages which want to be displayed in a different orientation can do so. Its values are defined as: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="page-orientation" data-dfn-type="value" data-export id="valdef-page-orientation-upright">upright</dfn> <dd data-md> No special orientation is applied; the page is laid out and formatted as normal. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="page-orientation" data-dfn-type="value" data-export id="valdef-page-orientation-rotate-left">rotate-left</dfn> <dd data-md> After the page has been laid out, if the output medium supports rotation, this value indicates that the page must be displayed rotated a quarter turn to the left (counter-clockwise) of how it was laid out. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="page-orientation" data-dfn-type="value" data-export id="valdef-page-orientation-rotate-right">rotate-right</dfn> <dd data-md> Same as <a class="css" data-link-type="maybe" href="#valdef-page-orientation-rotate-left" id="ref-for-valdef-page-orientation-rotate-left">rotate-left</a>, except the page must be displayed rotated a quarter turn to the right (clockwise) of how it was laid out. </dl> Note: Margin boxes and other positional things have no special interaction with this property; they’ll be laid out as normal in the unrotated page, then rotated along with everything else. <div class="note" role="note"> This property is intended as a stop-gap for less-capable implementations, allowing them to still print documents with a mix of portrait and landscape orientations before they have the ability to flow content across differently-size pages. It requires some awkward contortions to use, such as specifying that a wide table containing only English actually has a vertical <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a> so it’ll lay out "sideways", but be rotated back to upright for readability in the printed output. There should be no need to use this property in high-quality printing implementations; instead, use <a class="property" data-link-type="propdesc" href="#descdef-page-size" id="ref-for-descdef-page-size②">size</a> to control <a class="css" data-link-type="maybe" href="#valdef-page-size-portrait" id="ref-for-valdef-page-size-portrait③">portrait</a> vs <a class="css" data-link-type="maybe" href="#valdef-page-size-landscape" id="ref-for-valdef-page-size-landscape②">landscape</a> orientation of a page. </div> <h3 class="heading settled" data-level="7.2" id="marks">7.2. Crop and Registration Marks: the <a class="property css" data-link-type="property">marks</a> property<a class="self-link" href="#marks"></a></h3> <table class="def descdef"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="descriptor" data-export id="descdef-page-marks">marks</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="#at-ruledef-page" id="ref-for-at-ruledef-page①⑤">@page</a> <tr> <th>Value: <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> [ crop <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> cross ] <tr> <th>Initial: <td>none <tr> <th>Computed value: <td>as specified </table> This property adds crop and/or registration marks to the document. These are printed outside the page box to facilitate the trimming and alignment of sheets of paper. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="@page/marks" data-dfn-type="value" data-export id="valdef-page-marks-none">none</dfn> <dd> Specifies that neither crop marks nor registration marks should be printed: the area outside the <a data-link-type="dfn" href="#bleed-area" id="ref-for-bleed-area①">bleed area</a> will be completely blank. <dt><dfn class="dfn-paneled css" data-dfn-for="@page/marks" data-dfn-type="value" data-export id="valdef-page-marks-crop">crop</dfn> <dd> Specifies that crop marks should be printed. These are typically short lines outside the page box that are effectively extensions of the page box’s four edges, thereby indicating the precise location of those edges without placing any ink near or within the page box itself. <dt><dfn class="dfn-paneled css" data-dfn-for="@page/marks" data-dfn-type="value" data-export id="valdef-page-marks-cross">cross</dfn> <dd> Specifies that registration marks should be printed. These are typically cross-shaped marks outside each edge of the page box used to align sheets of paper during the printing process. </dl> Note that crop marks and registration marks are only visible if the page box is smaller than the printable area. <div class="example" id="example-dde4e44f"> <a class="self-link" href="#example-dde4e44f"></a> To set crop and cross marks on a document, this code can be used: <pre>@page { marks: crop cross } </pre> </div> <h3 class="heading settled" data-level="7.3" id="bleed">7.3. Bleed Area: the <a class="property css" data-link-type="property">bleed</a> property<a class="self-link" href="#bleed"></a></h3> <table class="def descdef"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="descriptor" data-export id="descdef-page-bleed">bleed</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="#at-ruledef-page" id="ref-for-at-ruledef-page①⑥">@page</a> <tr> <th>Value: <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value③"><length></a> <tr> <th>Initial: <td>auto <tr> <th>Computed value: <td>as specified </table> This property specifies the extent of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="bleed-area">bleed area</dfn> outside the page box; in other words the extent beyond the page box at which the page rendering is clipped. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="@page/bleed" data-dfn-type="value" data-export id="valdef-page-bleed-auto">auto</dfn> <dd> Computes to 6pt if <a class="property css" data-link-type="property">marks</a> has <a class="css" data-link-type="maybe" href="#valdef-page-marks-crop" id="ref-for-valdef-page-marks-crop">crop</a> and to zero otherwise. <dt><dfn class="dfn-paneled css" data-dfn-for="@page/bleed" data-dfn-type="value" data-export id="valdef-page-bleed-length"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value④"><length></a></dfn> <dd> Specifies by how far outward, in each direction, the <a data-link-type="dfn" href="#bleed-area" id="ref-for-bleed-area②">bleed area</a> extends past the <a data-link-type="dfn" href="#page-box" id="ref-for-page-box⑦">page box</a>. Values may be negative, but there may be implementation-specific limits. </dl> <h3 class="heading settled" data-level="7.4" id="renderingpages">7.4. Rendering page boxes that do not fit a page sheet<a class="self-link" href="#renderingpages"></a></h3> If a page box does not match the target page sheet dimensions, the user agent should do one of the following (in order of preference): <ol> <li>Render the page box at the indicated size on a larger page sheet. <li>Rotate the page box 90° if this will make the page box fit the page sheet. <li>Scale the page box to fit the page sheet. (The aspect ratio of the page box should be preserved.) <li>Graphically "slice" the page box onto multiple page sheets. <li>Clip overflowed content (least preferred). </ol> The user agent may wish to consult the user before performing these operations. <h3 class="heading settled" data-level="7.5" id="positioning-page-box">7.5. Positioning the page box on the sheet<a class="self-link" href="#positioning-page-box"></a></h3> When the page box is smaller than the page sheet, the user agent should either: <ul> <li>center the page box on the sheet since this will align double-sided pages and avoid accidental loss of information that is printed near the edge of the sheet; or <li>position the page box in the upper left corner of the page sheet (or another corner, based on the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode②">writing-mode</a> properties of the page box) as this may minimize media consumption. </ul> The user agent may wish to consult the user in this regard. <h2 class="heading settled" data-level="8" id="page-breaks">8. Page Breaks <a class="self-link" href="#page-breaks"></a></h2> The CSS Fragmentation Module <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> module defines how and where CSS boxes can be fragmented, including across page breaks. It defines a few properties that indicate where the user agent may or must break pages, and on what page (left or right) the subsequent content resumes. Each page break ends layout in the current <a data-link-type="dfn" href="#page-box" id="ref-for-page-box⑧">page box</a> and causes remaining pieces of the document tree to be laid out in a new page box. <h3 class="heading settled" data-level="8.1" id="using-named-pages">8.1. Using named pages: <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page①">page</a><a class="self-link" href="#using-named-pages"></a></h3> <table class="def propdef" data-link-for-hint="page"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-page">page</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value"><custom-ident></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>boxes that create <a href="https://www.w3.org/TR/css3-break/#btw-blocks">class A</a> break points <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no (but see prose) <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>specified value <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> The <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page②">page</a> property is used to specify a particular type of page (called a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="named-page">named page</dfn>) on which an element must be displayed. If necessary, a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#forced-break" id="ref-for-forced-break">forced page break</a> is introduced and a new page generated of the specified type. Note: This page can be styled by using the same type name in a <a href="#page-selectors">page selector</a>. Page type names are case-sensitive identifiers. However the auto value, being a CSS keyword, is <a href="https://www.w3.org/TR/CSS2/syndata.html#characters">ASCII case-insensitive</a>. The <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page③">page</a> property does not inherit. However, if the <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page④">page</a> value on an element is auto, then its used value is the value specified on its nearest ancestor with a non-auto value. When specified on the root element, the used value for auto is the empty string. Because a previous version of this specification indicated that the <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page⑤">page</a> property is inherited, an implementation that inherits the <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page⑥">page</a> property and treats auto as always naming the empty string remains conformant to CSS Paged Media Level 3. Note that this exception will be removed in Level 4. Therefore authors should not explicitly specify the auto value on a descendant of an element with a non-auto value, as the resulting behavior will be unpredictable. The <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page⑦">page</a> property works as follows: <ol> <li> First, any auto values are resolved against non-auto ancestors (as specified above). <li> Next, a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="start-page-value">start <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page⑧">page</a> value</dfn> and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="end-page-value">end <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page⑨">page</a> value</dfn> is determined for each box as the value (if any) propagated from its first or last child box (respectively), else the used value on the box itself. A child propagates its own <a data-link-type="dfn" href="#start-page-value" id="ref-for-start-page-value">start</a> or <a data-link-type="dfn" href="#end-page-value" id="ref-for-end-page-value">end page value</a> if and only if the <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page①⓪">page</a> property applies to it. Note: A first or last child box is not always generated by a first or last child element. For example, an element could only have a previous sibling with 'display: none' which does not generate any box. <li> The first printed page’s type is the <a data-link-type="dfn" href="#start-page-value" id="ref-for-start-page-value①">start page value</a> of the root. <li> If for any two boxes meeting at a <a href="https://www.w3.org/TR/css3-break/#btw-blocks">class A</a> break point, the <a data-link-type="dfn" href="#end-page-value" id="ref-for-end-page-value①">end page value</a> of the box preceding the break and <a data-link-type="dfn" href="#start-page-value" id="ref-for-start-page-value②">start page value</a> of the box succeeding the break do not match, then a page break is forced between the two boxes, and content after the break resumes on a page box of the named type. </ol> Note: Essentially, the two <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page①①">page</a> values compared are those from the deepest boxes meeting at the <a href="https://www.w3.org/TR/css3-break/#btw-blocks">class A break point</a>, ignoring any subtrees rooted by boxes to which the <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page①②">page</a> property does not apply. See <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> for additional details on page breaks. <div class="example" id="example-8e43e846"> <a class="self-link" href="#example-8e43e846"></a> In this example, the two tables are rendered on landscape pages (indeed, on the same page, if they fit). The page type "narrow" is used for the after the second table, as the page properties for the table element are no longer in effect: <pre>@page narrow { size: 9cm 18cm } @page rotated { size: landscape } div { page: narrow } table { page: rotated } </pre> with this document: <pre><div> <table>...</table> <table>...</table> This text is rendered on a 'narrow' page </div> </pre> </div> <div class="example" id="example-a4741b18"> <a class="self-link" href="#example-a4741b18"></a> In Japanese documents, sometimes different parts of a single document will have different kihon hanmen. <a data-link-type="biblio" href="#biblio-jlreq" title="Requirements for Japanese Text Layout 日本語組版処理の要件(日本語版)">[JLREQ]</a> The <a class="property css" data-link-type="property" href="#propdef-page" id="ref-for-propdef-page①③">page</a> property, together with <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page①⑦">@page</a> rules specifying different page widths, can accommodate this type of layout: <pre><!DOCTYPE html> <html lang="ja"> <style> html { writing-mode: vertical-rl; line-height: 1.6; } .main { page: main; columns: 2; column-gap: 1rem; } .index { page: index; columns: 3; column-gap: 1rem; } @page { margin: auto; /* center kihon hanmen on page */ width: 40rem; /* 1.6 × 25 lines */ } @page main { height: 61rem; } /* 2 × 30 chars + 1 × gap */ @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */ </style> <section class="main"> ... </section> <section class="index"> ... </section> </html> </pre> </div> <h2 class="heading settled" data-level="9" id="image-properties">9. Image Properties<a class="self-link" href="#image-properties"></a></h2> Note: This section has been moved to <a data-link-type="biblio" href="#biblio-css-images-3" title="CSS Images Module Level 3">[CSS-IMAGES-3]</a>. <h2 class="no-num heading settled" id="properties-list"> Appendix A: Applicable CSS2.1 Properties<a class="self-link" href="#properties-list"></a></h2> <h3 class="no-num heading settled" id="page-property-list"> CSS 2.1 Properties that apply within the page context<a class="self-link" href="#page-property-list"></a></h3> This list defines the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="page property" id="page-property">page properties</dfn>. They are further described in <a href="#page-properties">§ 6 Page Properties</a>. <table class="data"> <tbody> <tr> <td><a href="https://www.w3.org/TR/CSS2/visuren.html#direction">bidi properties</a> <td>direction <tbody> <tr> <td rowspan="6"><a href="https://www.w3.org/TR/CSS2/colors.html#background-properties">background properties</a> <td>background-color <tr> <td>background-image <tr> <td>background-repeat <tr> <td>background-attachment <tr> <td>background-position <tr> <td>background <tbody> <tr> <td rowspan="20"><a href="https://www.w3.org/TR/CSS2/box.html#border-properties">border properties</a> <td>border-top-width <tr> <td>border-right-width <tr> <td>border-bottom-width <tr> <td>border-left-width <tr> <td>border-width <tr> <td>border-top-color <tr> <td>border-right-color <tr> <td>border-bottom-color <tr> <td>border-left-color <tr> <td>border-color <tr> <td>border-top-style <tr> <td>border-right-style <tr> <td>border-bottom-style <tr> <td>border-left-style <tr> <td>border-style <tr> <td>border-top <tr> <td>border-right <tr> <td>border-bottom <tr> <td>border-left <tr> <td>border <tbody> <tr> <td rowspan="2"><a href="https://www.w3.org/TR/CSS2/generate.html#counters">counter properties</a> <td>counter-reset <tr> <td>counter-increment <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/colors.html#propdef-color">color</a> <tbody> <tr> <td rowspan="6"><a href="https://www.w3.org/TR/CSS2/fonts.html">font properties</a> <td>font-family <tr> <td>font-size <tr> <td>font-style <tr> <td>font-variant <tr> <td>font-weight <tr> <td>font <tbody> <tr> <td rowspan="3"><a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property">height</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-heights">properties</a> <td>height <tr> <td>min-height <tr> <td>max-height <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/visudet.html#line-height">line-height</a> <tbody> <tr> <td rowspan="5"><a href="https://www.w3.org/TR/CSS2/box.html#margin-properties">margin properties</a> <td>margin-top <tr> <td>margin-right <tr> <td>margin-bottom <tr> <td>margin-left <tr> <td>margin <tbody> <tr> <td rowspan="4"><a href="https://www.w3.org/TR/CSS2/ui.html#dynamic-outlines">outline properties</a> <td>outline-width <tr> <td>outline-style <tr> <td>outline-color <tr> <td>outline <tbody> <tr> <td rowspan="5"><a href="https://www.w3.org/TR/CSS2/box.html#padding-properties">padding properties</a> <td>padding-top <tr> <td>padding-right <tr> <td>padding-bottom <tr> <td>padding-left <tr> <td>padding <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/generate.html#quotes-specify">quotes</a> <tbody> <tr> <td rowspan="7"><a href="https://www.w3.org/TR/CSS2/text.html">text properties</a> <td>letter-spacing <tr> <td>text-align <tr> <td>text-decoration <tr> <td>text-indent <tr> <td>text-transform <tr> <td>white-space <tr> <td>word-spacing <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/visufx.html#visibility">visibility</a> <tbody> <tr> <td rowspan="3"><a href="https://www.w3.org/TR/CSS2/visudet.html#the-width-property">width</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths">properties</a> <td>width <tr> <td>min-width <tr> <td>max-width </table> <h3 class="no-num heading settled" id="margin-property-list"> CSS 2.1 properties that apply within the margin contexts<a class="self-link" href="#margin-property-list"></a></h3> This list defines the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="page-margin property" id="page-margin-property">page-margin properties</dfn>. They are further described in <a href="#page-properties">§ 6 Page Properties</a>. <table class="data"> <tbody> <tr> <td rowspan="2"><a href="https://www.w3.org/TR/CSS2/visuren.html#direction">bidi properties</a> <td>direction <tr> <td>unicode-bidi <tbody> <tr> <td rowspan="6"><a href="https://www.w3.org/TR/CSS2/colors.html#background-properties">background properties</a> <td>background-color <tr> <td>background-image <tr> <td>background-repeat <tr> <td>background-attachment <tr> <td>background-position <tr> <td>background <tbody> <tr> <td rowspan="20"><a href="https://www.w3.org/TR/CSS2/box.html#border-properties">border properties</a> <td>border-top-width <tr> <td>border-right-width <tr> <td>border-bottom-width <tr> <td>border-left-width <tr> <td>border-width <tr> <td>border-top-color <tr> <td>border-right-color <tr> <td>border-bottom-color <tr> <td>border-left-color <tr> <td>border-color <tr> <td>border-top-style <tr> <td>border-right-style <tr> <td>border-bottom-style <tr> <td>border-left-style <tr> <td>border-style <tr> <td>border-top <tr> <td>border-right <tr> <td>border-bottom <tr> <td>border-left <tr> <td>border <tbody> <tr> <td rowspan="2"><a href="https://www.w3.org/TR/CSS2/generate.html#counters">counter properties</a> <td>counter-reset <tr> <td>counter-increment <tbody> <tr> <td colspan="2">content <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/colors.html#propdef-color">color</a> <tbody> <tr> <td rowspan="6"><a href="https://www.w3.org/TR/CSS2/fonts.html">font properties</a> <td>font-family <tr> <td>font-size <tr> <td>font-style <tr> <td>font-variant <tr> <td>font-weight <tr> <td>font <tbody> <tr> <td rowspan="3"><a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property">height</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-heights">properties</a> <td>height <tr> <td>min-height <tr> <td>max-height <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/visudet.html#line-height">line-height</a> <tbody> <tr> <td rowspan="5"><a href="https://www.w3.org/TR/CSS2/box.html#margin-properties">margin properties</a> <td>margin-top <tr> <td>margin-right <tr> <td>margin-bottom <tr> <td>margin-left <tr> <td>margin <tbody> <tr> <td rowspan="4"><a href="https://www.w3.org/TR/CSS2/ui.html#dynamic-outlines">outline properties</a> <td>outline-width <tr> <td>outline-style <tr> <td>outline-color <tr> <td>outline <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/visufx.html#overflow">overflow</a> <tbody> <tr> <td rowspan="5"><a href="https://www.w3.org/TR/CSS2/box.html#padding-properties">padding properties</a> <td>padding-top <tr> <td>padding-right <tr> <td>padding-bottom <tr> <td>padding-left <tr> <td>padding <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/generate.html#quotes-specify">quotes</a> <tbody> <tr> <td rowspan="7"><a href="https://www.w3.org/TR/CSS2/text.html">text properties</a> <td>letter-spacing <tr> <td>text-align <tr> <td>text-decoration <tr> <td>text-indent <tr> <td>text-transform <tr> <td>white-space <tr> <td>word-spacing <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/visudet.html#line-height">vertical-align</a> <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/visufx.html#visibility">visibility</a> <tbody> <tr> <td rowspan="3"><a href="https://www.w3.org/TR/CSS2/visudet.html#the-width-property">width</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths">properties</a> <td>width <tr> <td>min-width <tr> <td>max-width <tbody> <tr> <td colspan="2"><a href="https://www.w3.org/TR/CSS2/visuren.html#z-index">z-index</a> </table> <h2 class="no-num heading settled" id="transfer-possibilities"> Appendix B: Transfer Possibilities<a class="self-link" href="#transfer-possibilities"></a></h2> Often, but not always, the page box has a one-to-one correspondence to the physical surface onto which the document is ultimately rendered. The CSS3 page model specifies formatting within the page box, but it is the user agent’s responsibility to transfer the page box to the sheet. Some user agent transfer possibilities that are not addressed by CSS3 include: <ul id="complex-usecases"> <li>Transferring one page box to one sheet (e.g. single-sided printing); <li>Transferring two page boxes to the front and back surfaces of the same sheet (e.g. double-sided printing); <li>Transferring N (small) page boxes to one sheet (called "N-up"); <li>Transferring one (large) page box to N x M sheets (called "tiling"); <li>Creating signatures. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="signature">signature</dfn> is a group of pages printed on a sheet, which, when folded and trimmed like a book, appear in their proper sequence; <li>Printing one document to multiple output trays; <li>Generating files containing print instructions. </ul> <h2 class="no-num heading settled" id="priv-sec"> Privacy and Security Considerations<a class="self-link" href="#priv-sec"></a></h2> This specification introduces no new privacy or security considerations. <h2 class="no-num heading settled" id="changes"> Changes<a class="self-link" href="#changes"></a></h2> Changes since the <a href="https://www.w3.org/TR/2018/WD-css-page-3-20181018/">18 October 2018 Working Draft</a> are: <ul> <li>Added <a class="property css" data-link-type="property">page-orientation</a> descriptor. </ul> Changes since the <a href="https://www.w3.org/TR/2013/WD-css3-page-20130314/">14 March 2013 Working Draft</a> are: <ul> <li>Imported the <a class="property css" data-link-type="property">marks</a> and <a class="property css" data-link-type="property">bleed</a> properties from <a data-link-type="biblio" href="#biblio-css3gcpm" title="CSS Generated Content for Paged Media Module">[CSS3GCPM]</a>. <li>Added <a class="css" data-link-type="maybe" href="#valdef-page-bleed-auto" id="ref-for-valdef-page-bleed-auto">auto</a> as the initial value of <a class="property css" data-link-type="property">bleed</a> and allowed it to apply even when <a class="property css" data-link-type="property">marks</a> is <a class="css" data-link-type="maybe" href="#valdef-page-marks-none" id="ref-for-valdef-page-marks-none">none</a>. <li>Added JIS-B4 and JIS-B5. </ul> <h2 class="no-num heading settled" id="acknowledgements">Acknowledgements<a class="self-link" href="#acknowledgements"></a></h2> The CSS Working Group would like to give very special thanks to this module’s former editors: Robert Stevahn (Hewlett-Packard), Håkon Wium Lie (Opera Software), Jim Bigelow (Hewlett-Packard), Jacob Refstrup (Hewlett-Packard), and Melinda Grant (Hewlett-Packard). We would also like to acknowledge our expert contributors Michael Day (YesLogic), Shinyu Murakami (Antenna House), Peter Linss (Hewlett-Packard), and the other members of the CSS Working Group and www-style community who have provided review and comment on CSS Paged Media Level 3. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> 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. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> 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: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, 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 <code></code>, like this: UAs MUST provide an accessible alternative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <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> 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. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must 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 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 be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> 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. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> 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 Working Group. 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. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#valdef-page-size-a3">A3</a>, in § 7.1 <li><a href="#valdef-page-size-a4">A4</a>, in § 7.1 <li><a href="#valdef-page-size-a5">A5</a>, in § 7.1 <li> auto <ul> <li><a href="#valdef-page-bleed-auto">value for @page/bleed</a>, in § 7.3 <li><a href="#valdef-page-size-auto">value for @page/size</a>, in § 7.1 </ul> <li><a href="#available-height">available height</a>, in § 5.3.1 <li><a href="#available-width">available width</a>, in § 5.3.1 <li><a href="#valdef-page-size-b4">B4</a>, in § 7.1 <li><a href="#valdef-page-size-b5">B5</a>, in § 7.1 <li><a href="#binding-edge">Binding Edge</a>, in § 2 <li><a href="#valdef-page-blank">:blank</a>, in § 4.2.3 <li><a href="#descdef-page-bleed">bleed</a>, in § 7.3 <li><a href="#bleed-area">bleed area</a>, in § 7.3 <li><a href="#at-ruledef-bottom-center">@bottom-center</a>, in § 4.3 <li><a href="#at-ruledef-bottom-left">@bottom-left</a>, in § 4.3 <li><a href="#at-ruledef-bottom-left-corner">@bottom-left-corner</a>, in § 4.3 <li><a href="#at-ruledef-bottom-right">@bottom-right</a>, in § 4.3 <li><a href="#at-ruledef-bottom-right-corner">@bottom-right-corner</a>, in § 4.3 <li><a href="#containing-block">containing block</a>, in § 5.3.1 <li><a href="#content-empty">Content-empty page</a>, in § 3.2 <li><a href="#valdef-page-marks-crop">crop</a>, in § 7.2 <li><a href="#valdef-page-marks-cross">cross</a>, in § 7.2 <li><a href="#duplex-printing">Duplex Printing</a>, in § 2 <li><a href="#end-page-value">end page value</a>, in § 8.1 <li><a href="#facing-pages">Facing Pages</a>, in § 2 <li><a href="#valdef-page-first">:first</a>, in § 4.2.2 <li><a href="#flex-factor">flex factor</a>, in § 5.3.2.2 <li><a href="#flex-space">flex space</a>, in § 5.3.2.2 <li><a href="#generated">generated</a>, in § 5.2 <li><a href="#valdef-page-size-jis-b4">JIS-B4</a>, in § 7.1 <li><a href="#valdef-page-size-jis-b5">JIS-B5</a>, in § 7.1 <li> landscape <ul> <li><a href="#landscape">definition of</a>, in § 2 <li><a href="#valdef-page-size-landscape">value for @page/size</a>, in § 7.1 </ul> <li><a href="#landscape">landscape orientation</a>, in § 2 <li><a href="#valdef-page-size-ledger">ledger</a>, in § 7.1 <li><a href="#valdef-page-left">:left</a>, in § 4.2.1 <li><a href="#at-ruledef-left-bottom">@left-bottom</a>, in § 4.3 <li><a href="#at-ruledef-left-middle">@left-middle</a>, in § 4.3 <li><a href="#left-page">Left Page</a>, in § 2 <li><a href="#at-ruledef-left-top">@left-top</a>, in § 4.3 <li><a href="#valdef-page-size-legal">legal</a>, in § 7.1 <li><a href="#valdef-page-bleed-length"><length></a>, in § 7.3 <li><a href="#valdef-page-size-length-0"><length [0,∞]></a>, in § 7.1 <li><a href="#valdef-page-size-letter">letter</a>, in § 7.1 <li><a href="#margin-at-rule">margin at-rule</a>, in § 5.1 <li><a href="#margin-context">margin context</a>, in § 5.1 <li><a href="#descdef-page-marks">marks</a>, in § 7.2 <li><a href="#match">match</a>, in § 4.2 <li><a href="#max-content-width">max-content width</a>, in § 5.3.1 <li><a href="#min-content-width">min-content width</a>, in § 5.3.1 <li><a href="#named-page">named page</a>, in § 8.1 <li><a href="#valdef-page-marks-none">none</a>, in § 7.2 <li><a href="#outer-max-width">outer max width</a>, in § 5.3.1 <li><a href="#outer-min-width">outer min width</a>, in § 5.3.1 <li><a href="#outer-width">outer width</a>, in § 5.3.1 <li><a href="#at-ruledef-page">@page</a>, in § 4.1 <li><a href="#propdef-page">page</a>, in § 8.1 <li><a href="#page-area">page area</a>, in § 3 <li><a href="#page-box">page box</a>, in § 3 <li><a href="#page-context">page context</a>, in § 4.1 <li><a href="#page-footer">page footer</a>, in § 5 <li><a href="#page-header">page header</a>, in § 5 <li><a href="#page-margin-boxes">page-margin boxes</a>, in § 3 <li><a href="#page-margin-property">page-margin property</a>, in § Unnumbered section <li><a href="#page-orientation">Page Orientation</a>, in § 2 <li><a href="#descdef-page-page-orientation">page-orientation</a>, in § 7.1.2 <li><a href="#page-progression">page progression</a>, in § 3.3 <li><a href="#page-property">page property</a>, in § Unnumbered section <li><a href="#page-pseudo-class">page pseudo-class</a>, in § 4.2 <li><a href="#typedef-page-selector"><page-selector></a>, in § 4.3 <li><a href="#page-selector">page selector</a>, in § 4.2 <li><a href="#typedef-page-selector-list"><page-selector-list></a>, in § 4.3 <li><a href="#page-sheet">Page sheet</a>, in § 2 <li><a href="#typedef-page-size-page-size"><page-size></a>, in § 7.1 <li><a href="#page-type-selector">page type selector</a>, in § 4.2 <li> portrait <ul> <li><a href="#portrait">definition of</a>, in § 2 <li><a href="#valdef-page-size-portrait">value for @page/size</a>, in § 7.1 </ul> <li><a href="#portrait">portrait orientation</a>, in § 2 <li><a href="#printable-area">printable area</a>, in § 2 <li><a href="#typedef-pseudo-page"><pseudo-page></a>, in § 4.3 <li><a href="#valdef-page-right">:right</a>, in § 4.2.1 <li><a href="#at-ruledef-right-bottom">@right-bottom</a>, in § 4.3 <li><a href="#at-ruledef-right-middle">@right-middle</a>, in § 4.3 <li><a href="#right-page">Right Page</a>, in § 2 <li><a href="#at-ruledef-right-top">@right-top</a>, in § 4.3 <li><a href="#valdef-page-orientation-rotate-left">rotate-left</a>, in § 7.1.2 <li><a href="#valdef-page-orientation-rotate-right">rotate-right</a>, in § 7.1.2 <li><a href="#signature">signature</a>, in § Unnumbered section <li><a href="#descdef-page-size">size</a>, in § 7.1 <li><a href="#specificity">specificity</a>, in § 4.4 <li><a href="#start-page-value">start page value</a>, in § 8.1 <li><a href="#at-ruledef-top-center">@top-center</a>, in § 4.3 <li><a href="#at-ruledef-top-left">@top-left</a>, in § 4.3 <li><a href="#at-ruledef-top-left-corner">@top-left-corner</a>, in § 4.3 <li><a href="#at-ruledef-top-right">@top-right</a>, in § 4.3 <li><a href="#at-ruledef-top-right-corner">@top-right-corner</a>, in § 4.3 <li><a href="#valdef-page-orientation-upright">upright</a>, in § 7.1.2 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-ANCHOR-POSITION-1]</a> defines the following terms: <ul> <li>height <li>width </ul> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>background positioning area <li>background-attachment <li>background-clip <li>background-origin <li>border-bottom-width <li>border-top-width <li>fixed </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>margin-bottom <li>margin-left <li>margin-right <li>margin-top <li>outer edge <li>padding-bottom <li>padding-top </ul> <li> <a data-link-type="biblio">[CSS-BREAK-3]</a> defines the following terms: <ul> <li>break-before <li>break-inside <li>orphans </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>break-after <li>forced break <li>fragmentation <li>left <li>recto <li>right <li>verso <li>widows </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>inherit </ul> <li> <a data-link-type="biblio">[CSS-CONTENT-3]</a> defines the following terms: <ul> <li>content <li>none <li>normal </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>hidden <li>none <li>visibility </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>font-size </ul> <li> <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms: <ul> <li>vertical-align </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>position </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>auto <li>height <li>max-content block size <li>max-content inline size <li>min-content block size <li>min-content inline size <li>width </ul> <li> <a data-link-type="biblio">[CSS-SYNTAX-3]</a> defines the following terms: <ul> <li><declaration-list> <li><declaration-rule-list> <li><ident-token> <li>at-rule <li>parse </ul> <li> <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms: <ul> <li>text-align </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>pre <li>white-space </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li>! <li># <li>* <li><custom-ident> <li><length> <li>? <li>CSS-wide keywords <li>em <li>ex <li>{A,B} <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-3]</a> defines the following terms: <ul> <li>direction </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>block flow direction <li>inline base direction <li>principal writing mode <li>writing-mode </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>:after <li>:before <li>counter-increment <li>counter-reset <li>display <li>margin <li>max-height <li>max-width <li>min-height <li>min-width <li>page-break-after <li>page-break-before <li>stacking context <li>z-index </ul> <li> <a data-link-type="biblio">[CSS4BACKGROUND]</a> defines the following terms: <ul> <li>background painting area </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-5]</a> defines the following terms: <ul> <li>continuous media <li>paged media </ul> <li> <a data-link-type="biblio">[SELECTORS-4]</a> defines the following terms: <ul> <li><compound-selector> </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-anchor-position-1">[CSS-ANCHOR-POSITION-1] <dd>Tab Atkins Jr.; Elika Etemad; Ian Kilpatrick. <a href="https://drafts.csswg.org/css-anchor-position-1/"><cite>CSS Anchor Positioning</cite></a>. URL: <a href="https://drafts.csswg.org/css-anchor-position-1/">https://drafts.csswg.org/css-anchor-position-1/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-box-3">[CSS-BOX-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-3/"><cite>CSS Box Model Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-box-3/">https://drafts.csswg.org/css-box-3/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-box-4/">https://drafts.csswg.org/css-box-4/</a> <dt id="biblio-css-break-3">[CSS-BREAK-3] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break/"><cite>CSS Fragmentation Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-break/">https://drafts.csswg.org/css-break/</a> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-break-4/">https://drafts.csswg.org/css-break-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-content-3">[CSS-CONTENT-3] <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-css-display-4">[CSS-DISPLAY-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-fonts-4">[CSS-FONTS-4] <dd>Chris Lilley. <a href="https://drafts.csswg.org/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-fonts-4/">https://drafts.csswg.org/css-fonts-4/</a> <dt id="biblio-css-inline-3">[CSS-INLINE-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-inline-3/">https://drafts.csswg.org/css-inline-3/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-position-3/">https://drafts.csswg.org/css-position-3/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a> <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://drafts.csswg.org/css-syntax/"><cite>CSS Syntax Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-syntax/">https://drafts.csswg.org/css-syntax/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-4/">https://drafts.csswg.org/css-text-4/</a> <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-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-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-css4background">[CSS4BACKGROUND] <dd>Bert Bos; Elika J. Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-backgrounds-4/"><cite>CSS Backgrounds and Borders Module Level 4</cite></a>. Proposal for a CSS module. URL: <a href="https://drafts.csswg.org/css-backgrounds-4/">https://drafts.csswg.org/css-backgrounds-4/</a> <dt id="biblio-mediaq">[MEDIAQ] <dd>Florian Rivoal; Tab Atkins Jr.. <a href="https://drafts.csswg.org/mediaqueries-4/"><cite>Media Queries Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/mediaqueries-4/">https://drafts.csswg.org/mediaqueries-4/</a> <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5] <dd>Dean Jackson; et al. <a href="https://drafts.csswg.org/mediaqueries-5/"><cite>Media Queries Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/mediaqueries-5/">https://drafts.csswg.org/mediaqueries-5/</a> <dt id="biblio-pwgmsn">[PWGMSN] <dd>Ron Bergman; Tom Hastings. <a href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf"><cite>Media Standardized Names.</cite></a> 26 February 2002. IEEE ISTO Printer Working Group 5101.1-2002. URL: <a href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf">ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf</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> <dt id="biblio-select">[SELECT] <dd>Tantek Çelik; et al. <a href="https://drafts.csswg.org/selectors-3/"><cite>Selectors Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/selectors-3/">https://drafts.csswg.org/selectors-3/</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/selectors/"><cite>Selectors Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/selectors/">https://drafts.csswg.org/selectors/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-device-adapt">[CSS-DEVICE-ADAPT] <dd>Florian Rivoal; Emilio Cobos Álvarez. <a href="https://drafts.csswg.org/css-viewport/"><cite>CSS Viewport Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-viewport/">https://drafts.csswg.org/css-viewport/</a> <dt id="biblio-css-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-images-3/">https://drafts.csswg.org/css-images-3/</a> <dt id="biblio-css3gcpm">[CSS3GCPM] <dd>Rachel Andrew; Mike Bremford. <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-jlreq">[JLREQ] <dd>Hiroyuki Chiba; et al. <a href="https://w3c.github.io/jlreq/"><cite>Requirements for Japanese Text Layout 日本語組版処理の要件(日本語版)</cite></a>. URL: <a href="https://w3c.github.io/jlreq/">https://w3c.github.io/jlreq/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<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-page" id="ref-for-propdef-page①④">page</a> <td>auto | <custom-ident> <td>auto <td>boxes that create class A break points <td>no (but see prose) <td>n/a <td>discrete <td>per grammar <td>specified value </table> </div> <h3 class="no-num no-ref heading settled" id="page-descriptor-table"><a class="css" data-link-type="at-rule" href="#at-ruledef-page" id="ref-for-at-ruledef-page①⑧">@page</a> Descriptors<a class="self-link" href="#page-descriptor-table"></a></h3> <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">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-page-bleed" id="ref-for-descdef-page-bleed">bleed</a> <td>auto | <length> <td>auto <td>as specified <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-page-marks" id="ref-for-descdef-page-marks">marks</a> <td>none | [ crop || cross ] <td>none <td>as specified <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-page-page-orientation" id="ref-for-descdef-page-page-orientation">page-orientation</a> <td>upright | rotate-left | rotate-right <td>upright <td>as specified <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-page-size" id="ref-for-descdef-page-size③">size</a> <td><length [0,∞]>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ] <td>auto <td>specified value, with <length>s made absolute. </table> </div> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> In CSS 2.1, both the page box and page area are simple rectangles. Neither is a CSS box with margins, borders, and padding. This CSS box should be distinct from the page box and page area, which would be its margin area and content area, respectively. Naming ideas? <a class="issue-return" href="#issue-16b9253a" title="Jump to section">↵</a></div> <div class="issue"> It would be useful if media queries could respond at least to sizes specified on an unqualified @page. Another option could be to do like @viewport rules <a data-link-type="biblio" href="#biblio-css-device-adapt" title="CSS Viewport Module Level 1">[CSS-DEVICE-ADAPT]</a>: First apply <a class="css" data-link-type="maybe" href="#at-ruledef-page">@page</a> rules (matching which selectors?), using the UA’s default page size for Media Queries and <a href="https://www.w3.org/TR/css3-values/#viewport-relative-lengths">viewport-percentage lengths</a> <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. The resulting page size is the "base page size". The entire set of stylesheets is applied again, this time using the "base page size" for Media Queries and viewport-percentage lengths. <a class="issue-return" href="#issue-59a903e8" title="Jump to section">↵</a> </div> </div> <details class="mdn-anno unpositioned" data-anno-for="page-orientation-prop"> <summary>MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@page/page-orientation" title="The page-orientation CSS descriptor for the @page at-rule controls the rotation of a printed page. It handles the flow of content across pages when the orientation of a page is changed. This behavior differs from the size descriptor in that a user can define the direction in which to rotate the page.">@page/page-orientation</a> <div class="support"> Firefoxpreview+SafariNoneChrome85+ <hr> Opera?Edge85+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="page-size-prop"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size" title="The size CSS at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable.">@page/size</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome83+ <hr> Opera?Edge83+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size" title="The size CSS at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable.">@page/size</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome83+ <hr> Opera?Edge83+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size" title="The size CSS at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable.">@page/size</a> <div class="support"> FirefoxNoneSafari13.1+Chrome15+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet1.5+Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="at-page-rule"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@page" title="The @page at-rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies the page's dimensions, page orientation, and margins. The @page at-rule can be used to target all pages in a print-out, or even specific ones using its various pseudo-classes.">@page</a> In all current engines. <div class="support"> Firefox19+Safari13.1+Chrome2+ <hr> Opera6+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="page-break-after"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after" title="The page-break-after CSS property adjusts page breaks after the current element.">page-break-after</a> In all current engines. <div class="support"> Firefox1+Safari1.2+Chrome1+ <hr> Opera7+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="page-break-before"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before" title="The page-break-before CSS property adjusts page breaks before the current element.">page-break-before</a> In all current engines. <div class="support"> Firefox1+Safari1.2+Chrome1+ <hr> Opera7+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="page-break-inside"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside" title="The page-break-inside CSS property adjusts page breaks inside the current element.">page-break-inside</a> In all current engines. <div class="support"> Firefox19+Safari1.3+Chrome1+ <hr> Opera7+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="using-named-pages"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page" title="The page CSS property is used to specify the named page, a specific type of page defined by the @page at-rule.">page</a> In all current engines. <div class="support"> Firefox110+Safari13.1+Chrome85+ <hr> Opera?Edge85+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="left-right-first"> <summary>MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first" title="The :first CSS pseudo-class, used with the @page at-rule, represents the first page of a printed document. (See :first-child for general first element of a node.)">:first</a> <div class="support"> FirefoxNoneSafari6+Chrome18+ <hr> Opera9.2+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:left" title="The :left CSS pseudo-class, used with the @page at-rule, represents all left-hand pages of a printed document.">:left</a> <div class="support"> FirefoxNoneSafari5+Chrome6+ <hr> Opera9.2+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:right" title="The :right CSS pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed document.">:right</a> <div class="support"> FirefoxNoneSafari5+Chrome6+ <hr> Opera9.2+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; 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> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "00140718": {"dfnID":"00140718","dfnText":"margin-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-top"},{"id":"ref-for-propdef-margin-top\u2460"},{"id":"ref-for-propdef-margin-top\u2461"},{"id":"ref-for-propdef-margin-top\u2462"},{"id":"ref-for-propdef-margin-top\u2463"},{"id":"ref-for-propdef-margin-top\u2464"},{"id":"ref-for-propdef-margin-top\u2465"},{"id":"ref-for-propdef-margin-top\u2466"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-top"}, "07308da5": {"dfnID":"07308da5","dfnText":"<ident-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-ident-token"}],"title":"4.3. @page rule grammar"}],"url":"https://drafts.csswg.org/css-syntax-3/#typedef-ident-token"}, "08eba280": {"dfnID":"08eba280","dfnText":"!","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-req"}],"title":"4.3. @page rule grammar"}],"url":"https://drafts.csswg.org/css-values-4/#mult-req"}, "0936783c": {"dfnID":"0936783c","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"3.2. Content outside the page box"},{"refs":[{"id":"ref-for-propdef-display\u2460"},{"id":"ref-for-propdef-display\u2461"}],"title":"5.2. Populating page-margin boxes"}],"url":"https://drafts.csswg.org/css2/#propdef-display"}, "0e5cedd7": {"dfnID":"0e5cedd7","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-auto"},{"id":"ref-for-valdef-width-auto\u2460"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"},{"refs":[{"id":"ref-for-valdef-width-auto\u2461"},{"id":"ref-for-valdef-width-auto\u2462"},{"id":"ref-for-valdef-width-auto\u2463"},{"id":"ref-for-valdef-width-auto\u2464"}],"title":"5.3.2.2. Resolving auto widths"},{"refs":[{"id":"ref-for-valdef-width-auto\u2465"},{"id":"ref-for-valdef-width-auto\u2466"},{"id":"ref-for-valdef-width-auto\u2467"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-auto"}, "12ebd8e8": {"dfnID":"12ebd8e8","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"7.1. \nPage size: the size property"}],"url":"https://drafts.csswg.org/css2/#propdef-margin"}, "12f8fb07": {"dfnID":"12f8fb07","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"}],"title":"3.2. Content outside the page box"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "164f0069": {"dfnID":"164f0069","dfnText":"fixed","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-background-attachment-fixed"}],"title":"3.1. \nPage Backgrounds and Painting Order"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#valdef-background-attachment-fixed"}, "1d60d958": {"dfnID":"1d60d958","dfnText":"max-content block size","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content-block-size"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content-block-size"}, "1fa52ca0": {"dfnID":"1fa52ca0","dfnText":"background positioning area","external":true,"refSections":[{"refs":[{"id":"ref-for-background-positioning-area"}],"title":"3.1. \nPage Backgrounds and Painting Order"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area"}, "2467179e": {"dfnID":"2467179e","dfnText":"content","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-content"},{"id":"ref-for-propdef-content\u2460"}],"title":"5.2. Populating page-margin boxes"},{"refs":[{"id":"ref-for-propdef-content\u2461"}],"title":"6. \nPage Properties"}],"url":"https://drafts.csswg.org/css-content-3/#propdef-content"}, "2589df91": {"dfnID":"2589df91","dfnText":"orphans","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-orphans"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-orphans"}, "25ccffa4": {"dfnID":"25ccffa4","dfnText":"min-content inline size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content-inline-size"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content-inline-size"}, "2e4528d6": {"dfnID":"2e4528d6","dfnText":"max-content inline size","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content-inline-size"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content-inline-size"}, "2ee35d30": {"dfnID":"2ee35d30","dfnText":"background painting area","external":true,"refSections":[{"refs":[{"id":"ref-for-background-painting-area"},{"id":"ref-for-background-painting-area\u2460"}],"title":"3.1. \nPage Backgrounds and Painting Order"}],"url":"https://drafts.csswg.org/css-backgrounds-4/#background-painting-area"}, "32b9b591": {"dfnID":"32b9b591","dfnText":"<compound-selector>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-compound-selector"}],"title":"4.3. @page rule grammar"}],"url":"https://drafts.csswg.org/selectors-4/#typedef-compound-selector"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.1. \nValue Definitions"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "385326d7": {"dfnID":"385326d7","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"}],"title":"3.3. Page Progression"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460"}],"title":"7.1.2. \nRotating The Printed Page: the page-orientation property"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2461"}],"title":"7.5. \nPositioning the page box on the sheet"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "3b1682d5": {"dfnID":"3b1682d5","dfnText":"background-origin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-origin"}],"title":"3.1. \nPage Backgrounds and Painting Order"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin"}, "41edb3c8": {"dfnID":"41edb3c8","dfnText":"recto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-break-before-recto"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-recto"}, "4356bfe3": {"dfnID":"4356bfe3","dfnText":"text-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-align"}],"title":"6.2. \nPage-margin boxes and default values"}],"url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "49a5f65f": {"dfnID":"49a5f65f","dfnText":"padding-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-top"},{"id":"ref-for-propdef-padding-top\u2460"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding-top"}, "4a16f115": {"dfnID":"4a16f115","dfnText":"border-top-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-width"},{"id":"ref-for-propdef-border-top-width\u2460"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "4bcd07f8": {"dfnID":"4bcd07f8","dfnText":"<declaration-rule-list>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-declaration-rule-list"}],"title":"4.3. @page rule grammar"}],"url":"https://drafts.csswg.org/css-syntax-3/#typedef-declaration-rule-list"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"},{"id":"ref-for-mult-opt\u2460"}],"title":"4.3. @page rule grammar"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "55e8f5de": {"dfnID":"55e8f5de","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-none"}],"title":"3.2. Content outside the page box"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-none"}, "5bc8bd12": {"dfnID":"5bc8bd12","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"}],"title":"3.3. Page Progression"},{"refs":[{"id":"ref-for-propdef-direction\u2460"}],"title":"7.5. \nPositioning the page box on the sheet"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "5c8c0582": {"dfnID":"5c8c0582","dfnText":"left","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-break-before-left"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-left"}, "5ddc23c6": {"dfnID":"5ddc23c6","dfnText":"page-break-after","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-after"}],"title":"3.2. Content outside the page box"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-after"}, "6501e5b3": {"dfnID":"6501e5b3","dfnText":"white-space","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-white-space"}],"title":"3.2. Content outside the page box"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-white-space"}, "68019d7a": {"dfnID":"68019d7a","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"}],"title":"5.3. Computing Page-margin Box Dimensions"},{"refs":[{"id":"ref-for-propdef-height\u2460"},{"id":"ref-for-propdef-height\u2461"},{"id":"ref-for-propdef-height\u2462"},{"id":"ref-for-propdef-height\u2463"},{"id":"ref-for-propdef-height\u2464"},{"id":"ref-for-propdef-height\u2465"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"},{"refs":[{"id":"ref-for-propdef-height\u2466"}],"title":"6. \nPage Properties"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "68150e76": {"dfnID":"68150e76","dfnText":"*","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-zero-plus"},{"id":"ref-for-mult-zero-plus\u2460"},{"id":"ref-for-mult-zero-plus\u2461"}],"title":"4.3. @page rule grammar"}],"url":"https://drafts.csswg.org/css-values-4/#mult-zero-plus"}, "68487d22": {"dfnID":"68487d22","dfnText":"#","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-comma"}],"title":"4.3. @page rule grammar"}],"url":"https://drafts.csswg.org/css-values-4/#mult-comma"}, "688eb8fe": {"dfnID":"688eb8fe","dfnText":"max-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-max-width"}],"title":"5.3. Computing Page-margin Box Dimensions"},{"refs":[{"id":"ref-for-propdef-max-width\u2460"},{"id":"ref-for-propdef-max-width\u2461"},{"id":"ref-for-propdef-max-width\u2462"},{"id":"ref-for-propdef-max-width\u2463"},{"id":"ref-for-propdef-max-width\u2464"}],"title":"5.3.2.3. Handling min-width and max-width"}],"url":"https://drafts.csswg.org/css2/#propdef-max-width"}, "689ef56c": {"dfnID":"689ef56c","dfnText":":after","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-after"}],"title":"5.2. Populating page-margin boxes"}],"url":"https://drafts.csswg.org/css2/#selectordef-after"}, "6d16f9d3": {"dfnID":"6d16f9d3","dfnText":"counter-reset","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-counter-reset"},{"id":"ref-for-propdef-counter-reset\u2460"}],"title":"6.1. \nPage-based counters"}],"url":"https://drafts.csswg.org/css2/#propdef-counter-reset"}, "6e0640e3": {"dfnID":"6e0640e3","dfnText":"verso","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-break-before-verso"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-verso"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"},{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"}],"title":"4.3. @page rule grammar"},{"refs":[{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"}],"title":"7.1. \nPage size: the size property"},{"refs":[{"id":"ref-for-comb-one\u2465"},{"id":"ref-for-comb-one\u2466"}],"title":"7.1.2. \nRotating The Printed Page: the page-orientation property"},{"refs":[{"id":"ref-for-comb-one\u2467"}],"title":"7.2. \nCrop and Registration Marks: the marks property"},{"refs":[{"id":"ref-for-comb-one\u2468"}],"title":"7.3. \nBleed Area: the bleed property"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea"}],"title":"8.1. \nUsing named pages: page"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "74a27486": {"dfnID":"74a27486","dfnText":":before","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-before"}],"title":"5.2. Populating page-margin boxes"}],"url":"https://drafts.csswg.org/css2/#selectordef-before"}, "758665a5": {"dfnID":"758665a5","dfnText":"paged media","external":true,"refSections":[{"refs":[{"id":"ref-for-paged-media"}],"title":"3. The Page Model"}],"url":"https://drafts.csswg.org/mediaqueries-5/#paged-media"}, "762610c7": {"dfnID":"762610c7","dfnText":"at-rule","external":true,"refSections":[{"refs":[{"id":"ref-for-at-rule"}],"title":"5.1. At-rules for page-margin boxes"}],"url":"https://drafts.csswg.org/css-syntax-3/#at-rule"}, "76c4403d": {"dfnID":"76c4403d","dfnText":"parse","external":true,"refSections":[{"refs":[{"id":"ref-for-css-parse-something-according-to-a-css-grammar"}],"title":"4.3. @page rule grammar"}],"url":"https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar"}, "84252421": {"dfnID":"84252421","dfnText":"<declaration-list>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-declaration-list"},{"id":"ref-for-typedef-declaration-list\u2460"},{"id":"ref-for-typedef-declaration-list\u2461"},{"id":"ref-for-typedef-declaration-list\u2462"},{"id":"ref-for-typedef-declaration-list\u2463"},{"id":"ref-for-typedef-declaration-list\u2464"},{"id":"ref-for-typedef-declaration-list\u2465"},{"id":"ref-for-typedef-declaration-list\u2466"},{"id":"ref-for-typedef-declaration-list\u2467"},{"id":"ref-for-typedef-declaration-list\u2468"},{"id":"ref-for-typedef-declaration-list\u2460\u24ea"},{"id":"ref-for-typedef-declaration-list\u2460\u2460"},{"id":"ref-for-typedef-declaration-list\u2460\u2461"},{"id":"ref-for-typedef-declaration-list\u2460\u2462"},{"id":"ref-for-typedef-declaration-list\u2460\u2463"},{"id":"ref-for-typedef-declaration-list\u2460\u2464"}],"title":"4.3. @page rule grammar"}],"url":"https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list"}, "88643fe0": {"dfnID":"88643fe0","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-width"}],"title":"5.3. Computing Page-margin Box Dimensions"},{"refs":[{"id":"ref-for-propdef-width\u2460"},{"id":"ref-for-propdef-width\u2461"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"},{"refs":[{"id":"ref-for-propdef-width\u2462"}],"title":"5.3.2.2. Resolving auto widths"},{"refs":[{"id":"ref-for-propdef-width\u2463"},{"id":"ref-for-propdef-width\u2464"}],"title":"5.3.2.3. Handling min-width and max-width"},{"refs":[{"id":"ref-for-propdef-width\u2465"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"},{"refs":[{"id":"ref-for-propdef-width\u2466"}],"title":"6. \nPage Properties"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "887c0c5c": {"dfnID":"887c0c5c","dfnText":"inline base direction","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-base-direction"}],"title":"3.3. Page Progression"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-base-direction"}, "88dd7551": {"dfnID":"88dd7551","dfnText":"block flow direction","external":true,"refSections":[{"refs":[{"id":"ref-for-block-flow-direction"}],"title":"3.3. Page Progression"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction"}, "8a82fda1": {"dfnID":"8a82fda1","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"}],"title":"7.1. \nPage size: the size property"},{"refs":[{"id":"ref-for-comb-any\u2460"}],"title":"7.2. \nCrop and Registration Marks: the marks property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "8f568cb6": {"dfnID":"8f568cb6","dfnText":"page-break-before","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-before"}],"title":"3.2. Content outside the page box"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, "938ba280": {"dfnID":"938ba280","dfnText":"{A,B}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num-range"}],"title":"7.1. \nPage size: the size property"}],"url":"https://drafts.csswg.org/css-values-4/#mult-num-range"}, "9522389e": {"dfnID":"9522389e","dfnText":"break-inside","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-inside"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-break-inside"}, "991145b0": {"dfnID":"991145b0","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-content-none"},{"id":"ref-for-valdef-content-none\u2460"}],"title":"5.2. Populating page-margin boxes"},{"refs":[{"id":"ref-for-valdef-content-none\u2461"}],"title":"6. \nPage Properties"}],"url":"https://drafts.csswg.org/css-content-3/#valdef-content-none"}, "9b0fa0e9": {"dfnID":"9b0fa0e9","dfnText":"background-clip","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-clip"},{"id":"ref-for-propdef-background-clip\u2460"}],"title":"3.1. \nPage Backgrounds and Painting Order"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip"}, "9e143e11": {"dfnID":"9e143e11","dfnText":"break-after","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-after"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-propdef-break-after\u2460"}],"title":"3.2. Content outside the page box"},{"refs":[{"id":"ref-for-propdef-break-after\u2461"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"https://drafts.csswg.org/css-break-4/#propdef-break-after"}, "9f49bc74": {"dfnID":"9f49bc74","dfnText":"min-content block size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content-block-size"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content-block-size"}, "a5010638": {"dfnID":"a5010638","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-anchor-size-width"}],"title":"7.1. \nPage size: the size property"}],"url":"https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-size-width"}, "a93f3bc2": {"dfnID":"a93f3bc2","dfnText":"hidden","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-visibility-hidden"}],"title":"3.2. Content outside the page box"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-visibility-hidden"}, "aaf6abed": {"dfnID":"aaf6abed","dfnText":"margin-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-left"}],"title":"5.3.2.1. Margins"},{"refs":[{"id":"ref-for-propdef-margin-left\u2460"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-left"}, "aba1ccaf": {"dfnID":"aba1ccaf","dfnText":"continuous media","external":true,"refSections":[{"refs":[{"id":"ref-for-continuous-media"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/mediaqueries-5/#continuous-media"}, "ad065a5c": {"dfnID":"ad065a5c","dfnText":"margin-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-right"}],"title":"5.3.2.1. Margins"},{"refs":[{"id":"ref-for-propdef-margin-right\u2460"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-right"}, "at-ruledef-bottom-center": {"dfnID":"at-ruledef-bottom-center","dfnText":"@bottom-center","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-bottom-center"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-bottom-center\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-bottom-center\u2461"}],"title":"5.3.2.5. Boxes on other sides"}],"url":"#at-ruledef-bottom-center"}, "at-ruledef-bottom-left": {"dfnID":"at-ruledef-bottom-left","dfnText":"@bottom-left","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-bottom-left"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-bottom-left\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-bottom-left\u2461"}],"title":"5.3.2.5. Boxes on other sides"}],"url":"#at-ruledef-bottom-left"}, "at-ruledef-bottom-left-corner": {"dfnID":"at-ruledef-bottom-left-corner","dfnText":"@bottom-left-corner","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-bottom-left-corner"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-bottom-left-corner\u2460"}],"title":"5. Page-Margin Boxes"}],"url":"#at-ruledef-bottom-left-corner"}, "at-ruledef-bottom-right": {"dfnID":"at-ruledef-bottom-right","dfnText":"@bottom-right","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-bottom-right"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-bottom-right\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-bottom-right\u2461"}],"title":"5.3.2.5. Boxes on other sides"}],"url":"#at-ruledef-bottom-right"}, "at-ruledef-bottom-right-corner": {"dfnID":"at-ruledef-bottom-right-corner","dfnText":"@bottom-right-corner","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-bottom-right-corner"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-bottom-right-corner\u2460"}],"title":"5. Page-Margin Boxes"}],"url":"#at-ruledef-bottom-right-corner"}, "at-ruledef-left-bottom": {"dfnID":"at-ruledef-left-bottom","dfnText":"@left-bottom","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-left-bottom"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-left-bottom\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-left-bottom\u2461"},{"id":"ref-for-at-ruledef-left-bottom\u2462"}],"title":"5.3.2.5. Boxes on other sides"}],"url":"#at-ruledef-left-bottom"}, "at-ruledef-left-middle": {"dfnID":"at-ruledef-left-middle","dfnText":"@left-middle","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-left-middle"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-left-middle\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-left-middle\u2461"},{"id":"ref-for-at-ruledef-left-middle\u2462"}],"title":"5.3.2.5. Boxes on other sides"}],"url":"#at-ruledef-left-middle"}, "at-ruledef-left-top": {"dfnID":"at-ruledef-left-top","dfnText":"@left-top","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-left-top"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-left-top\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-left-top\u2461"},{"id":"ref-for-at-ruledef-left-top\u2462"}],"title":"5.3.2.5. Boxes on other sides"}],"url":"#at-ruledef-left-top"}, "at-ruledef-page": {"dfnID":"at-ruledef-page","dfnText":"@page","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-page"}],"title":"3. The Page Model"},{"refs":[{"id":"ref-for-at-ruledef-page\u2460"},{"id":"ref-for-at-ruledef-page\u2461"},{"id":"ref-for-at-ruledef-page\u2462"},{"id":"ref-for-at-ruledef-page\u2463"},{"id":"ref-for-at-ruledef-page\u2464"},{"id":"ref-for-at-ruledef-page\u2465"},{"id":"ref-for-at-ruledef-page\u2466"}],"title":"4.1. \nThe @page Rule"},{"refs":[{"id":"ref-for-at-ruledef-page\u2467"},{"id":"ref-for-at-ruledef-page\u2468"}],"title":"4.3. @page rule grammar"},{"refs":[{"id":"ref-for-at-ruledef-page\u2460\u24ea"}],"title":"6.1. \nPage-based counters"},{"refs":[{"id":"ref-for-at-ruledef-page\u2460\u2460"},{"id":"ref-for-at-ruledef-page\u2460\u2461"},{"id":"ref-for-at-ruledef-page\u2460\u2462"}],"title":"7.1. \nPage size: the size property"},{"refs":[{"id":"ref-for-at-ruledef-page\u2460\u2463"}],"title":"7.1.2. \nRotating The Printed Page: the page-orientation property"},{"refs":[{"id":"ref-for-at-ruledef-page\u2460\u2464"}],"title":"7.2. \nCrop and Registration Marks: the marks property"},{"refs":[{"id":"ref-for-at-ruledef-page\u2460\u2465"}],"title":"7.3. \nBleed Area: the bleed property"},{"refs":[{"id":"ref-for-at-ruledef-page\u2460\u2466"}],"title":"8.1. \nUsing named pages: page"}],"url":"#at-ruledef-page"}, "at-ruledef-right-bottom": {"dfnID":"at-ruledef-right-bottom","dfnText":"@right-bottom","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-right-bottom"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-right-bottom\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-right-bottom\u2461"}],"title":"5.3.2.5. Boxes on other sides"}],"url":"#at-ruledef-right-bottom"}, "at-ruledef-right-middle": {"dfnID":"at-ruledef-right-middle","dfnText":"@right-middle","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-right-middle"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-right-middle\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-right-middle\u2461"}],"title":"5.3.2.5. Boxes on other sides"}],"url":"#at-ruledef-right-middle"}, "at-ruledef-right-top": {"dfnID":"at-ruledef-right-top","dfnText":"@right-top","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-right-top"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-right-top\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-right-top\u2461"}],"title":"5.3.2.5. Boxes on other sides"}],"url":"#at-ruledef-right-top"}, "at-ruledef-top-center": {"dfnID":"at-ruledef-top-center","dfnText":"@top-center","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-top-center"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-top-center\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-top-center\u2461"}],"title":"5.3.2. \nPage-Margin Box Variable Dimension Computation Rules"},{"refs":[{"id":"ref-for-at-ruledef-top-center\u2462"}],"title":"5.3.2.5. Boxes on other sides"},{"refs":[{"id":"ref-for-at-ruledef-top-center\u2463"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"#at-ruledef-top-center"}, "at-ruledef-top-left": {"dfnID":"at-ruledef-top-left","dfnText":"@top-left","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-top-left"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-top-left\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-top-left\u2461"}],"title":"5.1. At-rules for page-margin boxes"},{"refs":[{"id":"ref-for-at-ruledef-top-left\u2462"}],"title":"5.3.2. \nPage-Margin Box Variable Dimension Computation Rules"},{"refs":[{"id":"ref-for-at-ruledef-top-left\u2463"}],"title":"5.3.2.5. Boxes on other sides"},{"refs":[{"id":"ref-for-at-ruledef-top-left\u2464"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"#at-ruledef-top-left"}, "at-ruledef-top-left-corner": {"dfnID":"at-ruledef-top-left-corner","dfnText":"@top-left-corner","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-top-left-corner"},{"id":"ref-for-at-ruledef-top-left-corner\u2460"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-top-left-corner\u2461"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-top-left-corner\u2462"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"#at-ruledef-top-left-corner"}, "at-ruledef-top-right": {"dfnID":"at-ruledef-top-right","dfnText":"@top-right","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-top-right"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-top-right\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-top-right\u2461"}],"title":"5.3.2. \nPage-Margin Box Variable Dimension Computation Rules"},{"refs":[{"id":"ref-for-at-ruledef-top-right\u2462"}],"title":"5.3.2.5. Boxes on other sides"},{"refs":[{"id":"ref-for-at-ruledef-top-right\u2463"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"#at-ruledef-top-right"}, "at-ruledef-top-right-corner": {"dfnID":"at-ruledef-top-right-corner","dfnText":"@top-right-corner","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-top-right-corner"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-at-ruledef-top-right-corner\u2460"}],"title":"5. Page-Margin Boxes"},{"refs":[{"id":"ref-for-at-ruledef-top-right-corner\u2461"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"#at-ruledef-top-right-corner"}, "available-height": {"dfnID":"available-height","dfnText":"available height","external":false,"refSections":[{"refs":[{"id":"ref-for-available-height"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"}],"url":"#available-height"}, "available-width": {"dfnID":"available-width","dfnText":"available width","external":false,"refSections":[{"refs":[{"id":"ref-for-available-width"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"},{"refs":[{"id":"ref-for-available-width\u2460"},{"id":"ref-for-available-width\u2461"},{"id":"ref-for-available-width\u2462"},{"id":"ref-for-available-width\u2463"},{"id":"ref-for-available-width\u2464"}],"title":"5.3.2.2. Resolving auto widths"}],"url":"#available-width"}, "b6730ce5": {"dfnID":"b6730ce5","dfnText":"widows","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-widows"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-break-4/#propdef-widows"}, "b8a0ba74": {"dfnID":"b8a0ba74","dfnText":"position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-position"},{"id":"ref-for-propdef-position\u2460"}],"title":"3.1. \nPage Backgrounds and Painting Order"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "b8c7a216": {"dfnID":"b8c7a216","dfnText":"forced break","external":true,"refSections":[{"refs":[{"id":"ref-for-forced-break"}],"title":"8.1. \nUsing named pages: page"}],"url":"https://drafts.csswg.org/css-break-4/#forced-break"}, "b8c9eb8a": {"dfnID":"b8c9eb8a","dfnText":"stacking context","external":true,"refSections":[{"refs":[{"id":"ref-for-x43"}],"title":"3.1. \nPage Backgrounds and Painting Order"}],"url":"https://www.w3.org/TR/CSS2/visuren.html#x43"}, "ba1eea86": {"dfnID":"ba1eea86","dfnText":"outer edge","external":true,"refSections":[{"refs":[{"id":"ref-for-outer-edge"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"}],"url":"https://drafts.csswg.org/css-box-4/#outer-edge"}, "bb9778e3": {"dfnID":"bb9778e3","dfnText":"fragmentation","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-break-4/#fragmentation"}, "binding-edge": {"dfnID":"binding-edge","dfnText":"Binding Edge","external":false,"refSections":[{"refs":[{"id":"ref-for-binding-edge"}],"title":"5. Page-Margin Boxes"}],"url":"#binding-edge"}, "bleed-area": {"dfnID":"bleed-area","dfnText":"bleed area","external":false,"refSections":[{"refs":[{"id":"ref-for-bleed-area"}],"title":"3.1. \nPage Backgrounds and Painting Order"},{"refs":[{"id":"ref-for-bleed-area\u2460"}],"title":"7.2. \nCrop and Registration Marks: the marks property"},{"refs":[{"id":"ref-for-bleed-area\u2461"}],"title":"7.3. \nBleed Area: the bleed property"}],"url":"#bleed-area"}, "c1654d36": {"dfnID":"c1654d36","dfnText":"break-before","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-before"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-propdef-break-before\u2460"}],"title":"3.2. Content outside the page box"},{"refs":[{"id":"ref-for-propdef-break-before\u2461"}],"title":"3.3. Page Progression"},{"refs":[{"id":"ref-for-propdef-break-before\u2462"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-break-before"}, "c17ce735": {"dfnID":"c17ce735","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-anchor-size-height"}],"title":"7.1. \nPage size: the size property"}],"url":"https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-size-height"}, "c388d253": {"dfnID":"c388d253","dfnText":"inherit","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-inherit"}],"title":"6. \nPage Properties"}],"url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit"}, "c82d6e13": {"dfnID":"c82d6e13","dfnText":"z-index","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-z-index"},{"id":"ref-for-propdef-z-index\u2460"},{"id":"ref-for-propdef-z-index\u2461"}],"title":"3.1. \nPage Backgrounds and Painting Order"}],"url":"https://drafts.csswg.org/css2/#propdef-z-index"}, "c901e957": {"dfnID":"c901e957","dfnText":"pre","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-white-space-pre"}],"title":"3.2. Content outside the page box"}],"url":"https://drafts.csswg.org/css-text-4/#valdef-white-space-pre"}, "ca62982f": {"dfnID":"ca62982f","dfnText":"padding-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-bottom"},{"id":"ref-for-propdef-padding-bottom\u2460"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding-bottom"}, "cbfeec00": {"dfnID":"cbfeec00","dfnText":"margin-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-bottom"},{"id":"ref-for-propdef-margin-bottom\u2460"},{"id":"ref-for-propdef-margin-bottom\u2461"},{"id":"ref-for-propdef-margin-bottom\u2462"},{"id":"ref-for-propdef-margin-bottom\u2463"},{"id":"ref-for-propdef-margin-bottom\u2464"},{"id":"ref-for-propdef-margin-bottom\u2465"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-bottom"}, "containing-block": {"dfnID":"containing-block","dfnText":"containing block","external":false,"refSections":[{"refs":[{"id":"ref-for-containing-block"},{"id":"ref-for-containing-block\u2460"}],"title":"3. The Page Model"},{"refs":[{"id":"ref-for-containing-block\u2461"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"}],"url":"#containing-block"}, "content-empty": {"dfnID":"content-empty","dfnText":"Content-empty page","external":false,"refSections":[{"refs":[{"id":"ref-for-content-empty"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"#content-empty"}, "d4858c02": {"dfnID":"d4858c02","dfnText":"min-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-min-width"},{"id":"ref-for-propdef-min-width\u2460"},{"id":"ref-for-propdef-min-width\u2461"}],"title":"5.3. Computing Page-margin Box Dimensions"},{"refs":[{"id":"ref-for-propdef-min-width\u2462"},{"id":"ref-for-propdef-min-width\u2463"},{"id":"ref-for-propdef-min-width\u2464"},{"id":"ref-for-propdef-min-width\u2465"},{"id":"ref-for-propdef-min-width\u2466"}],"title":"5.3.2.3. Handling min-width and max-width"}],"url":"https://drafts.csswg.org/css2/#propdef-min-width"}, "d4d68fad": {"dfnID":"d4d68fad","dfnText":"normal","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-content-normal"}],"title":"6. \nPage Properties"}],"url":"https://drafts.csswg.org/css-content-3/#valdef-content-normal"}, "d97c40f4": {"dfnID":"d97c40f4","dfnText":"principal writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-principal-writing-mode"}],"title":"3.3. Page Progression"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#principal-writing-mode"}, "db91c914": {"dfnID":"db91c914","dfnText":"min-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-min-height"},{"id":"ref-for-propdef-min-height\u2460"},{"id":"ref-for-propdef-min-height\u2461"}],"title":"5.3. Computing Page-margin Box Dimensions"}],"url":"https://drafts.csswg.org/css2/#propdef-min-height"}, "dbc6e616": {"dfnID":"dbc6e616","dfnText":"right","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-break-before-right"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-right"}, "dd0f8cfb": {"dfnID":"dd0f8cfb","dfnText":"border-bottom-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-width"},{"id":"ref-for-propdef-border-bottom-width\u2460"}],"title":"5.3.3. Page-Margin Box Fixed Dimension Computation Rules"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width"}, "dd1ccb1e": {"dfnID":"dd1ccb1e","dfnText":"max-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-max-height"}],"title":"5.3. Computing Page-margin Box Dimensions"}],"url":"https://drafts.csswg.org/css2/#propdef-max-height"}, "descdef-page-bleed": {"dfnID":"descdef-page-bleed","dfnText":"bleed","external":false,"refSections":[],"url":"#descdef-page-bleed"}, "descdef-page-marks": {"dfnID":"descdef-page-marks","dfnText":"marks","external":false,"refSections":[],"url":"#descdef-page-marks"}, "descdef-page-page-orientation": {"dfnID":"descdef-page-page-orientation","dfnText":"page-orientation","external":false,"refSections":[],"url":"#descdef-page-page-orientation"}, "descdef-page-size": {"dfnID":"descdef-page-size","dfnText":"size","external":false,"refSections":[{"refs":[{"id":"ref-for-descdef-page-size"},{"id":"ref-for-descdef-page-size\u2460"},{"id":"ref-for-descdef-page-size\u2461"}],"title":"7.1.2. \nRotating The Printed Page: the page-orientation property"}],"url":"#descdef-page-size"}, "duplex-printing": {"dfnID":"duplex-printing","dfnText":"Duplex Printing","external":false,"refSections":[],"url":"#duplex-printing"}, "e0b6ed58": {"dfnID":"e0b6ed58","dfnText":"vertical-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-vertical-align"}],"title":"6. \nPage Properties"},{"refs":[{"id":"ref-for-propdef-vertical-align\u2460"}],"title":"6.2. \nPage-margin boxes and default values"}],"url":"https://drafts.csswg.org/css-inline-3/#propdef-vertical-align"}, "e0ee1990": {"dfnID":"e0ee1990","dfnText":"ex","external":true,"refSections":[{"refs":[{"id":"ref-for-ex"},{"id":"ref-for-ex\u2460"}],"title":"6. \nPage Properties"},{"refs":[{"id":"ref-for-ex\u2461"}],"title":"7.1. \nPage size: the size property"}],"url":"https://drafts.csswg.org/css-values-4/#ex"}, "e274345c": {"dfnID":"e274345c","dfnText":"<custom-ident>","external":true,"refSections":[{"refs":[{"id":"ref-for-identifier-value"}],"title":"8.1. \nUsing named pages: page"}],"url":"https://drafts.csswg.org/css-values-4/#identifier-value"}, "e8ff0bb4": {"dfnID":"e8ff0bb4","dfnText":"em","external":true,"refSections":[{"refs":[{"id":"ref-for-em"},{"id":"ref-for-em\u2460"}],"title":"6. \nPage Properties"},{"refs":[{"id":"ref-for-em\u2461"}],"title":"7.1. \nPage size: the size property"}],"url":"https://drafts.csswg.org/css-values-4/#em"}, "eedc5d96": {"dfnID":"eedc5d96","dfnText":"counter-increment","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-counter-increment"},{"id":"ref-for-propdef-counter-increment\u2460"},{"id":"ref-for-propdef-counter-increment\u2461"},{"id":"ref-for-propdef-counter-increment\u2462"}],"title":"6.1. \nPage-based counters"}],"url":"https://drafts.csswg.org/css2/#propdef-counter-increment"}, "end-page-value": {"dfnID":"end-page-value","dfnText":"end page value","external":false,"refSections":[{"refs":[{"id":"ref-for-end-page-value"},{"id":"ref-for-end-page-value\u2460"}],"title":"8.1. \nUsing named pages: page"}],"url":"#end-page-value"}, "f95a7c3b": {"dfnID":"f95a7c3b","dfnText":"background-attachment","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-attachment"}],"title":"3.1. \nPage Backgrounds and Painting Order"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-attachment"}, "facing-pages": {"dfnID":"facing-pages","dfnText":"Facing Pages","external":false,"refSections":[],"url":"#facing-pages"}, "fb030e6c": {"dfnID":"fb030e6c","dfnText":"<length>","external":true,"refSections":[{"refs":[{"id":"ref-for-length-value"},{"id":"ref-for-length-value\u2460"},{"id":"ref-for-length-value\u2461"}],"title":"7.1. \nPage size: the size property"},{"refs":[{"id":"ref-for-length-value\u2462"},{"id":"ref-for-length-value\u2463"}],"title":"7.3. \nBleed Area: the bleed property"}],"url":"https://drafts.csswg.org/css-values-4/#length-value"}, "fdf6efd5": {"dfnID":"fdf6efd5","dfnText":"font-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-size"},{"id":"ref-for-propdef-font-size\u2460"},{"id":"ref-for-propdef-font-size\u2461"},{"id":"ref-for-propdef-font-size\u2462"}],"title":"6. \nPage Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-size"}, "flex-factor": {"dfnID":"flex-factor","dfnText":"flex factor","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-factor"},{"id":"ref-for-flex-factor\u2460"},{"id":"ref-for-flex-factor\u2461"},{"id":"ref-for-flex-factor\u2462"},{"id":"ref-for-flex-factor\u2463"},{"id":"ref-for-flex-factor\u2464"},{"id":"ref-for-flex-factor\u2465"}],"title":"5.3.2.2. Resolving auto widths"}],"url":"#flex-factor"}, "flex-space": {"dfnID":"flex-space","dfnText":"flex space","external":false,"refSections":[{"refs":[{"id":"ref-for-flex-space"},{"id":"ref-for-flex-space\u2460"},{"id":"ref-for-flex-space\u2461"}],"title":"5.3.2.2. Resolving auto widths"}],"url":"#flex-space"}, "generated": {"dfnID":"generated","dfnText":"generated","external":false,"refSections":[{"refs":[{"id":"ref-for-generated"},{"id":"ref-for-generated\u2460"},{"id":"ref-for-generated\u2461"}],"title":"5.3.2.2. Resolving auto widths"}],"url":"#generated"}, "landscape": {"dfnID":"landscape","dfnText":"Landscape Orientation","external":false,"refSections":[],"url":"#landscape"}, "left-page": {"dfnID":"left-page","dfnText":"Left Page","external":false,"refSections":[{"refs":[{"id":"ref-for-left-page"}],"title":"4.2.1. \nSpread pseudo-classes: :left, :right"},{"refs":[{"id":"ref-for-left-page\u2460"}],"title":"5. Page-Margin Boxes"}],"url":"#left-page"}, "margin-at-rule": {"dfnID":"margin-at-rule","dfnText":"margin at-rule","external":false,"refSections":[{"refs":[{"id":"ref-for-margin-at-rule"}],"title":"4.1. \nThe @page Rule"},{"refs":[{"id":"ref-for-margin-at-rule\u2460"},{"id":"ref-for-margin-at-rule\u2461"}],"title":"4.3. @page rule grammar"},{"refs":[{"id":"ref-for-margin-at-rule\u2462"}],"title":"5.1. At-rules for page-margin boxes"}],"url":"#margin-at-rule"}, "margin-context": {"dfnID":"margin-context","dfnText":"margin context","external":false,"refSections":[{"refs":[{"id":"ref-for-margin-context"}],"title":"3. The Page Model"},{"refs":[{"id":"ref-for-margin-context\u2460"}],"title":"6. \nPage Properties"}],"url":"#margin-context"}, "match": {"dfnID":"match","dfnText":"match","external":false,"refSections":[{"refs":[{"id":"ref-for-match"}],"title":"4.1. \nThe @page Rule"},{"refs":[{"id":"ref-for-match\u2460"}],"title":"4.2. Page selectors"},{"refs":[{"id":"ref-for-match\u2461"}],"title":"4.2.1. \nSpread pseudo-classes: :left, :right"},{"refs":[{"id":"ref-for-match\u2462"}],"title":"4.2.2. \nFirst-page pseudo-class: :first"},{"refs":[{"id":"ref-for-match\u2463"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"#match"}, "max-content-width": {"dfnID":"max-content-width","dfnText":"max-content width","external":false,"refSections":[{"refs":[{"id":"ref-for-max-content-width"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"},{"refs":[{"id":"ref-for-max-content-width\u2460"},{"id":"ref-for-max-content-width\u2461"},{"id":"ref-for-max-content-width\u2462"},{"id":"ref-for-max-content-width\u2463"}],"title":"5.3.2.2. Resolving auto widths"}],"url":"#max-content-width"}, "min-content-width": {"dfnID":"min-content-width","dfnText":"min-content width","external":false,"refSections":[{"refs":[{"id":"ref-for-min-content-width"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"},{"refs":[{"id":"ref-for-min-content-width\u2460"},{"id":"ref-for-min-content-width\u2461"},{"id":"ref-for-min-content-width\u2462"},{"id":"ref-for-min-content-width\u2463"}],"title":"5.3.2.2. Resolving auto widths"}],"url":"#min-content-width"}, "named-page": {"dfnID":"named-page","dfnText":"named page","external":false,"refSections":[],"url":"#named-page"}, "outer-max-width": {"dfnID":"outer-max-width","dfnText":"outer max width","external":false,"refSections":[],"url":"#outer-max-width"}, "outer-min-width": {"dfnID":"outer-min-width","dfnText":"outer min width","external":false,"refSections":[],"url":"#outer-min-width"}, "outer-width": {"dfnID":"outer-width","dfnText":"outer width","external":false,"refSections":[{"refs":[{"id":"ref-for-outer-width"},{"id":"ref-for-outer-width\u2460"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"},{"refs":[{"id":"ref-for-outer-width\u2461"},{"id":"ref-for-outer-width\u2462"},{"id":"ref-for-outer-width\u2463"}],"title":"5.3.2.2. Resolving auto widths"}],"url":"#outer-width"}, "page-area": {"dfnID":"page-area","dfnText":"page area","external":false,"refSections":[],"url":"#page-area"}, "page-box": {"dfnID":"page-box","dfnText":"page box","external":false,"refSections":[{"refs":[{"id":"ref-for-page-box"}],"title":"2. \nPage Terminology"},{"refs":[{"id":"ref-for-page-box\u2460"}],"title":"3. The Page Model"},{"refs":[{"id":"ref-for-page-box\u2461"},{"id":"ref-for-page-box\u2462"},{"id":"ref-for-page-box\u2463"},{"id":"ref-for-page-box\u2464"}],"title":"5.3.1. \nPage-Margin Box Layout Terminology"},{"refs":[{"id":"ref-for-page-box\u2465"}],"title":"7.1. \nPage size: the size property"},{"refs":[{"id":"ref-for-page-box\u2466"}],"title":"7.3. \nBleed Area: the bleed property"},{"refs":[{"id":"ref-for-page-box\u2467"}],"title":"8. \n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\tPage Breaks\n"}],"url":"#page-box"}, "page-context": {"dfnID":"page-context","dfnText":"page context","external":false,"refSections":[{"refs":[{"id":"ref-for-page-context"},{"id":"ref-for-page-context\u2460"}],"title":"3. The Page Model"},{"refs":[{"id":"ref-for-page-context"}],"title":"5.1. At-rules for page-margin boxes"},{"refs":[{"id":"ref-for-page-context\u2461"}],"title":"6. \nPage Properties"},{"refs":[{"id":"ref-for-page-context\u2462"}],"title":"6.1. \nPage-based counters"}],"url":"#page-context"}, "page-footer": {"dfnID":"page-footer","dfnText":"page footer","external":false,"refSections":[],"url":"#page-footer"}, "page-header": {"dfnID":"page-header","dfnText":"page header","external":false,"refSections":[],"url":"#page-header"}, "page-margin-boxes": {"dfnID":"page-margin-boxes","dfnText":"page-margin boxes","external":false,"refSections":[{"refs":[{"id":"ref-for-page-margin-boxes"}],"title":"3. The Page Model"}],"url":"#page-margin-boxes"}, "page-margin-property": {"dfnID":"page-margin-property","dfnText":"page-margin properties","external":false,"refSections":[{"refs":[{"id":"ref-for-page-margin-property"}],"title":"4.3. @page rule grammar"}],"url":"#page-margin-property"}, "page-orientation": {"dfnID":"page-orientation","dfnText":"Page Orientation","external":false,"refSections":[],"url":"#page-orientation"}, "page-progression": {"dfnID":"page-progression","dfnText":"page progression","external":false,"refSections":[{"refs":[{"id":"ref-for-page-progression"},{"id":"ref-for-page-progression\u2460"},{"id":"ref-for-page-progression\u2461"},{"id":"ref-for-page-progression\u2462"}],"title":"3.3. Page Progression"}],"url":"#page-progression"}, "page-property": {"dfnID":"page-property","dfnText":"page properties","external":false,"refSections":[{"refs":[{"id":"ref-for-page-property"}],"title":"4.3. @page rule grammar"}],"url":"#page-property"}, "page-pseudo-class": {"dfnID":"page-pseudo-class","dfnText":"page pseudo-class","external":false,"refSections":[{"refs":[{"id":"ref-for-page-pseudo-class"},{"id":"ref-for-page-pseudo-class\u2460"},{"id":"ref-for-page-pseudo-class\u2461"}],"title":"4.2. Page selectors"}],"url":"#page-pseudo-class"}, "page-selector": {"dfnID":"page-selector","dfnText":"page selector","external":false,"refSections":[{"refs":[{"id":"ref-for-page-selector"},{"id":"ref-for-page-selector\u2460"}],"title":"2. \nPage Terminology"},{"refs":[{"id":"ref-for-page-selector\u2461"}],"title":"4.1. \nThe @page Rule"},{"refs":[{"id":"ref-for-page-selector\u2462"}],"title":"4.2. Page selectors"}],"url":"#page-selector"}, "page-sheet": {"dfnID":"page-sheet","dfnText":"Page sheet","external":false,"refSections":[{"refs":[{"id":"ref-for-page-sheet"}],"title":"7.1. \nPage size: the size property"}],"url":"#page-sheet"}, "page-type-selector": {"dfnID":"page-type-selector","dfnText":"page type selector","external":false,"refSections":[{"refs":[{"id":"ref-for-page-type-selector"}],"title":"4.2. Page selectors"}],"url":"#page-type-selector"}, "portrait": {"dfnID":"portrait","dfnText":"Portrait Orientation","external":false,"refSections":[],"url":"#portrait"}, "printable-area": {"dfnID":"printable-area","dfnText":"Printable and non-printable areas","external":false,"refSections":[],"url":"#printable-area"}, "propdef-page": {"dfnID":"propdef-page","dfnText":"page","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-page"}],"title":"4.2. Page selectors"},{"refs":[{"id":"ref-for-propdef-page\u2460"},{"id":"ref-for-propdef-page\u2461"},{"id":"ref-for-propdef-page\u2462"},{"id":"ref-for-propdef-page\u2463"},{"id":"ref-for-propdef-page\u2464"},{"id":"ref-for-propdef-page\u2465"},{"id":"ref-for-propdef-page\u2466"},{"id":"ref-for-propdef-page\u2467"},{"id":"ref-for-propdef-page\u2468"},{"id":"ref-for-propdef-page\u2460\u24ea"},{"id":"ref-for-propdef-page\u2460\u2460"},{"id":"ref-for-propdef-page\u2460\u2461"},{"id":"ref-for-propdef-page\u2460\u2462"}],"title":"8.1. \nUsing named pages: page"}],"url":"#propdef-page"}, "right-page": {"dfnID":"right-page","dfnText":"Right Page","external":false,"refSections":[{"refs":[{"id":"ref-for-right-page"}],"title":"4.2.1. \nSpread pseudo-classes: :left, :right"},{"refs":[{"id":"ref-for-right-page\u2460"}],"title":"5. Page-Margin Boxes"}],"url":"#right-page"}, "signature": {"dfnID":"signature","dfnText":"signature","external":false,"refSections":[],"url":"#signature"}, "specificity": {"dfnID":"specificity","dfnText":"specificity","external":false,"refSections":[{"refs":[{"id":"ref-for-specificity"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"#specificity"}, "start-page-value": {"dfnID":"start-page-value","dfnText":"start page value","external":false,"refSections":[{"refs":[{"id":"ref-for-start-page-value"},{"id":"ref-for-start-page-value\u2460"},{"id":"ref-for-start-page-value\u2461"}],"title":"8.1. \nUsing named pages: page"}],"url":"#start-page-value"}, "typedef-page-selector": {"dfnID":"typedef-page-selector","dfnText":"<page-selector>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-page-selector"}],"title":"4.2. Page selectors"},{"refs":[{"id":"ref-for-typedef-page-selector\u2460"},{"id":"ref-for-typedef-page-selector\u2461"},{"id":"ref-for-typedef-page-selector\u2462"}],"title":"4.3. @page rule grammar"}],"url":"#typedef-page-selector"}, "typedef-page-selector-list": {"dfnID":"typedef-page-selector-list","dfnText":"<page-selector-list>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-page-selector-list"},{"id":"ref-for-typedef-page-selector-list\u2460"}],"title":"4.3. @page rule grammar"}],"url":"#typedef-page-selector-list"}, "typedef-page-size-page-size": {"dfnID":"typedef-page-size-page-size","dfnText":"<page-size>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-page-size-page-size"},{"id":"ref-for-typedef-page-size-page-size\u2460"},{"id":"ref-for-typedef-page-size-page-size\u2461"},{"id":"ref-for-typedef-page-size-page-size\u2462"},{"id":"ref-for-typedef-page-size-page-size\u2463"}],"title":"7.1. \nPage size: the size property"}],"url":"#typedef-page-size-page-size"}, "typedef-pseudo-page": {"dfnID":"typedef-pseudo-page","dfnText":"<pseudo-page>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-pseudo-page"},{"id":"ref-for-typedef-pseudo-page\u2460"},{"id":"ref-for-typedef-pseudo-page\u2461"}],"title":"4.3. @page rule grammar"}],"url":"#typedef-pseudo-page"}, "valdef-page-blank": {"dfnID":"valdef-page-blank","dfnText":":blank","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-blank"},{"id":"ref-for-valdef-page-blank\u2460"},{"id":"ref-for-valdef-page-blank\u2461"}],"title":"4.2.3. \nBlank-page pseudo-class: :blank"}],"url":"#valdef-page-blank"}, "valdef-page-bleed-auto": {"dfnID":"valdef-page-bleed-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-bleed-auto"}],"title":"\nChanges"}],"url":"#valdef-page-bleed-auto"}, "valdef-page-bleed-length": {"dfnID":"valdef-page-bleed-length","dfnText":"<length>","external":false,"refSections":[],"url":"#valdef-page-bleed-length"}, "valdef-page-first": {"dfnID":"valdef-page-first","dfnText":":first","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-first"}],"title":"4.2.2. \nFirst-page pseudo-class: :first"}],"url":"#valdef-page-first"}, "valdef-page-left": {"dfnID":"valdef-page-left","dfnText":":left","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-left"}],"title":"2. \nPage Terminology"},{"refs":[{"id":"ref-for-valdef-page-left\u2460"},{"id":"ref-for-valdef-page-left\u2461"},{"id":"ref-for-valdef-page-left\u2462"}],"title":"4.2.1. \nSpread pseudo-classes: :left, :right"}],"url":"#valdef-page-left"}, "valdef-page-marks-crop": {"dfnID":"valdef-page-marks-crop","dfnText":"crop","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-marks-crop"}],"title":"7.3. \nBleed Area: the bleed property"}],"url":"#valdef-page-marks-crop"}, "valdef-page-marks-cross": {"dfnID":"valdef-page-marks-cross","dfnText":"cross","external":false,"refSections":[],"url":"#valdef-page-marks-cross"}, "valdef-page-marks-none": {"dfnID":"valdef-page-marks-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-marks-none"}],"title":"\nChanges"}],"url":"#valdef-page-marks-none"}, "valdef-page-orientation-rotate-left": {"dfnID":"valdef-page-orientation-rotate-left","dfnText":"rotate-left","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-orientation-rotate-left"}],"title":"7.1.2. \nRotating The Printed Page: the page-orientation property"}],"url":"#valdef-page-orientation-rotate-left"}, "valdef-page-orientation-rotate-right": {"dfnID":"valdef-page-orientation-rotate-right","dfnText":"rotate-right","external":false,"refSections":[],"url":"#valdef-page-orientation-rotate-right"}, "valdef-page-orientation-upright": {"dfnID":"valdef-page-orientation-upright","dfnText":"upright","external":false,"refSections":[],"url":"#valdef-page-orientation-upright"}, "valdef-page-right": {"dfnID":"valdef-page-right","dfnText":":right","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-right"}],"title":"2. \nPage Terminology"},{"refs":[{"id":"ref-for-valdef-page-right\u2460"},{"id":"ref-for-valdef-page-right\u2461"},{"id":"ref-for-valdef-page-right\u2462"}],"title":"4.2.1. \nSpread pseudo-classes: :left, :right"}],"url":"#valdef-page-right"}, "valdef-page-size-a3": {"dfnID":"valdef-page-size-a3","dfnText":"A3","external":false,"refSections":[],"url":"#valdef-page-size-a3"}, "valdef-page-size-a4": {"dfnID":"valdef-page-size-a4","dfnText":"A4","external":false,"refSections":[],"url":"#valdef-page-size-a4"}, "valdef-page-size-a5": {"dfnID":"valdef-page-size-a5","dfnText":"A5","external":false,"refSections":[],"url":"#valdef-page-size-a5"}, "valdef-page-size-auto": {"dfnID":"valdef-page-size-auto","dfnText":"auto","external":false,"refSections":[],"url":"#valdef-page-size-auto"}, "valdef-page-size-b4": {"dfnID":"valdef-page-size-b4","dfnText":"B4","external":false,"refSections":[],"url":"#valdef-page-size-b4"}, "valdef-page-size-b5": {"dfnID":"valdef-page-size-b5","dfnText":"B5","external":false,"refSections":[],"url":"#valdef-page-size-b5"}, "valdef-page-size-jis-b4": {"dfnID":"valdef-page-size-jis-b4","dfnText":"JIS-B4","external":false,"refSections":[],"url":"#valdef-page-size-jis-b4"}, "valdef-page-size-jis-b5": {"dfnID":"valdef-page-size-jis-b5","dfnText":"JIS-B5","external":false,"refSections":[],"url":"#valdef-page-size-jis-b5"}, "valdef-page-size-landscape": {"dfnID":"valdef-page-size-landscape","dfnText":"landscape","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-size-landscape"}],"title":"2. \nPage Terminology"},{"refs":[{"id":"ref-for-valdef-page-size-landscape\u2460"}],"title":"7.1. \nPage size: the size property"},{"refs":[{"id":"ref-for-valdef-page-size-landscape\u2461"}],"title":"7.1.2. \nRotating The Printed Page: the page-orientation property"}],"url":"#valdef-page-size-landscape"}, "valdef-page-size-ledger": {"dfnID":"valdef-page-size-ledger","dfnText":"ledger","external":false,"refSections":[],"url":"#valdef-page-size-ledger"}, "valdef-page-size-legal": {"dfnID":"valdef-page-size-legal","dfnText":"legal","external":false,"refSections":[],"url":"#valdef-page-size-legal"}, "valdef-page-size-length-0": {"dfnID":"valdef-page-size-length-0","dfnText":"<length [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-page-size-length-0"}, "valdef-page-size-letter": {"dfnID":"valdef-page-size-letter","dfnText":"letter","external":false,"refSections":[],"url":"#valdef-page-size-letter"}, "valdef-page-size-portrait": {"dfnID":"valdef-page-size-portrait","dfnText":"portrait","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-page-size-portrait"}],"title":"2. \nPage Terminology"},{"refs":[{"id":"ref-for-valdef-page-size-portrait\u2460"},{"id":"ref-for-valdef-page-size-portrait\u2461"}],"title":"7.1. \nPage size: the size property"},{"refs":[{"id":"ref-for-valdef-page-size-portrait\u2462"}],"title":"7.1.2. \nRotating The Printed Page: the page-orientation property"}],"url":"#valdef-page-size-portrait"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", 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, class:"dfn-link"}, url), refSections.length == 0 ? [] : 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})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "#typedef-page-size-page-size": "Expands to: a3 | a4 | a5 | b4 | b5 | jis-b4 | jis-b5 | ledger | legal | letter", "https://drafts.csswg.org/css-values-4/#length-value": "Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#at-ruledef-bottom-center": {"displayText":"@bottom-center","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@bottom-center","type":"at-rule","url":"#at-ruledef-bottom-center"}, "#at-ruledef-bottom-left": {"displayText":"@bottom-left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@bottom-left","type":"at-rule","url":"#at-ruledef-bottom-left"}, "#at-ruledef-bottom-left-corner": {"displayText":"@bottom-left-corner","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@bottom-left-corner","type":"at-rule","url":"#at-ruledef-bottom-left-corner"}, "#at-ruledef-bottom-right": {"displayText":"@bottom-right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@bottom-right","type":"at-rule","url":"#at-ruledef-bottom-right"}, "#at-ruledef-bottom-right-corner": {"displayText":"@bottom-right-corner","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@bottom-right-corner","type":"at-rule","url":"#at-ruledef-bottom-right-corner"}, "#at-ruledef-left-bottom": {"displayText":"@left-bottom","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@left-bottom","type":"at-rule","url":"#at-ruledef-left-bottom"}, "#at-ruledef-left-middle": {"displayText":"@left-middle","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@left-middle","type":"at-rule","url":"#at-ruledef-left-middle"}, "#at-ruledef-left-top": {"displayText":"@left-top","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@left-top","type":"at-rule","url":"#at-ruledef-left-top"}, "#at-ruledef-page": {"displayText":"@page","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@page","type":"at-rule","url":"#at-ruledef-page"}, "#at-ruledef-right-bottom": {"displayText":"@right-bottom","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@right-bottom","type":"at-rule","url":"#at-ruledef-right-bottom"}, "#at-ruledef-right-middle": {"displayText":"@right-middle","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@right-middle","type":"at-rule","url":"#at-ruledef-right-middle"}, "#at-ruledef-right-top": {"displayText":"@right-top","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@right-top","type":"at-rule","url":"#at-ruledef-right-top"}, "#at-ruledef-top-center": {"displayText":"@top-center","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@top-center","type":"at-rule","url":"#at-ruledef-top-center"}, "#at-ruledef-top-left": {"displayText":"@top-left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@top-left","type":"at-rule","url":"#at-ruledef-top-left"}, "#at-ruledef-top-left-corner": {"displayText":"@top-left-corner","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@top-left-corner","type":"at-rule","url":"#at-ruledef-top-left-corner"}, "#at-ruledef-top-right": {"displayText":"@top-right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@top-right","type":"at-rule","url":"#at-ruledef-top-right"}, "#at-ruledef-top-right-corner": {"displayText":"@top-right-corner","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"@top-right-corner","type":"at-rule","url":"#at-ruledef-top-right-corner"}, "#available-height": {"displayText":"available height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"available height","type":"dfn","url":"#available-height"}, "#available-width": {"displayText":"available width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"available width","type":"dfn","url":"#available-width"}, "#binding-edge": {"displayText":"binding edge","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"binding edge","type":"dfn","url":"#binding-edge"}, "#bleed-area": {"displayText":"bleed area","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"bleed area","type":"dfn","url":"#bleed-area"}, "#containing-block": {"displayText":"containing block","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"containing block","type":"dfn","url":"#containing-block"}, "#content-empty": {"displayText":"content-empty page","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"content-empty page","type":"dfn","url":"#content-empty"}, "#descdef-page-bleed": {"displayText":"bleed","export":true,"for_":["@page"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"bleed","type":"descriptor","url":"#descdef-page-bleed"}, "#descdef-page-marks": {"displayText":"marks","export":true,"for_":["@page"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"marks","type":"descriptor","url":"#descdef-page-marks"}, "#descdef-page-page-orientation": {"displayText":"page-orientation","export":true,"for_":["@page"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page-orientation","type":"descriptor","url":"#descdef-page-page-orientation"}, "#descdef-page-size": {"displayText":"size","export":true,"for_":["@page"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"size","type":"descriptor","url":"#descdef-page-size"}, "#end-page-value": {"displayText":"end page value","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"end page value","type":"dfn","url":"#end-page-value"}, "#flex-factor": {"displayText":"flex factor","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"flex factor","type":"dfn","url":"#flex-factor"}, "#flex-space": {"displayText":"flex space","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"flex space","type":"dfn","url":"#flex-space"}, "#generated": {"displayText":"generated","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"generated","type":"dfn","url":"#generated"}, "#left-page": {"displayText":"left page","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"left page","type":"dfn","url":"#left-page"}, "#margin-at-rule": {"displayText":"margin at-rule","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"margin at-rule","type":"dfn","url":"#margin-at-rule"}, "#margin-context": {"displayText":"margin context","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"margin context","type":"dfn","url":"#margin-context"}, "#match": {"displayText":"match","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"match","type":"dfn","url":"#match"}, "#max-content-width": {"displayText":"max-content width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"max-content width","type":"dfn","url":"#max-content-width"}, "#min-content-width": {"displayText":"min-content width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"min-content width","type":"dfn","url":"#min-content-width"}, "#outer-width": {"displayText":"outer width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"outer width","type":"dfn","url":"#outer-width"}, "#page-box": {"displayText":"page box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page box","type":"dfn","url":"#page-box"}, "#page-context": {"displayText":"page context","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page context","type":"dfn","url":"#page-context"}, "#page-margin-boxes": {"displayText":"page-margin boxes","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page-margin boxes","type":"dfn","url":"#page-margin-boxes"}, "#page-margin-property": {"displayText":"page-margin property","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page-margin property","type":"dfn","url":"#page-margin-property"}, "#page-progression": {"displayText":"page progression","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page progression","type":"dfn","url":"#page-progression"}, "#page-property": {"displayText":"page property","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page property","type":"dfn","url":"#page-property"}, "#page-pseudo-class": {"displayText":"page pseudo-class","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page pseudo-class","type":"dfn","url":"#page-pseudo-class"}, "#page-selector": {"displayText":"page selector","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page selector","type":"dfn","url":"#page-selector"}, "#page-sheet": {"displayText":"page sheet","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page sheet","type":"dfn","url":"#page-sheet"}, "#page-type-selector": {"displayText":"page type selector","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page type selector","type":"dfn","url":"#page-type-selector"}, "#propdef-page": {"displayText":"page","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"page","type":"property","url":"#propdef-page"}, "#right-page": {"displayText":"right page","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"right page","type":"dfn","url":"#right-page"}, "#specificity": {"displayText":"specificity","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"specificity","type":"dfn","url":"#specificity"}, "#start-page-value": {"displayText":"start page value","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"start page value","type":"dfn","url":"#start-page-value"}, "#typedef-page-selector": {"displayText":"<page-selector>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"<page-selector>","type":"type","url":"#typedef-page-selector"}, "#typedef-page-selector-list": {"displayText":"<page-selector-list>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"<page-selector-list>","type":"type","url":"#typedef-page-selector-list"}, "#typedef-page-size-page-size": {"displayText":"<page-size>","export":true,"for_":["@page/size","size"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"<page-size>","type":"type","url":"#typedef-page-size-page-size"}, "#typedef-pseudo-page": {"displayText":"<pseudo-page>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"<pseudo-page>","type":"type","url":"#typedef-pseudo-page"}, "#valdef-page-blank": {"displayText":":blank","export":true,"for_":["@page"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":":blank","type":"value","url":"#valdef-page-blank"}, "#valdef-page-bleed-auto": {"displayText":"auto","export":true,"for_":["@page/bleed","bleed"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"auto","type":"value","url":"#valdef-page-bleed-auto"}, "#valdef-page-first": {"displayText":":first","export":true,"for_":["@page"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":":first","type":"value","url":"#valdef-page-first"}, "#valdef-page-left": {"displayText":":left","export":true,"for_":["@page"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":":left","type":"value","url":"#valdef-page-left"}, "#valdef-page-marks-crop": {"displayText":"crop","export":true,"for_":["@page/marks","marks"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"crop","type":"value","url":"#valdef-page-marks-crop"}, "#valdef-page-marks-none": {"displayText":"none","export":true,"for_":["@page/marks","marks"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"none","type":"value","url":"#valdef-page-marks-none"}, "#valdef-page-orientation-rotate-left": {"displayText":"rotate-left","export":true,"for_":["page-orientation"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"rotate-left","type":"value","url":"#valdef-page-orientation-rotate-left"}, "#valdef-page-right": {"displayText":":right","export":true,"for_":["@page"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":":right","type":"value","url":"#valdef-page-right"}, "#valdef-page-size-landscape": {"displayText":"landscape","export":true,"for_":["@page/size","size"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"landscape","type":"value","url":"#valdef-page-size-landscape"}, "#valdef-page-size-portrait": {"displayText":"portrait","export":true,"for_":["@page/size","size"],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"local","text":"portrait","type":"value","url":"#valdef-page-size-portrait"}, "https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-size-height": {"displayText":"height","export":true,"for_":["anchor-size()"],"level":"1","normative":true,"shortname":"css-anchor-position","spec":"css-anchor-position-1","status":"current","text":"height","type":"value","url":"https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-size-height"}, "https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-size-width": {"displayText":"width","export":true,"for_":["anchor-size()"],"level":"1","normative":true,"shortname":"css-anchor-position","spec":"css-anchor-position-1","status":"current","text":"width","type":"value","url":"https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-size-width"}, "https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area": {"displayText":"background positioning area","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background positioning area","type":"dfn","url":"https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-attachment": {"displayText":"background-attachment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-attachment","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-attachment"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip": {"displayText":"background-clip","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-clip","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin": {"displayText":"background-origin","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-origin","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width": {"displayText":"border-bottom-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width": {"displayText":"border-top-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "https://drafts.csswg.org/css-backgrounds-3/#valdef-background-attachment-fixed": {"displayText":"fixed","export":true,"for_":["background-attachment"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"fixed","type":"value","url":"https://drafts.csswg.org/css-backgrounds-3/#valdef-background-attachment-fixed"}, "https://drafts.csswg.org/css-backgrounds-4/#background-painting-area": {"displayText":"background painting area","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-4","status":"current","text":"background painting area","type":"dfn","url":"https://drafts.csswg.org/css-backgrounds-4/#background-painting-area"}, "https://drafts.csswg.org/css-box-4/#outer-edge": {"displayText":"outer edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"outer edge","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#outer-edge"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-bottom": {"displayText":"margin-bottom","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-bottom","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-bottom"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-left": {"displayText":"margin-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-left","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-left"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-right": {"displayText":"margin-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-right","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-right"}, "https://drafts.csswg.org/css-box-4/#propdef-margin-top": {"displayText":"margin-top","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin-top","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin-top"}, "https://drafts.csswg.org/css-box-4/#propdef-padding-bottom": {"displayText":"padding-bottom","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding-bottom","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding-bottom"}, "https://drafts.csswg.org/css-box-4/#propdef-padding-top": {"displayText":"padding-top","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding-top","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding-top"}, "https://drafts.csswg.org/css-break-3/#propdef-break-before": {"displayText":"break-before","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"break-before","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-break-before"}, "https://drafts.csswg.org/css-break-3/#propdef-break-inside": {"displayText":"break-inside","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"break-inside","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-break-inside"}, "https://drafts.csswg.org/css-break-3/#propdef-orphans": {"displayText":"orphans","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"orphans","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-orphans"}, "https://drafts.csswg.org/css-break-4/#forced-break": {"displayText":"forced break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"forced break","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#forced-break"}, "https://drafts.csswg.org/css-break-4/#fragmentation": {"displayText":"fragmentation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmentation","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmentation"}, "https://drafts.csswg.org/css-break-4/#propdef-break-after": {"displayText":"break-after","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"break-after","type":"property","url":"https://drafts.csswg.org/css-break-4/#propdef-break-after"}, "https://drafts.csswg.org/css-break-4/#propdef-widows": {"displayText":"widows","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"widows","type":"property","url":"https://drafts.csswg.org/css-break-4/#propdef-widows"}, "https://drafts.csswg.org/css-break-4/#valdef-break-before-left": {"displayText":"left","export":true,"for_":["break-before","break-after"],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"left","type":"value","url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-left"}, "https://drafts.csswg.org/css-break-4/#valdef-break-before-recto": {"displayText":"recto","export":true,"for_":["break-before","break-after"],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"recto","type":"value","url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-recto"}, "https://drafts.csswg.org/css-break-4/#valdef-break-before-right": {"displayText":"right","export":true,"for_":["break-before","break-after"],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"right","type":"value","url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-right"}, "https://drafts.csswg.org/css-break-4/#valdef-break-before-verso": {"displayText":"verso","export":true,"for_":["break-before","break-after"],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"verso","type":"value","url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-verso"}, "https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit": {"displayText":"inherit","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"inherit","type":"value","url":"https://drafts.csswg.org/css-cascade-5/#valdef-all-inherit"}, "https://drafts.csswg.org/css-content-3/#propdef-content": {"displayText":"content","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-content","spec":"css-content-3","status":"current","text":"content","type":"property","url":"https://drafts.csswg.org/css-content-3/#propdef-content"}, "https://drafts.csswg.org/css-content-3/#valdef-content-none": {"displayText":"none","export":true,"for_":["content"],"level":"3","normative":true,"shortname":"css-content","spec":"css-content-3","status":"current","text":"none","type":"value","url":"https://drafts.csswg.org/css-content-3/#valdef-content-none"}, "https://drafts.csswg.org/css-content-3/#valdef-content-normal": {"displayText":"normal","export":true,"for_":["content"],"level":"3","normative":true,"shortname":"css-content","spec":"css-content-3","status":"current","text":"normal","type":"value","url":"https://drafts.csswg.org/css-content-3/#valdef-content-normal"}, "https://drafts.csswg.org/css-display-4/#propdef-visibility": {"displayText":"visibility","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"visibility","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "https://drafts.csswg.org/css-display-4/#valdef-display-none": {"displayText":"none","export":true,"for_":["display","<display-box>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"none","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-none"}, "https://drafts.csswg.org/css-display-4/#valdef-visibility-hidden": {"displayText":"hidden","export":true,"for_":["visibility"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"hidden","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-visibility-hidden"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-size": {"displayText":"font-size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-size","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-size"}, "https://drafts.csswg.org/css-inline-3/#propdef-vertical-align": {"displayText":"vertical-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"vertical-align","type":"property","url":"https://drafts.csswg.org/css-inline-3/#propdef-vertical-align"}, "https://drafts.csswg.org/css-position-3/#propdef-position": {"displayText":"position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"position","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "https://drafts.csswg.org/css-sizing-3/#max-content-block-size": {"displayText":"max-content block size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-content block size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-content-block-size"}, "https://drafts.csswg.org/css-sizing-3/#max-content-inline-size": {"displayText":"max-content inline size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-content inline size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-content-inline-size"}, "https://drafts.csswg.org/css-sizing-3/#min-content-block-size": {"displayText":"min-content block size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content block size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-content-block-size"}, "https://drafts.csswg.org/css-sizing-3/#min-content-inline-size": {"displayText":"min-content inline size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content inline size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-content-inline-size"}, "https://drafts.csswg.org/css-sizing-3/#propdef-height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"height","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "https://drafts.csswg.org/css-sizing-3/#propdef-width": {"displayText":"width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"width","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "https://drafts.csswg.org/css-sizing-3/#valdef-width-auto": {"displayText":"auto","export":true,"for_":["width","height","min-width","min-height"],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-sizing-3/#valdef-width-auto"}, "https://drafts.csswg.org/css-syntax-3/#at-rule": {"displayText":"at-rule","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"at-rule","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#at-rule"}, "https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar": {"displayText":"parse","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"parse","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar"}, "https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list": {"displayText":"<declaration-list>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"<declaration-list>","type":"type","url":"https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list"}, "https://drafts.csswg.org/css-syntax-3/#typedef-declaration-rule-list": {"displayText":"<declaration-rule-list>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"<declaration-rule-list>","type":"type","url":"https://drafts.csswg.org/css-syntax-3/#typedef-declaration-rule-list"}, "https://drafts.csswg.org/css-syntax-3/#typedef-ident-token": {"displayText":"<ident-token>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"<ident-token>","type":"type","url":"https://drafts.csswg.org/css-syntax-3/#typedef-ident-token"}, "https://drafts.csswg.org/css-text-3/#propdef-text-align": {"displayText":"text-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"current","text":"text-align","type":"property","url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "https://drafts.csswg.org/css-text-4/#propdef-white-space": {"displayText":"white-space","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"white-space","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-white-space"}, "https://drafts.csswg.org/css-text-4/#valdef-white-space-pre": {"displayText":"pre","export":true,"for_":["white-space"],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"pre","type":"value","url":"https://drafts.csswg.org/css-text-4/#valdef-white-space-pre"}, "https://drafts.csswg.org/css-values-4/#comb-any": {"displayText":"||","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"||","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-values-4/#em": {"displayText":"em","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"em","type":"value","url":"https://drafts.csswg.org/css-values-4/#em"}, "https://drafts.csswg.org/css-values-4/#ex": {"displayText":"ex","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"ex","type":"value","url":"https://drafts.csswg.org/css-values-4/#ex"}, "https://drafts.csswg.org/css-values-4/#identifier-value": {"displayText":"<custom-ident>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<custom-ident>","type":"type","url":"https://drafts.csswg.org/css-values-4/#identifier-value"}, "https://drafts.csswg.org/css-values-4/#length-value": {"displayText":"<length>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<length>","type":"type","url":"https://drafts.csswg.org/css-values-4/#length-value"}, "https://drafts.csswg.org/css-values-4/#mult-comma": {"displayText":"#","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"#","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-comma"}, "https://drafts.csswg.org/css-values-4/#mult-num-range": {"displayText":"{A,B}","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"{a,b}","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-num-range"}, "https://drafts.csswg.org/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"?","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "https://drafts.csswg.org/css-values-4/#mult-req": {"displayText":"!","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"!","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-req"}, "https://drafts.csswg.org/css-values-4/#mult-zero-plus": {"displayText":"*","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"*","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-zero-plus"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-direction": {"displayText":"direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"direction","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction": {"displayText":"block flow direction","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block flow direction","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction"}, "https://drafts.csswg.org/css-writing-modes-4/#inline-base-direction": {"displayText":"inline base direction","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline base direction","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-base-direction"}, "https://drafts.csswg.org/css-writing-modes-4/#principal-writing-mode": {"displayText":"principal writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"principal writing mode","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#principal-writing-mode"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode": {"displayText":"writing-mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing-mode","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "https://drafts.csswg.org/css2/#propdef-counter-increment": {"displayText":"counter-increment","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"counter-increment","type":"property","url":"https://drafts.csswg.org/css2/#propdef-counter-increment"}, "https://drafts.csswg.org/css2/#propdef-counter-reset": {"displayText":"counter-reset","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"counter-reset","type":"property","url":"https://drafts.csswg.org/css2/#propdef-counter-reset"}, "https://drafts.csswg.org/css2/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css2/#propdef-display"}, "https://drafts.csswg.org/css2/#propdef-margin": {"displayText":"margin","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"margin","type":"property","url":"https://drafts.csswg.org/css2/#propdef-margin"}, "https://drafts.csswg.org/css2/#propdef-max-height": {"displayText":"max-height","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"max-height","type":"property","url":"https://drafts.csswg.org/css2/#propdef-max-height"}, "https://drafts.csswg.org/css2/#propdef-max-width": {"displayText":"max-width","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"max-width","type":"property","url":"https://drafts.csswg.org/css2/#propdef-max-width"}, "https://drafts.csswg.org/css2/#propdef-min-height": {"displayText":"min-height","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"min-height","type":"property","url":"https://drafts.csswg.org/css2/#propdef-min-height"}, "https://drafts.csswg.org/css2/#propdef-min-width": {"displayText":"min-width","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"min-width","type":"property","url":"https://drafts.csswg.org/css2/#propdef-min-width"}, "https://drafts.csswg.org/css2/#propdef-page-break-after": {"displayText":"page-break-after","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"page-break-after","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-after"}, "https://drafts.csswg.org/css2/#propdef-page-break-before": {"displayText":"page-break-before","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"page-break-before","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, "https://drafts.csswg.org/css2/#propdef-z-index": {"displayText":"z-index","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"z-index","type":"property","url":"https://drafts.csswg.org/css2/#propdef-z-index"}, "https://drafts.csswg.org/css2/#selectordef-after": {"displayText":":after","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":":after","type":"selector","url":"https://drafts.csswg.org/css2/#selectordef-after"}, "https://drafts.csswg.org/css2/#selectordef-before": {"displayText":":before","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":":before","type":"selector","url":"https://drafts.csswg.org/css2/#selectordef-before"}, "https://drafts.csswg.org/mediaqueries-5/#continuous-media": {"displayText":"continuous media","export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"current","text":"continuous media","type":"dfn","url":"https://drafts.csswg.org/mediaqueries-5/#continuous-media"}, "https://drafts.csswg.org/mediaqueries-5/#paged-media": {"displayText":"paged media","export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"current","text":"paged media","type":"dfn","url":"https://drafts.csswg.org/mediaqueries-5/#paged-media"}, "https://drafts.csswg.org/selectors-4/#typedef-compound-selector": {"displayText":"<compound-selector>","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"<compound-selector>","type":"type","url":"https://drafts.csswg.org/selectors-4/#typedef-compound-selector"}, "https://www.w3.org/TR/CSS2/visuren.html#x43": {"displayText":"stacking context","export":true,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"stacking context","type":"dfn","url":"https://www.w3.org/TR/CSS2/visuren.html#x43"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const refHintKey = link.getAttribute("data-refhint-key"); let key = url; if(refHintKey) { key = refHintKey + "_" + url; } const ref = refsData[key]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script>