### Create page header with @top-left and @top-right margin boxes Source: https://www.w3.org/TR/css-page-3 Establishes a page header using margin at-rules inside the page context. The @top-left box contains the title "Hamlet" and the @top-right box contains the page number preceded by "Page ". Place margin at-rules after any declarations in the page context for compatibility with legacy clients. ```css @page { size: 8.5in 11in; margin: 10%; @top-left { content: "Hamlet"; } @top-right { content: "Page " counter(page); } } ``` -------------------------------- ### Page with top-left and top-center headers Source: https://www.w3.org/TR/css-page-3 Defines a page with both top-left and top-center headers. ```css @page { @top-left { content: "Left Cell (top-left)" } @top-center { content: "Header in Center Cell (top-center)" } } ``` -------------------------------- ### Page with top-center and top-right headers Source: https://www.w3.org/TR/css-page-3 Defines a page with both top-center and top-right headers. ```css @page { @top-center { content: "Header in Center Cell (top-center)" } @top-right { content: "Right Cell (top-right)" } } ``` -------------------------------- ### Set first page top margin with :first pseudo-class Source: https://www.w3.org/TR/css-page-3 Sets all margins to 2cm for every page and overrides the top margin to 10cm for the first printed page using the :first pseudo-class. ```css @page { margin: 2cm } /* All margins set to 2cm */ @page :first { margin-top: 10cm /* Top margin on first page 10cm */ } ``` -------------------------------- ### Set page size to A4 landscape Source: https://www.w3.org/TR/css-page-3 Sets the page size to A4 and the orientation to landscape using the name with the landscape keyword. ```css @page { size: A4 landscape; } ``` -------------------------------- ### Make all pages even-numbered with counter-increment: page 2 Source: https://www.w3.org/TR/css-page-3 Makes all pages even-numbered by incrementing the page counter by 2 in the page context. ```css @page { counter-increment: page 2; } ``` -------------------------------- ### Using named pages with the page property Source: https://www.w3.org/TR/css-page-3 Uses the page property with named @page rules to give different sections different page sizes in a vertical-rl Japanese document. The .main section uses a two-column layout with a 61rem page height, while .index uses three columns with a 62rem height; the base @page rule centers the kihon hanmen with a 40rem width. ```html
...
...
``` -------------------------------- ### Force first page with break-before: always Source: https://www.w3.org/TR/css-page-3 Forces the first page of an HTML document to print on a right page when the page progression is left-to-right. The UA suppresses the first empty page and the :first pseudo-class matches the first printed page. ```css html { break-before: always } ``` -------------------------------- ### Add header to blank pages with :blank pseudo-class Source: https://www.w3.org/TR/css-page-3 Forces a page break before h1 elements and adds a header to blank pages that result from forced page breaks. The :blank pseudo-class matches content-empty pages generated by break-before or break-after with left, right, recto, or verso values. ```css h1 { break-before: left } @page :blank { @top-center { content: "This page is intentionally left blank" } } ``` -------------------------------- ### Media queries for A4 and letter page sizes Source: https://www.w3.org/TR/css-page-3 Uses media queries to apply different page margins for A4 (21cm x 29.7cm) and letter (8.5in x 11in) page sizes. The first block sets a 3cm margin for A4 printing, and the second sets a 1in margin for letter printing. ```css /* style sheet for "A4" printing */ @media print and (width: 21cm) and (height: 29.7cm) { @page { margin: 3cm; } } ``` ```css /* style sheet for "letter" printing */ @media print and (width: 8.5in) and (height: 11in) { @page { margin: 1in; } } ``` -------------------------------- ### Set left and right page margins with :left and :right pseudo-classes Source: https://www.w3.org/TR/css-page-3 Defines different margins for left and right pages in double-sided printing. The :left pseudo-class matches left pages and :right matches right pages. User agents must honor these declarations even if they do not transfer page boxes to left and right sheets. ```css @page :left { margin-left: 3cm; margin-right: 4cm; } @page :right { margin-left: 4cm; margin-right: 3cm; } ``` -------------------------------- ### Force first page with break-before: left Source: https://www.w3.org/TR/css-page-3 Forces the first page of an HTML document to print on a left page regardless of the page progression. The UA suppresses the first empty page and the :first pseudo-class matches the first printed page. ```css html { break-before: left } ``` -------------------------------- ### Populating page-margin boxes with @page corner rules Source: https://www.w3.org/TR/css-page-3 Creates green boxes in each page corner except the bottom-left, which is suppressed by setting content to normal. Demonstrates that a page-margin box is generated only when its computed content value is not normal. ```css @page { @top-left-corner { content: " "; border: solid green; } @top-right-corner { content: url(foo.png); border: solid green; } @bottom-right-corner { content: counter(page); border: solid green; } @bottom-left-corner { content: normal; border: solid green; } } ``` -------------------------------- ### Set page size to 8.5in 11in Source: https://www.w3.org/TR/css-page-3 Sets the page box width to 8.5 inches and height to 11 inches, indicating a page sheet size of 8.5"x11" with portrait orientation. ```css @page { size: 8.5in 11in;/* width height */ } ``` -------------------------------- ### Set page size to auto with percentage margins Source: https://www.w3.org/TR/css-page-3 Sets the page size to auto (the initial value) and the margin to 10% of the page size. With an A4 sheet (210mm x 297mm), the margins become 21mm and 29.7mm, and the resulting page area is 189mm by 267.3mm. ```css @page { size: auto;/* auto is the initial value */ margin: 10%; } ``` -------------------------------- ### Page with top-left and top-right headers Source: https://www.w3.org/TR/css-page-3 Defines a page with top-left and top-right headers, where the left header has approximately twice as many words as the right cell. ```css @page { @top-left { content: "Header in top-left with approx. twice as many words as right cell." } @top-right { content: "Right cell (top-right)" } } ``` -------------------------------- ### Page with a centered header Source: https://www.w3.org/TR/css-page-3 Defines a page with a centered header in the top-center page-margin box. ```css @page { @top-center { content: "Header in Center Cell (top-center)" } } ``` -------------------------------- ### Ignore size in media query Source: https://www.w3.org/TR/css-page-3 Shows that a size declaration inside a media query that depends on page size is ignored. The second size declaration is ignored, so the specified value of the size property remains 4in 6in. ```css @page { size: 4in 6in; } @media (max-width: 6in) { @page { size: letter; } } ``` -------------------------------- ### Centered header with chapter counter Source: https://www.w3.org/TR/css-page-3 Creates a centered header with the current chapter name using a chapter counter reset on the body and incremented on each div.chapter. ```css body {counter-reset: chapter;} div.chapter {counter-increment: chapter;} @page { margin: 10%; @top-center { content: "Chapter" counter(chapter) } } ``` -------------------------------- ### Page with only a top-left header Source: https://www.w3.org/TR/css-page-3 Defines a page with only a top-left header. Because no contents are defined for top-center or top-right, the top-left box can extend across the center of the page. ```css @page { @top-left { content: "Header in Left Cell (top-left)" } } ``` -------------------------------- ### Display page number in margin box with counter(page) Source: https://www.w3.org/TR/css-page-3 Places the current page number in the middle of the outside margin of each page using the page counter in a page-margin box. ```css @page { margin: 10%; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } } ``` -------------------------------- ### Page with a single top-right header Source: https://www.w3.org/TR/css-page-3 Defines a page with a single header in the top-right page-margin box. Because the center cell is empty, the top-right box can extend across the center of the page. ```css @page { @top-right { content: "Header in Right Cell (top-right)" } } ``` -------------------------------- ### Remove header from blank pages with :blank and :right Source: https://www.w3.org/TR/css-page-3 Removes the top center header from blank pages while keeping the page number on right pages. The :blank pseudo-class has higher specificity than :right, so content: none overrides the header even if it appears before content: "Preliminary edition". ```css h1 { break-before: left } @page :blank { @top-center { content: none } } @page :right { @top-center { content: "Preliminary edition" } @bottom-center { content: counter(page) } } ``` -------------------------------- ### Using named pages with the page property Source: https://www.w3.org/TR/css-page-3 CSS defines two named pages: 'narrow' with a size of 9cm by 18cm and 'rotated' with landscape orientation. The 'page' property assigns the 'narrow' page to div elements and 'rotated' to table elements. The HTML document shows that after the second table, the paragraph is rendered on a 'narrow' page because the table's page property no longer applies. ```css @page narrow { size: 9cm 18cm } @page rotated { size: landscape } div { page: narrow } table { page: rotated } ``` ```html
...
...

This text is rendered on a 'narrow' page

``` -------------------------------- ### Set crop and cross marks with the marks property Source: https://www.w3.org/TR/css-page-3 Sets both crop and registration marks on a document. The marks are printed outside the page box and are only visible if the page box is smaller than the printable area. ```css @page { marks: crop cross } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.