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 | ||