This page is only available in English. If you want to help us translate, you can open an issue on Github and we’ll guide you through the process. Thank you!
CSS Paged Media Module Level 3
W3C Working Draft 14 March 2013
Editor’s Draft, 9 November 2017
| @page rules | |||
|---|---|---|---|
| Size | size: <length>{1,2} ; | HTML | |
| size: A5 | A4 | A3 | B5 | B4 | letter | legal | ledger ; | HTML | ||
| size: portrait | landscape ; | HTML | ||
| Marks | marks: none | [ crop || cross ] ; | HTML | Screenshot |
| Bleed | bleed: <length> ; | HTML | screenshot |
| Margins | margin: <length>{1,2} ; | HTML | |
| margin-top: <length> ; margin-bottom: <length> ; margin-left: <length> ; margin-right: <length> ; |
HTML | ||
| margin-inside: <length> ; margin-outside: <length> ; |
no | ||
| Background | background-color: ... ; | HTML | |
| background-image: url(<url>) ; | HTML | ||
| background-size: ... ; background-repeat: ... ; background-position: ... ; |
HTML | ||
| Page selectors | |||
| Spread | @page :left { } @page :right { } |
HTML | |
| First page | @page :first { } | HTML | |
| Blank page | @page :blank { } | HTML | |
| nth page | @page :nth(n) { } | HTML | |
| Margin boxes | |||
| Default | HTML | ||
| Styles | bakground: ... ; color: ... ; border:... ; |
HTML | |
| Text alignment | text-align: left | center | right ; | HTML | |
| Vertical alignment | vertical-align: top | middle | bottom ; or align-items: flex-start | center | flex-end ; |
HTML | |
| Computed | ... | in progress | |
| Page-based counters | |||
| counter for page | content : counter(page) ; | HTML | |
| content : counter(pages) ; | HTML | ||
| Named page | |||
| named @page | @page <name> { } section { page: <name> } |
HTML | |
| Page group | |||
| page group | @page <name> { } section { page: <name> } |
HTML | |
| Page selectors for page group | |||
| Spread | @page <name>:left { } @page <name>:left { } |
HTML | |
| First page | @page <name>:first { } | HTML | |
| Blank page | @page <name>:blank { } | issue#30 | |
| nth page | @page <name>:nth(n) { } | issue#29 | |
CSS Fragmentation Module Level 3
W3C Candidate Recommendation, 9 February 2017
| Breaks Between Boxes | |||
|---|---|---|---|
| Breaks before | break-before: avoid-page | avoid ; | no | |
| break-before: page ; | HTML | ||
| break-before: left ; | HTML | ||
| break-before: right ; | HTML | ||
| break-before: recto ; | HTML | ||
| break-before: verso ; | HTML | ||
| break-before: column | region; | ? | ||
| Breaks after | break-after: avoid-page | avoid ; | no | |
| break-after: page ; | HTML | ||
| break-after: left ; | HTML | ||
| break-after: right ; | HTML | ||
| break-after: recto ; | HTML | ||
| break-after: verso ; | HTML | ||
| break-after: column | region ; | ? | ||
| Avoid breaks inside | break-inside: avoid ; | HTML | |
| break-inside: avoid-page ; | no | ||
| break-inside: avoid-column; | ? | ||
| break-inside: avoid-region ; | ? | ||
| Breaks Between Lines | |||
| Orphans | orphans: <integer> ; | Chrome and blink browsers supports orphans out of the box. Firefox doen't. Check support from caniuse.com |
|
| Widows | widows: <integer> ; | Chrome and blink browsers supports widows out of the box. Firefox doen't. Check support from caniuse.com |
|
| Fragmented Borders and Backgrounds | |||
| box-decorations | box-decoration-break: slice | clone ; | no | |
CSS Generated Content for Paged Media Module
W3C Working Draft, 13 May 2014
| Named strings | |||
|---|---|---|---|
| String-set() on elements | string-set: [[<custom-ident> <content-list>][, <custom-ident> <content-list>]* ] | ||
| <content-list>= | <string> | HTML | |
| content(text) | HTML | ||
| content(before) | Issue#45 | ||
| content(after) | Issue#45 | ||
| content(first-letter) | Issue#45 | ||
| counter() | no | ||
| counters() | no | ||
| attr(<identifier>) | no | ||
| String in margin-boxes | content: string( <custom-ident> [ , [ <keyword>] ]? ) | ||
| <keyword>= | first | Pending merge request | |
| start | Pending merge request | ||
| last | Pending merge request | ||
| first-except | HTML | ||
| Running elements | |||
| Running value on elements | position: running(<custom-ident>) ; | HTML | |
| Element value in margin boxes | content: element(...) ; element( <custom-ident> [ , <keyword> ]? ) |
HTML | |
| <keyword>= | first | no | |
| start | no | ||
| last | no | ||
| first-except | no | ||
| Footnotes | |||
| Footnotes area | @footnote{ float: bottom ; } | no | |
| Footnote element | .note { float: footnote ; } | no | |
| Footnote type | footnote-display: block | inline | compact ; | no | |
| Rendering footnotes | footnote-policy: auto | line | block ; | no | |
| Footnotes counters | ::footnote-call { } ::footnote-call { content: counter(footnote [, <counter-style>, <string>] ; } |
no | |
| ::footnote-marker { } ::footnote-marker { content: counter(footnote [, <counter-style>, <string>] ; } |
no | ||
| Reset footnotes | @page { counter-reset: footnote ; } | no | |
| Leaders | |||
| leaders | content : leader(<type>) ; | no | |
| <type>= | dotted | no | |
| solid | no | ||
| space | no | ||
| <string> | no | ||
| Cross-references | |||
| Counter type | content: target-counter(attr(href url), page) ; target-counter( <url> , <custom-ident> [ , <counter-style> ]? ) |
HTML + Issue#46 |
|
| target-counters( <url> , <custom-ident> [ , <counter-style> ]? ) | no | ||
| Text type | content: target-content(attr(href)) ; target-text( <url> [ , <keyword> ]? ) |
||
| <keyword>= | content | HTML | |
| before | HTML | ||
| after | HTML | ||
| first-letter | HTML | ||
| PDF bookmarks | |||
| Bookmarks | bookmark-level: <integer> ; | no | |
| bookmark-label: <content-list> | no | ||
| bookmark-state: open | close ; | no | ||