back

CSS for Print & Paged Media

Unlike websites, which are not constrained by any physical document size, paged media are limited by the size of the target page like an A4 page. Fortunately, CSS supports paged media. Let's go through some of the basic concepts and CSS properties that will help you control your document flow on a paged document.

The page size

In CSS you can define a page and a reference to it by name or special selectors (e.g. :left, :right). Use the @page rule to set the relevant page properties.

@page { size: A4; }

This is the minimum requirement for defining a page. Other size options could look like:

@page { size: A4 landscape; size: 400mm 200mm; size: 10in 20in; }

The page margins

Margins can also be defined within the @page - rule.

@page { size: A4; margin: 20mm; }

Printing current and total page number

Assume you want to print the current and total page number on each page at the bottom right corner. Within the @page rule, you also have access to 16 pre-defined margin areas, all of which will automatically position and align. You can read more about those margin areas here.

@page { size: A4; margin: 20mm; @bottom-right { content: 'Page' counter(page) ' of ' counter(pages); } }

The two counters page and pages are special predefined counters that will always return the current page or total document page number respectively.

Adding header and footer

In addition to the 16 pre-defined margin areas mentioned above, you can also define as many area as you want anywhere on the page yourself. Use the @area rule inside the @page rule for that.

@page { size: A4; margin: 50mm 20mm 20mm; @area my-awesome-header { content: 'Here is a page header'; background: red; top: 5mm; left: 20mm; right: 20mm; } }

This works smoothly, but let’s say you want to use an element (e.g. <div id="header">Hello Page</div>) within your document, and position it inside your “awesome-header” area.

@page { size: A4; margin: 50mm 20mm 20mm; @area my-awsome-header { content: element(my-header); background: red; top: 5mm; left: 20mm; right: 20mm; } } #header { position: running(my-header); }

You basically define an element at the beginning, that you would like to see as your header, as a running-element, and place it inside your page area. The element then appears printed on every page.

You can read more about paged generated content at www.w3.org, where also more options that facilitate content fine-tuning.

Working with page groups

Consider following issue, you have multiple chapters in your document and you want to change the layout of the first page of each chapter. This can be done by using page groups. A page group is created each time a named page is introduced with page: page-name. If two adjoining elements introducing the same page, they will be joined and the internal page group count is not getting reseted, therefor you must force a page break before and after to ensure that each chapter will introduce a new page group.

@page chapter { background: grey; } section.chapter { page: chapter; break-after: page; break-before: page; }

In addition, a page can belong to multiple page groups. If a nested element sets a new named page with page: page-name then it will create a new name page.

Bellow is a simple example of page group for each chapter. You can also read more about it at w3.org.

<!DOCTYPE html> <html lang="la"> <head> <meta charset="UTF-8"> <title>Page groups</title> <style> @page { size: 120mm 120mm; margin: 10mm; @bottom-center { content: counter(page) ' of ' counter(pages); font-size: 10pt; color: grey; } } /* First page of each chapter */ @page :nth(0n + 1 of chapter) { margin-top: 40mm; background: lightyellow; border-top: #000000 2pt dashed; @bottom-center { content: none; } } section.chapter { page: chapter; break-before: page; break-after: page; column-count: 2; } h1 { font-size: 25pt; break-after: avoid; column-span: all; text-align: center; } h2 { font-size: 20pt; font-weight: bold; break-after: avoid; column-span: all; text-align: center; } p { margin: 0 0 0.5em; font-size: 12pt; text-align: justify; hyphens: auto; hyphenate-limit-lines: 2; } .image { position: relative; padding: 2mm; border: 0.2mm solid black; } .image img { width: 100%; } .image .author { display: block; position: absolute; top: 2%; right: 0; background: rgba(0, 0, 0, .7); color: white; font-size: 6pt; padding: 2mm; } </style> </head> <body> <section class="chapter"> <h1>Chapter 1</h1> <h2>Vel ut detraxit pericula tractatos</h2> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <p>Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> <h2>Nam ei solum tollit scriptorem</h2> <p>Alienum neglegentur quo ut, vis id exerci inermis, cu aperiri noluisse sed. Et usu decore nostro, ea tritani eleifend accommodare qui. Delenit facilis explicari nec at. Ei sea corpora theophrastus, vix melius blandit an, ne pro partem perfecto inciderint. Munere aperiri tacimates sed et, oratio mucius prompta mei cu.</p> <p>Te nibh ferri bonorum qui, cu illum ullum omnium usu. Magna fastidii mei an, duo volumus accusam voluptaria te, nam ut tollit nostrud suavitate. Ea habemus posidonium repudiandae mel, lorem vivendum pri ea. Quem odio sea at, ex vidisse alterum inimicus sit. Nostrud labores mel ex, in altera semper offendit duo, porro mentitum omittantur eos cu.</p> <div class="image"> <img src="https://typeset.sh/images/demo/yellow-and-white-sail-boat-on-sea-3703074.jpg" /> <span class="author">Photo by Dimitry Anikin from Pexels</span> </div> <p>Eum vero vidisse eu. Qui ut duis alienum, his viris delicata no. Habeo ornatus qualisque te nam, duo nominati persequeris id, sed regione instructior ex. Nec ex quodsi appellantur. Ius persius omittantur ea. Vis tibique iudicabit cu, id mei labore accommodare. Ut eam commodo oblique adolescens.</p> <h2>Nec ex quodsi appellantur</h2> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <p>Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> </section> <section class="chapter"> <h1>Chapter 2</h1> <h2>Vel ut detraxit pericula tractatos</h2> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <p>Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> <h2>Nam ei solum tollit scriptorem</h2> <p>Alienum neglegentur quo ut, vis id exerci inermis, cu aperiri noluisse sed. Et usu decore nostro, ea tritani eleifend accommodare qui. Delenit facilis explicari nec at. Ei sea corpora theophrastus, vix melius blandit an, ne pro partem perfecto inciderint. Munere aperiri tacimates sed et, oratio mucius prompta mei cu.</p> <p>Te nibh ferri bonorum qui, cu illum ullum omnium usu. Magna fastidii mei an, duo volumus accusam voluptaria te, nam ut tollit nostrud suavitate. Ea habemus posidonium repudiandae mel, lorem vivendum pri ea. Quem odio sea at, ex vidisse alterum inimicus sit. Nostrud labores mel ex, in altera semper offendit duo, porro mentitum omittantur eos cu.</p> <div class="image"> <img src="https://typeset.sh/images/demo/yellow-and-white-sail-boat-on-sea-3703074.jpg" /> <span class="author">Photo by Dimitry Anikin from Pexels</span> </div> <p>Eum vero vidisse eu. Qui ut duis alienum, his viris delicata no. Habeo ornatus qualisque te nam, duo nominati persequeris id, sed regione instructior ex. Nec ex quodsi appellantur. Ius persius omittantur ea. Vis tibique iudicabit cu, id mei labore accommodare. Ut eam commodo oblique adolescens.</p> <h2>Nec ex quodsi appellantur</h2> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <p>Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> </section> </body> </html>