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 Print Profile</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 0781e88e0, updated Fri Feb 14 13:26:46 2025 -0800" name="generator"> <link href="http://www.w3.org/TR/css-print/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="92032ab38b3b9daa3dd047b670cbfc1e5a3389f0" 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> th { background: #005A9C; color: white; } tr.yes { background: aqua; } tr.no { background: transparent; } tr.enh { background: yellow; } .new { color : blue } /* added during 11/4 pwg review */ .tableNotes { font-size: 75%;font-style: italic; margin-bottom: 0in; padding-bottom: 0} .aTableNote { font-size: 75%; margin:0; margin-left: .125in; padding: 0;} .editorial { display: block; font-family: arial, helvetica, sans-serif; font-size: 80%; margin-left: .5in; margin-right: 1in ; padding: 0.125in; background: #FFFFDD ; } .editorial:after { content: "Ed."} div.editorial pre {padding: 0; margin: 0 0 0 0;color:maroon; font-family: helvetica, sans-serif; font-size:90%;} table.keys td { vertical-align:top; margin-top: 5px;} .RFC2119 { text-transform: lowercase; font-style: italic } em em.RFC2119 { text-transform: lowercase; font-style: normal } </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-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 Print Profile</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2023-12-18">18 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://dev.w3.org/csswg/css-print/">https://dev.w3.org/csswg/css-print/</a> <dt>Latest published version: <dd><a href="http://www.w3.org/TR/css-print/">http://www.w3.org/TR/css-print/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2013/NOTE-css-print-20130314/" rel="prev">https://www.w3.org/TR/2013/NOTE-css-print-20130314/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-print">CSSWG Issues Repository</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="35400">Elika J. Etemad <dd class="editor p-author h-card vcard" data-editor-id="33062">Melinda Grant (Hewlett-Packard Company) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-print/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 specification defines a subset of <cite>Cascading Style Sheets Level 2, revision 1</cite> <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> and <cite>CSS Paged Media Level 3</cite> <a data-link-type="biblio" href="#biblio-css3page" title="CSS Paged Media Module Level 3">[CSS3PAGE]</a> for printing to low-cost devices. It is designed for printing in situations where it is not feasible or desirable to install a printer-specific driver, and for situations were some variability in the output is acceptable. This profile is designed to work in conjunction with <cite>XHTML-Print</cite> <a data-link-type="biblio" href="#biblio-xhtml-print" title="XHTML-Print - Second Edition">[XHTML-PRINT]</a> and defines a minimum level of conformance as well as an extension set that provides stronger layout control for the printing of mixed text and images, tables and image collections. This profile is obsolete. Please see the latest <a href="https://www.w3.org/TR/CSS/">CSS Snapshot</a> for the specifications that make up CSS. <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-print” in the title, like this: “[css-print] …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-print%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>. Relative to the <a href="https://www.w3.org/TR/2004/CR-css-print-20040225/">previous Candidate Recommendation</a>, this version adds two new features (<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit" id="ref-for-propdef-object-fit">object-fit</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-object-position" id="ref-for-propdef-object-position">object-position</a>), synchronizes this profile with changes to <a href="https://www.w3.org/TR/xhtml-print/">XHTML-Print</a>, removes redundancies with <a href="https://www.w3.org/TR/css3-page/">CSS Paged Media Level 3</a> and makes miscellaneous clarifications and editorial improvements. Relative to the <a href="https://www.w3.org/TR/2006/WD-css-print-20061013/">previous Working Draft</a>, this version updates the names and behavior of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit" id="ref-for-propdef-object-fit①">object-fit</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-object-position" id="ref-for-propdef-object-position①">object-position</a> to match the Candidate Recommendation of <a href="https://www.w3.org/TR/css3-images/">CSS Images and Replaced Content Level 3</a> (and <a href="#section-images">adds a mapping allowance</a>), and updates references to <a href="https://www.w3.org/TR/css3-page/">CSS Paged Media Level 3</a> and <a href="https://www.w3.org/TR/CSS21/">CSS 2.1</a>. At this time, the CSS Working Group does not envisage further work on this specification and does not plan to propose it as a W3C Recommendation. </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="#section-overview">1 1. Overview</a> <li> <a href="#section-conformance">2 2. Conformance</a> <ol class="toc"> <li><a href="#s2.1">2.1 2.1. Enhanced Layout Extension Conformance</a> </ol> <li> <a href="#section-selectors">3 3. Selectors</a> <ol class="toc"> <li><a href="#at-rules">3.1 3.1 At-rules</a> </ol> <li> <a href="#section-properties">4 4. Properties</a> <ol class="toc"> <li><a href="#section-images">4.1 Image Rendering Properties</a> </ol> <li><a href="#section-syntax">5 5. CSS Syntax</a> <li><a href="#section-assigning">6 6. Assigning Property Values, Cascading, and Inheritance</a> <li><a href="#section-mediatypes">7 7. Media Types</a> <li> <a href="#section-interactions">8 8. CSS Print Profile Properties and user agent interactions</a> <ol class="toc"> <li><a href="#s.8.1">8.1 8.1 Nested Floats, Divs, and Absolutely Positioned Boxes</a> <li><a href="#s.8.2">8.2 8.2 Page Breaks</a> <li><a href="#s.8.3">8.3 8.3 Page Size</a> <li> <a href="#s.8.4">8.4 8.4 Default Style Sheets </a> <ol class="toc"> <li><a href="#s.8.5.1">8.4.1 8.5.1 Default Style Sheet Guidelines for printers</a> <li><a href="#s.8.5.2">8.4.2 8.5.2 Default Style Sheet Guidelines for Enhanced Layout printers</a> </ol> </ol> <li><a href="#section-ack">9 9. 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-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> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="section-overview">1. 1. Overview<a class="self-link" href="#section-overview"></a></h2> All sections of this document are normative unless noted as informative. This document specifies a profile of the <cite>Cascading Style Sheets, level 2, revision 1</cite> (CSS 2.1) specification <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> along with the <cite>CSS Paged Media Level 3</cite> <a data-link-type="biblio" href="#biblio-css3page" title="CSS Paged Media Module Level 3">[CSS3PAGE]</a> and <cite>CSS Images Level 3</cite> <a data-link-type="biblio" href="#biblio-css3-images" title="CSS Images Module Level 3">[CSS3-IMAGES]</a> CSS 2.1 specifies how developers can author style sheets for presenting documents across multiple devices and media types. While this is very important, it is also important that authors have an understanding of what features are supported on these different devices. Likewise, it is important that similar devices operate in a similar manner. Otherwise, authors could need to develop style sheets for each version of each device -- raising the cost of content development and decreasing interoperability. The CSS Print Profile specifies a conformance profile for printing in environments where it is not feasible or desirable to use a printer-specific driver. An example of such an environment is printing to low-cost printers from mobile phones. The profile identifies a minimum set of properties, values, selectors, and cascading rules to support these use scenarios. This profile was designed in conjunction with <cite>XHTML-Print</cite> <a data-link-type="biblio" href="#biblio-xhtml-print" title="XHTML-Print - Second Edition">[XHTML-PRINT]</a>) for low cost printers that may not have a full-page buffer and that generally print from top-to-bottom. This profile also contains an enhanced layout extension set which supports more exacting page layouts and orientations. These features provide sufficient richness to print, for example, photo album pages from a digital still camera or print-targeted television content. Conformance to this profile means that a user agent supports, at a minimum, the features defined in this specification. This subject is addressed in <a href="#section-conformance">Section 2, Conformance</a> below. <h2 class="heading settled" data-level="2" id="section-conformance">2. 2. Conformance<a class="self-link" href="#section-conformance"></a></h2> The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY" and "OPTIONAL" in this document are to be interpreted as described in RFC 2119 (see <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a>). However, for readability, these words do not appear in all uppercase letters in this specification. The primary role of a profile is to define a subset of features that provides a minimal guarantee of interoperability. In the case of the CSS Print Profile, this guarantee is that a conforming user agent will support the features defined in this specification following the CSS 2.1 conformance clause (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> Section 3.2), recast and summarized below: <ol> <li>A CSS Print Profile conforming user agent (PP-UA or more simply "printer") SHALL support the all and print CSS 2.1 media types. A printer MAY support other CSS 2.1 media types, as well. <li>For each source document, a printer SHALL attempt to retrieve all associated style sheets that are appropriate for the supported media types. A failure to retrieve a style sheet due to problems such as a loss of network connection SHOULD NOT stop the printer from processing the document. <li>A printer SHALL parse the style sheets according to this specification. In particular, the printer SHALL recognize all CSS Print Profile at-rules, blocks, declarations, and selectors. If a printer encounters a property that applies for a supported media type, the printer SHALL parse the value according to the property definition. This means that the printer SHALL accept all valid values and MAY ignore declarations with invalid values. A printer SHALL ignore rules that apply to unsupported media types. <li>For each element in a document tree, the printer SHALL assign a value for every applicable property according to the property’s definition and the rules of cascading and inheritance. <li>If the source document comes with alternate style sheets (such as with the "alternate" keyword in HTML 4.01 <a data-link-type="biblio" href="#biblio-html401" title="HTML 4.01 Specification">[HTML401]</a>), the printer MAY ignore the style sheet or treat it in some implementation dependent manner. </ol> As with CSS 2.1, there are qualifications to this conformance clause: <ol> <li>Values MAY be approximated when REQUIRED by the printer. <li>The inability of a printer to implement part of this specification due to the limitations of a particular device (e.g., a printer cannot render colors on a monochrome page) SHALL NOT imply non-conformance. </ol> It is RECOMMENDED that authors use this conformance profile to take advantage of forward compatibility. Authors MAY use style properties with an understanding that the cascading rules are processed correctly and that unknown properties and values are ignored. For example: <div class="code-example"> <pre> body { background-position: center center; background-position: 45% 55%; } </pre> </div> A printer that can accept percentage values for the background-position property will process the first background-position declaration and then replace that value with the second background-position declaration. A printer that cannot accept percentage values will process the first background-position declaration and ignore the second background-position declaration. <h3 class="heading settled" data-level="2.1" id="s2.1">2.1. 2.1. Enhanced Layout Extension Conformance<a class="self-link" href="#s2.1"></a></h3> Some print applications require a more exacting page layout than is available from a minimally conforming printer (e.g., photo album pages or pages from a digital TV). The Enhanced Layout Extension increases the number of properties that a conforming printer MUST support and thereby the requirements of its memory and performance capabilities. These added CSS constructs are indicated with a "MUST" or an increased range of values, in the CSS Print-Enhanced columns below. Printers supporting the Enhanced Layout Extension MAY also support an OPTIONAL, discoverable (via some means outside the scope of this document) Enhanced Layout Extension indicator. <h2 class="heading settled" data-level="3" id="section-selectors">3. 3. Selectors<a class="self-link" href="#section-selectors"></a></h2> In CSS 2.1, pattern matching rules determine which style rules apply to elements in the document tree <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>. Consideration is given to low-cost printers that might not be able to store all the attributes of each element, but only keep the few that are necessary. Therefore, only Enhanced Layout Extension conforming printers MUST support attribute selectors. The following table summarizes CSS Print Profile selector syntax. In addition to the selectors marked "MUST" in the CSS Print or CSS Print-Enhanced columns, the CSS Print Profile includes the CSS 2.1 grouping mechanism (See <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> Section 5.2.1). <table border="1" summary="List of all selectors indicating which ones are supported" width="80%"> <tbody> <tr> <th>Pattern <th>Meaning <th>Selector type <th>CSS Print <th>CSS Print-Enhanced <tr class="yes"> <td>* <td>Matches any element <td>Universal selector <td>MUST <td>MUST <tr class="yes"> <td>E <td>Matches any E element (i.e., any element of type E) <td>Type selectors <td>MUST <td>MUST <tr class="yes"> <td>E F <td>Matches any F element that is a descendant of an E element <td>Descendant selectors <td>MUST <td>MUST <tr class="yes"> <td>E > F <td>Matches any F element that is a child of an element E <td>Child selectors <td>MUST <td>MUST <tr class="enh"> <td>E[foo] <td>Matches any E element with the "foo" attribute set (whatever the value). <td>Attribute selectors <td>MAY <td>MUST <tr class="enh"> <td>E[foo="warning"] <td>Matches any E element whose "foo" attribute value is exactly equal to "warning". <td>Attribute selectors <td>MAY <td>MUST <tr class="enh"> <td>E[foo~="warning"] <td>Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". <td>Attribute selectors <td>MAY <td>MUST <tr class="yes"> <td>E.classid <td>The same as E[class~=classid] <td>Class selectors <td>MUST <td>MUST <tr class="yes"> <td>E#myid <td>Matches any E element id equal to "myid". <td>ID selectors <td>MUST <td>MUST <tr class="yes"> <td>@page :first <td>Specifies style for the first page of a document <td>Page pseudo-classes <td>MUST <td>MUST </table> <h3 class="heading settled" data-level="3.1" id="at-rules">3.1. 3.1 At-rules<a class="self-link" href="#at-rules"></a></h3> The following table summarizes CSS Print Profile at-rule syntax. <table border="1" width="80%"> <tbody> <tr> <th>at-rule <th>Function <th>CSS Print <th>CSS Print-Enhanced <tr class="enh"> <td>@import <td>Imports an external style sheet. <td>MAY <td>MUST <tr class="yes"> <td>@charset <td>Defines character set for the style sheet. <td>MUST <td>MUST <tr class="yes"> <td>@media <td>Groups a set of style rules to apply only to one or more particular media. <td>MUST <td>MUST <tr class="yes"> <td>@page <td>Defines a (optionally named) page formatting context. <td>MUST <td>MUST <tr class="yes"> <td>@bottom-left-corner, @bottom-left, @bottom-center, @bottom-right, @bottom-right-corner <td>Defines areas on the page within the running footer in the page’s bottom margin <a data-link-type="biblio" href="#biblio-css3page" title="CSS Paged Media Module Level 3">[CSS3PAGE]</a> <td>MUST <td>MUST <tr class="yes"> <td>@top-left-corner, @top-left, @top-center, @top-right, @top-right-corner <td>Defines areas on the page within the running header in the page’s top margin <a data-link-type="biblio" href="#biblio-css3page" title="CSS Paged Media Module Level 3">[CSS3PAGE]</a> <td>MUST <td>MUST </table> <h2 class="heading settled" data-level="4" id="section-properties">4. 4. Properties<a class="self-link" href="#section-properties"></a></h2> As with selectors, the properties a printer MUST support are similar to those that a mobile device MUST support (<a data-link-type="biblio" href="#biblio-css-mobile" title="CSS Mobile Profile 2.0">[CSS-MOBILE]</a>, <a href="http://www.w3.org/TR/css-mobile#properties"> Properties</a>) with the exception of those that don’t apply to the page or are specifically targeted at media other than the page. In some cases the allowable values for a printer are a subset of the full range of values to match the reduced memory and performance capabilities of a low-cost printer. The following table summarizes CSS Print Profile properties and property values. Refer to <cite>CSS Paged Media Level 3</cite> <a data-link-type="biblio" href="#biblio-css3page" title="CSS Paged Media Module Level 3">[CSS3PAGE]</a> for the definition of the <a class="property css" data-link-type="property">size</a> properties, <cite>CSS Image Values and Replaced Content Level 3</cite> <a data-link-type="biblio" href="#biblio-css3-images" title="CSS Images Module Level 3">[CSS3-IMAGES]</a> for the definition of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation" id="ref-for-propdef-image-orientation">image-orientation</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit" id="ref-for-propdef-object-fit②">object-fit</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-object-position" id="ref-for-propdef-object-position②">object-position</a> properties, and CSS 2.1 <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> for the definition of all other properties and values. <table border="1" width="80%"> <thead> <tr align="center"> <th>Name <th>CSS Print <th>CSS Print-Enhanced <th>CSS Values <th>Initial value <tbody> <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background</a> <td>background-color | inherit <td> [<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color" id="ref-for-propdef-background-color">background-color</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image" id="ref-for-propdef-background-image">background-image</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat" id="ref-for-propdef-background-repeat">background-repeat</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position">background-position</a>] | inherit <td>[<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color" id="ref-for-propdef-background-color①">background-color</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image" id="ref-for-propdef-background-image①">background-image</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat" id="ref-for-propdef-background-repeat①">background-repeat</a> || <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> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position①">background-position</a>] | inherit <td>see individual properties <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color" id="ref-for-propdef-background-color②">background-color</a> <td>MUST <td>MUST <td><color> | transparent | inherit <td>transparent <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image" id="ref-for-propdef-background-image②">background-image</a> <td>MAY <td>MUST <td><uri> | none | inherit <td>none <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position②">background-position</a> <td>MAY <td>MUST <td>[ [ <percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit <td>0% 0% <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat" id="ref-for-propdef-background-repeat②">background-repeat</a> <td>MAY <td>MUST <td>repeat | repeat-x | repeat-y | no-repeat | inherit <td>repeat <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border">border</a> <td>MAY <td>MUST <td>[ <border-width> || <border-style> || [<color> | transparent] ] | inherit <td>see individual properties <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-tables-3/#propdef-border-collapse" id="ref-for-propdef-border-collapse">border-collapse</a> <td>MAY <td>MUST <td>collapse | separate | inherit <td>collapse <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a> <td>MAY <td>MUST <td>[<color> | transparent]{1,4} | inherit <td>see individual properties <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-tables-3/#propdef-border-spacing" id="ref-for-propdef-border-spacing">border-spacing</a> <td>MAY <td>MUST <td><length> <length>? | inherit <td>0 <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style">border-style</a> <td>MAY <td> none, solid <td><border-style>{1,4} | inherit <td>see individual properties <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top" id="ref-for-propdef-border-top">border-top</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right" id="ref-for-propdef-border-right">border-right</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom" id="ref-for-propdef-border-bottom">border-bottom</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left" id="ref-for-propdef-border-left">border-left</a> <td>MAY <td>MUST <td>[ <border-width> || <border-style> || [<color> | transparent] ] | inherit <td>see individual properties <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color">border-top-color</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color" id="ref-for-propdef-border-right-color">border-right-color</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color" id="ref-for-propdef-border-bottom-color">border-bottom-color</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color" id="ref-for-propdef-border-left-color">border-left-color</a> <td>MAY <td>MUST <td><border-color> | transparent | inherit <td>the value of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color" id="ref-for-propdef-color">color</a> property <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style" id="ref-for-propdef-border-top-style">border-top-style</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style" id="ref-for-propdef-border-right-style">border-right-style</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style" id="ref-for-propdef-border-bottom-style">border-bottom-style</a> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style" id="ref-for-propdef-border-left-style">border-left-style</a> <td>MAY <td>none, solid <td><border-style> | inherit <td>none <tr class="enh"> <td><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-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</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-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a> <td>MAY <td>MUST <td><border-width> | inherit <td>medium <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width</a> <td>MAY <td>MUST <td><border-width>{1,4} | inherit <td>see individual properties <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom">bottom</a> <td>MAY <td>MUST <td><length> | <percentage> | auto | inherit <td>auto <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-tables-3/#propdef-caption-side" id="ref-for-propdef-caption-side">caption-side</a> <td>MAY <td>MUST <td>top | bottom | left | right | inherit <td>top <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-clear" id="ref-for-propdef-clear">clear</a> <td>MAY <td>MUST <td>none | left | right | both | inherit <td>none <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip" id="ref-for-propdef-clip">clip</a> <td>MAY <td>MUST <td><shape> | auto | inherit <td>auto <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color" id="ref-for-propdef-color①">color</a> <td>MUST <td>MUST <td><color> | inherit <td>depends on user agent <tr class="yes"> <td><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> <td>inherit | [<string> | counter(pages<a href="#table_note_0">†</a>)]+ <td>inherit | [<string> | counter(pages<a href="#table_note_0">†</a>)]+ <td>[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit <td>empty string <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-counter-increment" id="ref-for-propdef-counter-increment">counter-increment</a> <td>"pages"<a href="#table_note_0">†</a> <td>"pages"<a href="#table_note_0">†</a> <td>[ <identifier> <integer> ]+ | none | inherit <td>none <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-counter-reset" id="ref-for-propdef-counter-reset">counter-reset</a> <td>MUST <td>MUST <td>[ <identifier> <integer>? ]+ | none | inherit <td>none <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-display" id="ref-for-propdef-display">display</a> <td>MAY <td>inline | block | list-item | none |inherit <td>inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit <td>inline <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit" id="ref-for-propdef-object-fit③">object-fit</a> <td>MAY <td>MUST <td>fill | none | cover | contain <td>fill <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font" id="ref-for-propdef-font">font</a> <td> [ [ <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-style" id="ref-for-propdef-font-style">font-style</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight">font-weight</a> ]? <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> [ / <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height">line-height</a> ]? <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family">font-family</a> ] | inherit <td> [ [ <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-style" id="ref-for-propdef-font-style①">font-style</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variant" id="ref-for-propdef-font-variant">font-variant</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight①">font-weight</a> ]? <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> [ / <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height①">line-height</a> ]? <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family①">font-family</a> ] | inherit <td> [ [ <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-style" id="ref-for-propdef-font-style②">font-style</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variant" id="ref-for-propdef-font-variant①">font-variant</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight②">font-weight</a> ]? <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> [ / <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height②">line-height</a> ]? <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family②">font-family</a> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit <td>see individual properties <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family③">font-family</a> <td>MUST<a href="#table_note_1">*</a> <td>MUST<a href="#table_note_1">*</a> <td>[[ <family-name> | <generic-family> ],]* [ <family-name> | <generic-family> ] | inherit <td>depends on user agent <tr class="yes"> <td><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> <td>MUST <a href="#table_note_2">**</a> <td>MUST <a href="#table_note_2">**</a> <td><absolute-size> | <relative-size> | <length> | <percentage> | inherit <td>medium <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-style" id="ref-for-propdef-font-style③">font-style</a> <td>MUST<a href="#table_note_2">**</a> <td>MUST <a href="#table_note_2">**</a> <td>normal | italic | oblique | inherit <td>normal <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variant" id="ref-for-propdef-font-variant②">font-variant</a> <td>MAY <td>MUST <td>normal | small-caps | inherit <td>normal <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight③">font-weight</a> <td>MUST <a href="#table_note_2">**</a> <td>MUST <a href="#table_note_2">**</a> <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit <td>normal <tr class="yes"> <td><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> <td>MUST <td>MUST <td><length> | <percentage> | auto | inherit <td>auto <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation" id="ref-for-propdef-image-orientation①">image-orientation</a> <td>MAY <td>MUST <td><angle> | auto <td>auto <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a> <td>MAY <td>MUST <td><length> | <percentage> | auto | inherit <td>auto <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a> <td>MAY <td>MUST <td>normal | <length> | inherit <td>normal <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height③">line-height</a> <td>MUST <td>MUST <td>normal | <number> | <length> | <percentage> | inherit <td>normal <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style" id="ref-for-propdef-list-style">list-style</a> <td>MAY <td>MUST <td>[ <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-type" id="ref-for-propdef-list-style-type">list-style-type</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position" id="ref-for-propdef-list-style-position">list-style-position</a> || <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image" id="ref-for-propdef-list-style-image">list-style-image</a> ] | inherit <td>see individual properties <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image" id="ref-for-propdef-list-style-image①">list-style-image</a> <td>MAY <td>MUST <td><uri> | none | inherit <td>none <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position" id="ref-for-propdef-list-style-position①">list-style-position</a> <td>MUST <td>MUST <td>inside | outside | inherit <td>outside <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-type" id="ref-for-propdef-list-style-type①">list-style-type</a> <td>disc, decimal, lower-alpha, upper-alpha, none and inherit <td>disc, decimal, lower-alpha, upper-alpha, none and inherit <td>disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit <td>disc <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin">margin</a> <td>MUST <td>MUST <td><margin-width>{1,4} | inherit <td>see individual properties <tr class="yes"> <td><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-box-4/#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</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> <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> <td>MUST <td>MUST <td><margin-width> | inherit <td>0 <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-object-position" id="ref-for-propdef-object-position③">object-position</a> <td>MAY <td>MUST <td>[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] <td>50% 50% <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-float" id="ref-for-propdef-float">float</a> <td>MAY <td>MUST <td>left | right | none | inherit <td>none <tr class="enh"> <td><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> <td>MAY <td>MUST <td><integer> | inherit <td>2 <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> <td>MAY <td>MUST <td>visible | hidden | scroll | auto | inherit <td>visible <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding" id="ref-for-propdef-padding">padding</a> <td>MAY <td>MUST <td><padding-width>{1,4} | inherit <td>see individual properties <tr class="enh"> <td><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-box-4/#propdef-padding-right" id="ref-for-propdef-padding-right">padding-right</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-box-4/#propdef-padding-left" id="ref-for-propdef-padding-left">padding-left</a> <td>MAY <td>MUST <td><padding-width> | inherit <td>0 <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-page-3/#propdef-page" id="ref-for-propdef-page">page</a> <td>MUST <td>MUST <td><identifier> | auto <td>auto <tr class="yes"> <td><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> <td> auto | always | inherit <td>auto | always | inherit <td>auto | always | avoid | left | right | inherit <td>auto <tr class="yes"> <td><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> <td> auto | always | inherit <td>auto | always | inherit <td>auto | always | avoid | left | right | inherit <td>auto <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-page-break-inside" id="ref-for-propdef-page-break-inside">page-break-inside</a> <td>MUST <td>MUST <td>avoid | auto | inherit <td>auto <tr class="enh"> <td><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> <td>MAY <td>MUST <a href="#table_note_pos">‡</a> <td>static | relative | absolute | fixed | inherit <td>static <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a> <td>MAY <td>MUST <td><length> | <percentage> | auto | inherit <td>auto <tr class="yes"> <td><a class="property css" data-link-type="property">size</a> <td>[<length>{1,2}| letter | legal | ledger | A4 | A5 | A3 | B4 | B5 ] | auto | portrait | inherit <td>[<length>{1,2} | letter | legal | ledger | A4 | A5 | A3 | B4 | B5 ] | auto | portrait | landscape | inherit <td>[<length>{1,2} | letter | legal | ledger | A4 | A5 | A3 | B4 | B5 ] | auto | portrait | landscape | inherit <td>auto <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-tables-3/#propdef-table-layout" id="ref-for-propdef-table-layout">table-layout</a> <td>MAY <td>MUST <td>auto | fixed | inherit <td>auto <tr class="yes"> <td><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> <td>left | center | inherit <td>left | right | center | inherit <td>left | right | center | justify | <string> | inherit <td>depends on user agent and writing direction <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a> <td>none, underline, and inherit <td>none, underline, and inherit <td>none | [ underline || overline || line-through || blink ] | inherit <td>none <tr class="yes"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-text-indent" id="ref-for-propdef-text-indent">text-indent</a> <td>MUST <td>MUST <td><length> | <percentage> | inherit <td>0 <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-text-transform" id="ref-for-propdef-text-transform">text-transform</a> <td>MAY <td>MUST <td>capitalize | uppercase | lowercase | none | inherit <td>none <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a> <td>MAY <td>MUST <td><length> | <percentage> | auto | inherit <td>auto <tr class="enh"> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a> <td>MAY <td>MUST<a href="#table_note_vert_align">1</a> <td>baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit <td>baseline <tr class="enh"> <td><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> <td>MAY <td>MUST <td>visible | hidden | collapse | inherit <td>inherit <tr class="yes"> <td><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> <td>MUST <td>MUST <td>normal | pre | nowrap | inherit <td>normal <tr class="enh"> <td><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> <td>MAY <td>MUST <td><integer> | inherit <td>2 <tr class="yes"> <td><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> <td>MUST <td>MUST <td><length> | <percentage> | auto | inherit <td>auto </table> Table Note: † Only the single identifier "pages" that represents the current page number is REQUIRED. * It is RECOMMENDED that a printer minimally support "serif," "sans-serif," and "monospace" font families. ** The supported values SHOULD be appropriate to the fonts available to the printer. ‡ The printer MAY ignore positioned elements that are placed on the page before the position of the current element in the normal flow. 1 Vertical alignment is undefined across page boundaries. <h3 class="heading settled" data-level="4.1" id="section-images">4.1. Image Rendering Properties<a class="self-link" href="#section-images"></a></h3> A previous Working Draft of this document defined fit and fit-position properties. To support legacy content using these properties, implementations of the CSS Print Profile MAY alias the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit" id="ref-for-propdef-object-fit④">object-fit</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-object-position" id="ref-for-propdef-object-position④">object-position</a> properties as defined below: <table class="data"> <thead> <tr> <th>Property/Value <th>Alias <tbody> <tr> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit" id="ref-for-propdef-object-fit⑤">object-fit</a> <td>fit <tr> <td>none <td>hidden <tr> <td>cover <td>slice <tr> <td>contain <td>meet <tbody> <tr> <td><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-object-position" id="ref-for-propdef-object-position⑤">object-position</a> <td>fit-position </table> Additionally, implementations MAY override initial value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-object-position" id="ref-for-propdef-object-position⑥">object-position</a> (which is '50% 50%') to be '0% 0%' by adding an appropriate rule to the UA style sheet, if that is required for compatibility with existing content. Similarly, if inheritance is required, then that may also be indicated by UA style sheet rule. <div class="example" id="example-88093c3b"> <a class="self-link" href="#example-88093c3b"></a> The following rule positions all images with <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit" id="ref-for-propdef-object-fit⑥">object-fit</a> values other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-images-3/#valdef-object-fit-fill" id="ref-for-valdef-object-fit-fill">fill</a> to be top-left aligned: <pre>* { object-position: top left; }</pre> The following rules also cause <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-images-3/#propdef-object-position" id="ref-for-propdef-object-position⑦">object-position</a> to inherit. <pre>* { object-position: inherit; }:root { object-position: top left; }</pre> </div> <h2 class="heading settled" data-level="5" id="section-syntax">5. 5. CSS Syntax<a class="self-link" href="#section-syntax"></a></h2> The CSS Print Profile uses the same syntax as specified in <cite>Cascading Style Sheets, Level 2, revision 1</cite> (CSS 2.1) <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>. The CSS Print Profile uses a subset of the values used in CSS 2.1. Specifically: <ol> <li>The printer SHALL support integer and real numbers (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html#q15">Section 4.3.1</a>). <li> The printer SHALL support the following lengths (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html#length-units">Section 4.3.2</a>): <ul> <li>px <li>em <li>ex <li>in <li>cm <li>mm <li>pt <li>pc </ul> The printer MAY support other lengths. <li>The printer SHALL support percentage values (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html#percentage-units">Section 4.3.3</a>). <li>The printer SHALL support URI values (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html#uri">Section 4.3.4</a>). <li>The printer SHALL support a "pages" counter value that tracks page numbers (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html#counter">Section 4.3.5</a>). <li> The printer SHALL support the following color values: <ul> <li>The 16 colors defined in HTML 4.01 <a data-link-type="biblio" href="#biblio-html401" title="HTML 4.01 Specification">[HTML401]</a> <li>A numerical RGB specification (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html#color-units">Section 4.3.6</a>) </ul> The printer MAY support other color values. The printer MAY support user preferences for colors (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/ui.html#system-colors">Section 18.2</a>). <li>The printer MAY support user preferences for fonts (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/ui.html#system-fonts">Section 18.3</a>). </ol> Similarly, the CSS Print Profile requires that conforming user agents support the character encoding mechanisms specified in CSS 2.1 <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>. Specifically: <ol> <li>The printer SHALL support priorities specified in CSS 2.1 <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> to determine a document’s character encoding. <li>The printer SHALL support the CSS 2.1 @charset rules. However, if the character set specified by the @charset rule of a external style sheet is not supported by the printer, the style sheet will be ignored. </ol> <h2 class="heading settled" data-level="6" id="section-assigning">6. 6. Assigning Property Values, Cascading, and Inheritance<a class="self-link" href="#section-assigning"></a></h2> In general, the CSS Print Profile uses the same cascading rules as in CSS 2.1. Specifically: <ol> <li>The printer SHALL assign values as described in CSS 2.1 (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#q1">Section 6.1</a>). <li>The printer SHALL support inheritance as described in CSS 2.1 (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#inheritance">Section 6.2</a>). <li>A printer supporting Enhanced Layout Extension conformance SHALL support the CSS 2.1 @import rules as specified in CSS 2.1 (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#at-import">Section 6.3</a>). <li>The printer SHALL support author style sheets. The printer MAY support user or user-agent style sheets (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#cascade">Section 6.4</a>). <li>The printer SHALL support all CSS 2.1 cascading mechanisms (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> Sections <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#cascading-order">6.4.1</a>-<a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#q13">6.4.4</a>). </ol> <h2 class="heading settled" data-level="7" id="section-mediatypes">7. 7. Media Types<a class="self-link" href="#section-mediatypes"></a></h2> A CSS Print Profile conforming user agent SHALL be able to process media-dependent style sheets as specified in CSS 2.1 (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/media.html">Section 7</a>). Specifically: <ol> <li>The printer SHALL support the CSS 2.1 @media rules as specified in CSS 2.1 (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/media.html">Section 7</a>). <li>The printer SHALL accept and process style sheets that target the <code>print</code> media type. <li>The printer SHALL accept and process style sheets that target the <code>all</code> media type. <li>The printer SHALL accept style sheets that contain other (non-print) media-dependent style sheets. <li>The printer MAY process other media types (such as <code>projection</code> or <code>handheld</code>). </ol> <h2 class="heading settled" data-level="8" id="section-interactions">8. 8. CSS Print Profile Properties and user agent interactions<a class="self-link" href="#section-interactions"></a></h2> The following sections relax or otherwise modify the conformance requirements. <h3 class="heading settled" data-level="8.1" id="s.8.1">8.1. 8.1 Nested Floats, Divs, and Absolutely Positioned Boxes<a class="self-link" href="#s.8.1"></a></h3> Authors are cautioned that the nesting of floats, divs, and absolutely positioned boxes within themselves, each other, and table cells should be used carefully, since the nesting depth of these constructs is printer and implementation dependent. <h3 class="heading settled" data-level="8.2" id="s.8.2">8.2. 8.2 Page Breaks<a class="self-link" href="#s.8.2"></a></h3> If <code>page-break-inside: avoid</code> is specified for a long element and the printer is unable to buffer the entire element before committing it to paper, it SHOULD force a page break to occur before the long element and begin the element starting at the top of the next page. If the long element starts at the top of a page and exceeds the page length, the printer SHALL print as much as possible on the first page and then resume that element on the next and subsequent pages as REQUIRED to preserve the content. A printer MAY perform scaling to fit the long element on a single page; but this is not recommended unless the scaling required is minimal. <h3 class="heading settled" data-level="8.3" id="s.8.3">8.3. 8.3 Page Size<a class="self-link" href="#s.8.3"></a></h3> Due to a printer’s mechanical limitations, the actual printable area of the page is often less than the page size. However, a printer SHOULD be guided by the page size value supplied by the CSS size property when choosing the media to print on. See <a href="http://www.w3.org/TR/css3-page/#renderingpages"> http://www.w3.org/TR/css3-page/#renderingpages</a> in <cite>CSS3 Paged Media</cite> <a data-link-type="biblio" href="#biblio-css3page" title="CSS Paged Media Module Level 3">[CSS3PAGE]</a> for a discussion of fitting contents to media sheets. <h3 class="heading settled" data-level="8.4" id="s.8.4">8.4. 8.4 Default Style Sheets <a class="self-link" href="#s.8.4"></a></h3> This entire section is informative. <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/sample.html">Appendix D</a> of <cite>Cascading Style Sheets, Level 2, revision 1</cite> (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/sample.html">Appendix D</a>) provides a sample style sheet. This sheet uses several properties that are not required of a conforming printer, even ones supporting the <a href="#s2.1">enhanced layout extensions</a> (section 2.1). <h4 class="heading settled" data-level="8.4.1" id="s.8.5.1">8.4.1. 8.5.1 Default Style Sheet Guidelines for printers<a class="self-link" href="#s.8.5.1"></a></h4> Developers of printers that do not implement the enhanced layout facilities are encouraged but not required to adhere to the following implementation guidelines that address unsupported properties. These guidelines are presented to promote consistency between printer implementations. The guidelines below are annotated to show derivation of the guideline from the <cite>Cascading Style Sheets, Level 2, revision 1</cite> <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> style sheet. <ol> <li> The <code> address, blockquote, body, dd, div, dl, dt, h1, h2, h3, h4, h5, h6, hr, object, ol, p, pre, </code> and <code> ul</code> elements should be treated as if their display property were set to <code>block</code>. <li>The <code>li</code> element should be treated as if its display property were set to <code>list-items</code>. <li> The table elements, <code>table, tr, td, th,</code> and <code>caption</code>, should have their standard meaning and display treatments: <code>table, table-row, table-cell,</code> and <code>table-caption</code>. <li> The elements <code>base, br, html, head, link, meta, param, style </code> and <code> title</code> should be treated as if their display property were set to <code>none</code>. <li> The remaining elements,<code> a, abbr, acronym, b, big, cite, code, dfn, em, form, i, img, input, kbd, option, samp, small, select, strong, sub, sup, textarea, tt, </code> and <code> var</code>, should be treated as if their display property were set to <code>inline</code>. A display property of <code> inline </code> for the elements <code>img, input, select,</code> and <code> textarea </code> allows document authors a flexibility not available if their display property were <code>block</code>. <div class="editorial"> The above guidelines come from the following portion of the CSS 2.1 default style sheet: <pre><code>ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, DIR, HR, MENU, { display: block } LI { display: list-item } HEAD { display: none } TABLE { display: table } TR { display: table-row } THEAD { display: table-header-group } TBODY { display: table-row-group } TFOOT { display: table-footer-group } COL { display: table-column } COLGROUP { display: table-column-group } TD, TH { display: table-cell } CAPTION { display: table-caption } </code></pre> </div> <li> The edges of the content of <code>body</code> element should have 0.1 inch wide inset from the left, top, right, and bottom of the printable area of the page. Margin calculations will start from these offsets. <div class="editorial"> The .1 inch figure comes from the calculation that 8 px divided by 75px/inch ( a normal display resolution) is about .1 inches. <pre><code>BODY { padding: 8px; line-height: 1.33 } </code></pre> </div> <li> The content of the <code>sub</code> element should be treated as if its vertical-align property were set to <code>sub</code>. Similarly, the content of the <code>sup</code> element should be treated as if its vertical-align property were set to <code>sup</code>. <div class="editorial"> <pre><code>SUB { vertical-align: sub } SUP { vertical-align: super } </code></pre> </div> <li> The <code>hr</code> element should be treated as if its area, as defined by its height and width, were outlined by a one pixel thick, solid line. The default line should be one pixel high and the width of the containing box. <div class="editorial"> <pre><code>HR { border: 1px inset } </code></pre> </div> <li> The lowercase letters of the content of the <code>abbr</code> and <code>acronym</code> elements should be rendered as scaled capital letters, at approximately 75% of their size at the current font size. Upper case letters will be unchanged. Printers may also choose to simply render lowercase letters as uppercase letters without scaling. <div class="editorial"> The 75% figure above is only one way to approximate small-caps. The printer is free to use its own rendering of small-caps. <pre><code>ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em } </code></pre> </div> <li> Page break avoidance both inside and after is removed for the elements <code> h1, h2, h3, h4, h5,</code> and <code>h6</code>. Therefore, the printer is not required to move the content of these elements from the bottom of one page to the top of the next. <div class="editorial"> <pre><code>H1, H2, H3, H4, H5, H6 { page-break-after: avoid; page-break-inside: avoid } </code></pre> </div> <li> The printer need not avoid page breaks before the <code> ul, ol,</code> and <code>dl</code> elements. <div class="editorial"> <pre><code>UL, OL, DL { page-break-before: avoid } </code></pre> </div> <li>The printer may choose its own, fixed value for the padding properties of elements where the <cite>Cascading Style Sheets, Level 2, revision 1</cite> <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/box.html">box model</a> (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/box.html">Section 8</a>) applies. <li>The content of all elements, except <code>hr</code>, should be treated as if the element’s border-style property were set to <code>none</code>. <li> The content of all elements may be treated as if the element’s overflow property were set to <code>visible</code> and the clip property set to <code>auto</code>. <div class="editorial"> This guideline suggests consistent behavior among implementations. </div> <li> The content of all elements may be treated as if the element’s positioning property were set to <code>static</code>. <div class="editorial"> Elements should be treated as if they are in the normal flow. </div> <li> Tables should be treated as if the table-layout property were set to <code>fixed</code>. <div class="editorial"> This guideline promotes consistency since <ul> <li> the table-layout property is not mandated <li> There isn’t a CSS default style sheet rule for this property </ul> </div> </ol> The following style sheet is a modification of the sample sheet in <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/sample.html">Appendix D</a> of <cite>Cascading Style Sheets, Level 2, revision 1</cite> (<a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/sample.html">Appendix D</a>) and depends on the above guidelines. <pre style="margin-left: .25in;">th { font-weight: bolder; text-align: center }caption { text-align: center } body { line-height: 1.33 } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .83em 0 } h3 { font-size: 1.17em; margin: 1em 0 } h4, p, blockquote, ul, form, ol, dl { margin: 1.33em 0 } h5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 } h6 { font-size: .67em; margin: 2.33em 0 } h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em, var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } big { font-size: 1.17em } small, sub, sup { font-size: .83em } ol, ul, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } br { content: "\A" } @media print { @page { margin: 10% } blockquote, pre { page-break-inside: avoid } } </pre> <h4 class="heading settled" data-level="8.4.2" id="s.8.5.2">8.4.2. 8.5.2 Default Style Sheet Guidelines for Enhanced Layout printers<a class="self-link" href="#s.8.5.2"></a></h4> Developers of printers conforming to the <a href="#s2.1">enhanced layout extensions</a> (section 2.1) MUST implement more of <cite>Cascading Style Sheets, Level 2, revision 1</cite> <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> than conforming printers, although the set of properties and their values is still less than complete. Developers of printers are encouraged but not required to adhere to the following implementation guidelines that address unsupported properties. <ol> <li> The table elements, <code>table, tr, td, th,</code> and <code>caption</code>, should have their standard meaning and display treatments: <code>table, table-row, table-cell,</code> and <code>table-caption</code>. <li> The rendering of the hr element is implementation dependent since support of the <code>inset</code> value of the border-style property is not required. <li>Page break avoidance both inside and after is removed for the elements <code> h1, h2, h3, h4, h5,</code> and <code>h6</code>. Therefore, the printer need not be concerned with moving the content of these elements from the bottom of one page to the top of the next. <li>The printer need not avoid page breaks before the <code> ul, ol,</code> and <code>dl</code> elements. </ol> The following style sheet is a modification of the sample sheet in <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/sample.html">Appendix D</a> of <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> and depends on the above guidelines. <pre style="margin-left: .25in;">address,blockquote, body, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, object, ol, p, ul, hr, pr e { display: block } li { display: list-item } head { display: none } th { font-weight: bolder; text-align: center } caption { text-align: center } body { padding: 8px; line-height: 1.33 } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .83em 0 } h3 { font-size: 1.17em; margin: 1em 0 } h4, p, blockquote, ul, form, ol, dl, { margin: 1.33em 0 } h5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 } h6 { font-size: .67em; margin: 2.33em 0 } h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em, var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } big { font-size: 1.17em } small, sub, sup { font-size: .83em } hr { border: 1px } ol, ul, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } br { content: "\A" } @media print { @page { margin: 10% } blockquote, pre { page-break-inside: avoid } } </pre> <h2 class="heading settled" data-level="9" id="section-ack">9. 9. Acknowledgements<a class="self-link" href="#section-ack"></a></h2> This section is informative. This specification was prepared by the W3C CSS Working Group. This specification is based on the specification of the same name, <cite>CSS Print Profile</cite> <a data-link-type="biblio" href="#biblio-csspp" title="CSS Print Profile">[CSSPP]</a> from the <a href="http://www.pwg.org/">Printer Working Group</a>, a program of and through the IEEE Industry Standards and Technology Organization, Inc. The editor wishes to express her gratitude to all those who contributed to it. </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-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-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>background <li>background-attachment <li>background-color <li>background-image <li>background-position <li>background-repeat <li>border <li>border-bottom <li>border-bottom-color <li>border-bottom-style <li>border-bottom-width <li>border-color <li>border-left <li>border-left-color <li>border-left-style <li>border-left-width <li>border-right <li>border-right-color <li>border-right-style <li>border-right-width <li>border-style <li>border-top <li>border-top-color <li>border-top-style <li>border-top-width <li>border-width </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>margin <li>margin-bottom <li>margin-left <li>margin-right <li>margin-top <li>padding <li>padding-bottom <li>padding-left <li>padding-right <li>padding-top </ul> <li> <a data-link-type="biblio">[CSS-BREAK-3]</a> defines the following terms: <ul> <li>orphans </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>widows </ul> <li> <a data-link-type="biblio">[CSS-CONTENT-3]</a> defines the following terms: <ul> <li>content </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>visibility </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>font <li>font-family <li>font-size <li>font-style <li>font-variant <li>font-weight </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-4]</a> defines the following terms: <ul> <li>object-fit </ul> <li> <a data-link-type="biblio">[CSS-LISTS-3]</a> defines the following terms: <ul> <li>counter-increment <li>counter-reset <li>list-style <li>list-style-image <li>list-style-position <li>list-style-type </ul> <li> <a data-link-type="biblio">[CSS-MASKING-1]</a> defines the following terms: <ul> <li>clip </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>overflow </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>bottom <li>left <li>position <li>right <li>top </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>height <li>width </ul> <li> <a data-link-type="biblio">[CSS-TABLES-3]</a> defines the following terms: <ul> <li>border-collapse <li>border-spacing <li>caption-side <li>table-layout </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>letter-spacing <li>text-indent <li>text-transform <li>white-space </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-4]</a> defines the following terms: <ul> <li>text-decoration </ul> <li> <a data-link-type="biblio">[CSS21]</a> defines the following terms: <ul> <li>color <li>display <li>vertical-align </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>clear <li>float <li>line-height <li>page-break-after <li>page-break-before <li>page-break-inside </ul> <li> <a data-link-type="biblio">[CSS3-IMAGES]</a> defines the following terms: <ul> <li>fill <li>image-orientation <li>object-position </ul> <li> <a data-link-type="biblio">[CSS3PAGE]</a> defines the following terms: <ul> <li>page </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-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-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-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-images-4">[CSS-IMAGES-4] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-images-4/"><cite>CSS Images Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-images-4/">https://drafts.csswg.org/css-images-4/</a> <dt id="biblio-css-lists-3">[CSS-LISTS-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-lists-3/"><cite>CSS Lists and Counters Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-lists-3/">https://drafts.csswg.org/css-lists-3/</a> <dt id="biblio-css-masking-1">[CSS-MASKING-1] <dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="https://drafts.fxtf.org/css-masking-1/"><cite>CSS Masking Module Level 1</cite></a>. URL: <a href="https://drafts.fxtf.org/css-masking-1/">https://drafts.fxtf.org/css-masking-1/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://drafts.csswg.org/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-3/">https://drafts.csswg.org/css-overflow-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-tables-3">[CSS-TABLES-3] <dd>François Remy; Greg Whitworth; David Baron. <a href="https://drafts.csswg.org/css-tables-3/"><cite>CSS Table Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-tables-3/">https://drafts.csswg.org/css-tables-3/</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-text-decor-4">[CSS-TEXT-DECOR-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-text-decor-4/"><cite>CSS Text Decoration Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-decor-4/">https://drafts.csswg.org/css-text-decor-4/</a> <dt id="biblio-css21">[CSS21] <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-css22">[CSS22] <dd>Bert Bos. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-css3-images">[CSS3-IMAGES] <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-css3page">[CSS3PAGE] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-page-3/"><cite>CSS Paged Media Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-page-3/">https://drafts.csswg.org/css-page-3/</a> <dt id="biblio-html401">[HTML401] <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a href="https://www.w3.org/TR/html401/"><cite>HTML 4.01 Specification</cite></a>. 27 March 2018. REC. URL: <a href="https://www.w3.org/TR/html401/">https://www.w3.org/TR/html401/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-mobile">[CSS-MOBILE] <dd>Bert Bos. <a href="https://www.w3.org/TR/css-mobile/"><cite>CSS Mobile Profile 2.0</cite></a>. 14 October 2014. NOTE. URL: <a href="https://www.w3.org/TR/css-mobile/">https://www.w3.org/TR/css-mobile/</a> <dt id="biblio-csspp">[CSSPP] <dd>D. Wright; J. Bigelow, eds.. <a href="http://www.pwg.org/xhtml-print/HTML-Version/CSS-Print.html"><cite>CSS Print Profile</cite></a>. 28 March 2003. Proposed Standard 5102.2. URL: <a href="http://www.pwg.org/xhtml-print/HTML-Version/CSS-Print.html">http://www.pwg.org/xhtml-print/HTML-Version/CSS-Print.html</a> <dt id="biblio-xhtml-print">[XHTML-PRINT] <dd>Shane McCarron. <a href="https://www.w3.org/TR/xhtml-print/"><cite>XHTML-Print - Second Edition</cite></a>. 27 March 2018. REC. URL: <a href="https://www.w3.org/TR/xhtml-print/">https://www.w3.org/TR/xhtml-print/</a> </dl> <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"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-top"}, "0570259e": {"dfnID":"0570259e","dfnText":"float","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-float"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css2/#propdef-float"}, "07083329": {"dfnID":"07083329","dfnText":"caption-side","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-caption-side"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-tables-3/#propdef-caption-side"}, "11fb4d5b": {"dfnID":"11fb4d5b","dfnText":"background-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-color"},{"id":"ref-for-propdef-background-color\u2460"},{"id":"ref-for-propdef-background-color\u2461"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color"}, "12f8fb07": {"dfnID":"12f8fb07","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "157236b0": {"dfnID":"157236b0","dfnText":"object-position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-object-position"},{"id":"ref-for-propdef-object-position\u2460"}],"title":"Unnumbered Section"},{"refs":[{"id":"ref-for-propdef-object-position\u2461"},{"id":"ref-for-propdef-object-position\u2462"}],"title":"4. 4. Properties"},{"refs":[{"id":"ref-for-propdef-object-position\u2463"},{"id":"ref-for-propdef-object-position\u2464"},{"id":"ref-for-propdef-object-position\u2465"},{"id":"ref-for-propdef-object-position\u2466"}],"title":"4.1. Image Rendering Properties"}],"url":"https://drafts.csswg.org/css-images-3/#propdef-object-position"}, "16d57f47": {"dfnID":"16d57f47","dfnText":"list-style-position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style-position"},{"id":"ref-for-propdef-list-style-position\u2460"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-position"}, "17b2caf5": {"dfnID":"17b2caf5","dfnText":"border-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right"}, "17d6dd37": {"dfnID":"17d6dd37","dfnText":"counter-reset","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-counter-reset"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-lists-3/#propdef-counter-reset"}, "1a947799": {"dfnID":"1a947799","dfnText":"border-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left"}, "2467179e": {"dfnID":"2467179e","dfnText":"content","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-content"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-content-3/#propdef-content"}, "24c4db74": {"dfnID":"24c4db74","dfnText":"border-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top"}, "2589df91": {"dfnID":"2589df91","dfnText":"orphans","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-orphans"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-orphans"}, "2c57f900": {"dfnID":"2c57f900","dfnText":"font","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font"}, "37c6bd4e": {"dfnID":"37c6bd4e","dfnText":"padding-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-right"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding-right"}, "3b47d5a5": {"dfnID":"3b47d5a5","dfnText":"list-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style"}, "3d5243d5": {"dfnID":"3d5243d5","dfnText":"object-fit","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-object-fit"},{"id":"ref-for-propdef-object-fit\u2460"}],"title":"Unnumbered Section"},{"refs":[{"id":"ref-for-propdef-object-fit\u2461"},{"id":"ref-for-propdef-object-fit\u2462"}],"title":"4. 4. Properties"},{"refs":[{"id":"ref-for-propdef-object-fit\u2463"},{"id":"ref-for-propdef-object-fit\u2464"},{"id":"ref-for-propdef-object-fit\u2465"}],"title":"4.1. Image Rendering Properties"}],"url":"https://drafts.csswg.org/css-images-4/#propdef-object-fit"}, "42871fa3": {"dfnID":"42871fa3","dfnText":"border-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-style"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style"}, "4356bfe3": {"dfnID":"4356bfe3","dfnText":"text-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-align"}],"title":"4. 4. Properties"}],"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"}],"title":"4. 4. Properties"}],"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"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "500f2c1d": {"dfnID":"500f2c1d","dfnText":"border-top-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-color"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color"}, "5b2f5ec2": {"dfnID":"5b2f5ec2","dfnText":"vertical-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-vertical-align"}],"title":"4. 4. Properties"}],"url":"https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-vertical-align"}, "5bc3d0ec": {"dfnID":"5bc3d0ec","dfnText":"text-decoration","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-decoration"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration"}, "5c4b7db5": {"dfnID":"5c4b7db5","dfnText":"border-bottom-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-color"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color"}, "5d5540ea": {"dfnID":"5d5540ea","dfnText":"image-orientation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-image-orientation"},{"id":"ref-for-propdef-image-orientation\u2460"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-images-3/#propdef-image-orientation"}, "5ddc23c6": {"dfnID":"5ddc23c6","dfnText":"page-break-after","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-after"}],"title":"4. 4. Properties"}],"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":"4. 4. Properties"}],"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":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "6882117f": {"dfnID":"6882117f","dfnText":"border-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-spacing"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-tables-3/#propdef-border-spacing"}, "6b14b18a": {"dfnID":"6b14b18a","dfnText":"clip","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-clip"}],"title":"4. 4. Properties"}],"url":"https://drafts.fxtf.org/css-masking-1/#propdef-clip"}, "73759fff": {"dfnID":"73759fff","dfnText":"border-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-color"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color"}, "73ff3e7a": {"dfnID":"73ff3e7a","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"4. 4. Properties"}],"url":"https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-display"}, "76207212": {"dfnID":"76207212","dfnText":"padding-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-left"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding-left"}, "8000726e": {"dfnID":"8000726e","dfnText":"border-left-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-width"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "86928bde": {"dfnID":"86928bde","dfnText":"overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "8831f13c": {"dfnID":"8831f13c","dfnText":"text-indent","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-indent"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-text-indent"}, "88643fe0": {"dfnID":"88643fe0","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-width"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "8b78f470": {"dfnID":"8b78f470","dfnText":"border-right-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-style"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style"}, "8f568cb6": {"dfnID":"8f568cb6","dfnText":"page-break-before","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-before"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, "9112c920": {"dfnID":"9112c920","dfnText":"border-left-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-color"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color"}, "911f092b": {"dfnID":"911f092b","dfnText":"border-collapse","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-collapse"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-tables-3/#propdef-border-collapse"}, "9436e460": {"dfnID":"9436e460","dfnText":"clear","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-clear"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css2/#propdef-clear"}, "96d5b742": {"dfnID":"96d5b742","dfnText":"fill","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-object-fit-fill"}],"title":"4.1. Image Rendering Properties"}],"url":"https://drafts.csswg.org/css-images-3/#valdef-object-fit-fill"}, "989f9ee6": {"dfnID":"989f9ee6","dfnText":"border-right-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-width"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width"}, "99775498": {"dfnID":"99775498","dfnText":"border-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom"}, "9d7987cb": {"dfnID":"9d7987cb","dfnText":"border-right-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-color"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color"}, "a4f9641f": {"dfnID":"a4f9641f","dfnText":"border-left-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-style"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style"}, "a58a3cd8": {"dfnID":"a58a3cd8","dfnText":"bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-bottom"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-bottom"}, "a8fe91d7": {"dfnID":"a8fe91d7","dfnText":"font-weight","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-weight"},{"id":"ref-for-propdef-font-weight\u2460"},{"id":"ref-for-propdef-font-weight\u2461"},{"id":"ref-for-propdef-font-weight\u2462"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-weight"}, "a9734ee4": {"dfnID":"a9734ee4","dfnText":"border","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border"}, "aaf6abed": {"dfnID":"aaf6abed","dfnText":"margin-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-left"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-left"}, "ac54fbff": {"dfnID":"ac54fbff","dfnText":"line-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-line-height"},{"id":"ref-for-propdef-line-height\u2460"},{"id":"ref-for-propdef-line-height\u2461"},{"id":"ref-for-propdef-line-height\u2462"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "ad065a5c": {"dfnID":"ad065a5c","dfnText":"margin-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-right"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-right"}, "b0b8d8c0": {"dfnID":"b0b8d8c0","dfnText":"right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-right"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "b16da9c9": {"dfnID":"b16da9c9","dfnText":"background-repeat","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-repeat"},{"id":"ref-for-propdef-background-repeat\u2460"},{"id":"ref-for-propdef-background-repeat\u2461"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat"}, "b5418f3e": {"dfnID":"b5418f3e","dfnText":"padding","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "b6730ce5": {"dfnID":"b6730ce5","dfnText":"widows","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-widows"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-break-4/#propdef-widows"}, "b8a0ba74": {"dfnID":"b8a0ba74","dfnText":"position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-position"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "b8d7db46": {"dfnID":"b8d7db46","dfnText":"counter-increment","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-counter-increment"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-lists-3/#propdef-counter-increment"}, "c9ecad15": {"dfnID":"c9ecad15","dfnText":"border-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-width"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width"}, "ca62982f": {"dfnID":"ca62982f","dfnText":"padding-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-bottom"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding-bottom"}, "cacc0af2": {"dfnID":"cacc0af2","dfnText":"letter-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-letter-spacing"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-letter-spacing"}, "cbc54f93": {"dfnID":"cbc54f93","dfnText":"text-transform","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-transform"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-text-transform"}, "cbfeec00": {"dfnID":"cbfeec00","dfnText":"margin-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-bottom"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin-bottom"}, "cecbe9cd": {"dfnID":"cecbe9cd","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "d27a809f": {"dfnID":"d27a809f","dfnText":"background-position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-position"},{"id":"ref-for-propdef-background-position\u2460"},{"id":"ref-for-propdef-background-position\u2461"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position"}, "d45afbab": {"dfnID":"d45afbab","dfnText":"font-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-style"},{"id":"ref-for-propdef-font-style\u2460"},{"id":"ref-for-propdef-font-style\u2461"},{"id":"ref-for-propdef-font-style\u2462"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-style"}, "d65d17df": {"dfnID":"d65d17df","dfnText":"font-family","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-family"},{"id":"ref-for-propdef-font-family\u2460"},{"id":"ref-for-propdef-font-family\u2461"},{"id":"ref-for-propdef-font-family\u2462"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-family"}, "d7751a40": {"dfnID":"d7751a40","dfnText":"color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-color"},{"id":"ref-for-propdef-color\u2460"}],"title":"4. 4. Properties"}],"url":"https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color"}, "dd0f8cfb": {"dfnID":"dd0f8cfb","dfnText":"border-bottom-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-width"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width"}, "dde41168": {"dfnID":"dde41168","dfnText":"left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-left"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "de56fbfe": {"dfnID":"de56fbfe","dfnText":"list-style-type","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style-type"},{"id":"ref-for-propdef-list-style-type\u2460"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-type"}, "decf3b99": {"dfnID":"decf3b99","dfnText":"page","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-page-3/#propdef-page"}, "e1483d91": {"dfnID":"e1483d91","dfnText":"top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-top"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-top"}, "e1ea7acd": {"dfnID":"e1ea7acd","dfnText":"table-layout","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-table-layout"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-tables-3/#propdef-table-layout"}, "e4039478": {"dfnID":"e4039478","dfnText":"border-top-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-style"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style"}, "e450523b": {"dfnID":"e450523b","dfnText":"list-style-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style-image"},{"id":"ref-for-propdef-list-style-image\u2460"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-image"}, "ebfaf864": {"dfnID":"ebfaf864","dfnText":"border-bottom-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-style"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style"}, "f5eca8c9": {"dfnID":"f5eca8c9","dfnText":"background","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background"}, "f6cbcbce": {"dfnID":"f6cbcbce","dfnText":"page-break-inside","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-inside"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-inside"}, "f831c141": {"dfnID":"f831c141","dfnText":"background-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-image"},{"id":"ref-for-propdef-background-image\u2460"},{"id":"ref-for-propdef-background-image\u2461"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image"}, "f95a7c3b": {"dfnID":"f95a7c3b","dfnText":"background-attachment","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-attachment"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-attachment"}, "fb7153bd": {"dfnID":"fb7153bd","dfnText":"font-variant","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-variant"},{"id":"ref-for-propdef-font-variant\u2460"},{"id":"ref-for-propdef-font-variant\u2461"}],"title":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-variant"}, "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":"4. 4. Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-size"}, }; 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-ref-hints */ "use strict"; { let refsData = { "https://drafts.csswg.org/css-backgrounds-3/#propdef-background": {"displayText":"background","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background"}, "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-color": {"displayText":"background-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image": {"displayText":"background-image","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-image","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position": {"displayText":"background-position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-position","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat": {"displayText":"background-repeat","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-repeat","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border": {"displayText":"border","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom": {"displayText":"border-bottom","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color": {"displayText":"border-bottom-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style": {"displayText":"border-bottom-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-style"}, "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-color": {"displayText":"border-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left": {"displayText":"border-left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color": {"displayText":"border-left-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style": {"displayText":"border-left-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-style"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width": {"displayText":"border-left-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right": {"displayText":"border-right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color": {"displayText":"border-right-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style": {"displayText":"border-right-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-style"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width": {"displayText":"border-right-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style": {"displayText":"border-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top": {"displayText":"border-top","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color": {"displayText":"border-top-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style": {"displayText":"border-top-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-style"}, "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/#propdef-border-width": {"displayText":"border-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width"}, "https://drafts.csswg.org/css-box-4/#propdef-margin": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "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": {"displayText":"padding","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "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-left": {"displayText":"padding-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding-left","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding-left"}, "https://drafts.csswg.org/css-box-4/#propdef-padding-right": {"displayText":"padding-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding-right","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding-right"}, "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-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/#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-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-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-fonts-4/#propdef-font": {"displayText":"font","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-family": {"displayText":"font-family","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-family","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-family"}, "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-fonts-4/#propdef-font-style": {"displayText":"font-style","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-style","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-style"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-variant": {"displayText":"font-variant","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-variant","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-variant"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-weight": {"displayText":"font-weight","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-weight","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-weight"}, "https://drafts.csswg.org/css-images-3/#propdef-image-orientation": {"displayText":"image-orientation","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"image-orientation","type":"property","url":"https://drafts.csswg.org/css-images-3/#propdef-image-orientation"}, "https://drafts.csswg.org/css-images-3/#propdef-object-position": {"displayText":"object-position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"object-position","type":"property","url":"https://drafts.csswg.org/css-images-3/#propdef-object-position"}, "https://drafts.csswg.org/css-images-3/#valdef-object-fit-fill": {"displayText":"fill","export":true,"for_":["object-fit"],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"fill","type":"value","url":"https://drafts.csswg.org/css-images-3/#valdef-object-fit-fill"}, "https://drafts.csswg.org/css-images-4/#propdef-object-fit": {"displayText":"object-fit","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-images","spec":"css-images-4","status":"current","text":"object-fit","type":"property","url":"https://drafts.csswg.org/css-images-4/#propdef-object-fit"}, "https://drafts.csswg.org/css-lists-3/#propdef-counter-increment": {"displayText":"counter-increment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"current","text":"counter-increment","type":"property","url":"https://drafts.csswg.org/css-lists-3/#propdef-counter-increment"}, "https://drafts.csswg.org/css-lists-3/#propdef-counter-reset": {"displayText":"counter-reset","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"current","text":"counter-reset","type":"property","url":"https://drafts.csswg.org/css-lists-3/#propdef-counter-reset"}, "https://drafts.csswg.org/css-lists-3/#propdef-list-style": {"displayText":"list-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"current","text":"list-style","type":"property","url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style"}, "https://drafts.csswg.org/css-lists-3/#propdef-list-style-image": {"displayText":"list-style-image","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"current","text":"list-style-image","type":"property","url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-image"}, "https://drafts.csswg.org/css-lists-3/#propdef-list-style-position": {"displayText":"list-style-position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"current","text":"list-style-position","type":"property","url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-position"}, "https://drafts.csswg.org/css-lists-3/#propdef-list-style-type": {"displayText":"list-style-type","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"current","text":"list-style-type","type":"property","url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-type"}, "https://drafts.csswg.org/css-overflow-3/#propdef-overflow": {"displayText":"overflow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overflow","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "https://drafts.csswg.org/css-page-3/#propdef-page": {"displayText":"page","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"current","text":"page","type":"property","url":"https://drafts.csswg.org/css-page-3/#propdef-page"}, "https://drafts.csswg.org/css-position-3/#propdef-bottom": {"displayText":"bottom","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"bottom","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-bottom"}, "https://drafts.csswg.org/css-position-3/#propdef-left": {"displayText":"left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"left","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "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-position-3/#propdef-right": {"displayText":"right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"right","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "https://drafts.csswg.org/css-position-3/#propdef-top": {"displayText":"top","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"top","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-top"}, "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-tables-3/#propdef-border-collapse": {"displayText":"border-collapse","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-tables","spec":"css-tables-3","status":"current","text":"border-collapse","type":"property","url":"https://drafts.csswg.org/css-tables-3/#propdef-border-collapse"}, "https://drafts.csswg.org/css-tables-3/#propdef-border-spacing": {"displayText":"border-spacing","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-tables","spec":"css-tables-3","status":"current","text":"border-spacing","type":"property","url":"https://drafts.csswg.org/css-tables-3/#propdef-border-spacing"}, "https://drafts.csswg.org/css-tables-3/#propdef-caption-side": {"displayText":"caption-side","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-tables","spec":"css-tables-3","status":"current","text":"caption-side","type":"property","url":"https://drafts.csswg.org/css-tables-3/#propdef-caption-side"}, "https://drafts.csswg.org/css-tables-3/#propdef-table-layout": {"displayText":"table-layout","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-tables","spec":"css-tables-3","status":"current","text":"table-layout","type":"property","url":"https://drafts.csswg.org/css-tables-3/#propdef-table-layout"}, "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-letter-spacing": {"displayText":"letter-spacing","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"letter-spacing","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-letter-spacing"}, "https://drafts.csswg.org/css-text-4/#propdef-text-indent": {"displayText":"text-indent","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"text-indent","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-text-indent"}, "https://drafts.csswg.org/css-text-4/#propdef-text-transform": {"displayText":"text-transform","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"text-transform","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-text-transform"}, "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-decor-4/#propdef-text-decoration": {"displayText":"text-decoration","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-4","status":"current","text":"text-decoration","type":"property","url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration"}, "https://drafts.csswg.org/css2/#propdef-clear": {"displayText":"clear","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"clear","type":"property","url":"https://drafts.csswg.org/css2/#propdef-clear"}, "https://drafts.csswg.org/css2/#propdef-float": {"displayText":"float","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"float","type":"property","url":"https://drafts.csswg.org/css2/#propdef-float"}, "https://drafts.csswg.org/css2/#propdef-line-height": {"displayText":"line-height","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"line-height","type":"property","url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "https://drafts.csswg.org/css2/#propdef-page-break-after": {"displayText":"page-break-after","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","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":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"page-break-before","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, "https://drafts.csswg.org/css2/#propdef-page-break-inside": {"displayText":"page-break-inside","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"page-break-inside","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-inside"}, "https://drafts.fxtf.org/css-masking-1/#propdef-clip": {"displayText":"clip","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"current","text":"clip","type":"property","url":"https://drafts.fxtf.org/css-masking-1/#propdef-clip"}, "https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color": {"displayText":"color","export":true,"for_":[],"level":"","normative":true,"shortname":"css21","spec":"css21","status":"anchor-block","text":"color","type":"property","url":"https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color"}, "https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"","normative":true,"shortname":"css21","spec":"css21","status":"anchor-block","text":"display","type":"property","url":"https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-display"}, "https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-vertical-align": {"displayText":"vertical-align","export":true,"for_":[],"level":"","normative":true,"shortname":"css21","spec":"css21","status":"anchor-block","text":"vertical-align","type":"property","url":"https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-vertical-align"}, }; 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 ref = refsData[url]; 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>