Configure advanced @page properties including size, margins, and orientation
Create page headers and footers using @page margin boxes
Implement page counters and numbering with the counter() function
Control widows and orphans for professional text flow across pages
Apply column layouts optimized for print documents
Design professional document templates for invoices, reports, and resumes
Handle print-optimized tables with repeating headers and proper breaks
Master techniques for complex multi-page professional documents
Introduction to Advanced Print Techniques
Basic print styles handle simple documents, but professional documents—invoices, reports, resumes, contracts—require advanced techniques. These documents need precise control over page layout, consistent headers and footers, page numbering, and careful management of how content flows across multiple pages. They often serve legal or business purposes where formatting matters as much as content.
Advanced print CSS provides tools for these requirements: the @page at-rule with margin boxes for headers and footers, page counters for numbering, widow and orphan control for text flow, and specialized techniques for tables that span multiple pages. Combined with careful attention to typography and layout, these techniques produce print output indistinguishable from professionally typeset documents.
Advanced @page Configuration
The @page at-rule accepts properties beyond basic margins. You can specify exact paper sizes, control orientation, and set different properties for different pages using pseudo-classes. This level of control is essential for documents that must meet specific printing requirements.
@media print {
/* Default page setup */
@page {
size: letter portrait;
margin: 1in 0.75in 1in 0.75in;
}
/* First page with extra top margin */
@page :first {
margin-top: 2in;
}
/* Left pages (even-numbered in duplex printing) */
@page :left {
margin-left: 1.25in;
margin-right: 0.75in;
}
/* Right pages (odd-numbered in duplex printing) */
@page :right {
margin-left: 0.75in;
margin-right: 1.25in;
}
/* Landscape pages */
@page landscape {
size: letter landscape;
margin: 0.75in 1in;
}
}
Named page types like @page landscape can be applied to specific elements using the page property. This allows mixing orientations within a document—portrait for text, landscape for wide tables or charts.
Page Headers and Footers
Page margin boxes allow you to place content in the margins of every page—typically headers showing document titles and footers with page numbers. These are defined within the @page rule using special at-rules like @top-center and @bottom-right.
@media print {
@page {
size: letter;
margin: 1.5in 1in 1in 1in;
/* Header at top center */
@top-center {
content: "Quarterly Sales Report";
font-family: Georgia, serif;
font-size: 10pt;
color: #666;
border-bottom: 1pt solid #ccc;
padding-bottom: 0.25in;
}
/* Footer at bottom right */
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
font-family: Georgia, serif;
font-size: 9pt;
color: #666;
}
/* Footer at bottom left */
@bottom-left {
content: "Confidential";
font-size: 9pt;
color: #999;
}
}
}
Margin boxes are positioned in a grid around the page: @top-left, @top-center, @top-right for headers; @bottom-left, @bottom-center, @bottom-right for footers. Additional positions like @left-top and @right-middle provide fine-grained control.
Page Counters and Numbering
CSS counters track page numbers automatically. The counter(page) function returns the current page number, while counter(pages) returns the total page count. You can use these in margin boxes or with pseudo-elements for custom numbering schemes.
@media print {
@page {
@bottom-center {
content: counter(page);
font-size: 10pt;
}
}
/* Different numbering for front matter */
@page front-matter {
@bottom-center {
content: counter(page, lower-roman);
}
}
/* Custom page numbering with text */
.page-number::after {
content: "Page " counter(page) " of " counter(pages);
}
/* Reset counter for appendix */
.appendix {
counter-reset: page 1;
}
}
The counter() function accepts an optional second parameter for numbering style: decimal (default), lower-roman (i, ii, iii), upper-roman (I, II, III), lower-alpha (a, b, c), or upper-alpha (A, B, C).
Widows and Orphans Control
Widows and orphans are typographic terms for lines stranded at page breaks. A widow is a single line at the top of a page; an orphan is a single line at the bottom. Both disrupt reading flow and look unprofessional. CSS properties control how many lines must stay together at page boundaries.
@media print {
/* Minimum 3 lines at bottom of page */
p,
li,
blockquote {
orphans: 3;
}
/* Minimum 3 lines at top of page */
p,
li,
blockquote {
widows: 3;
}
/* More conservative settings for formal documents */
article.formal p {
orphans: 4;
widows: 4;
}
}
Setting orphans: 3 and widows: 3 ensures at least three lines stay together. If a paragraph would break with fewer lines, the entire paragraph moves to the next page. This prevents awkward single lines but may create more white space at page ends.
Multi-Column Print Layouts
Some documents benefit from multi-column layouts: newsletters, programs, certain reports. CSS multi-column layout works in print, allowing content to flow across columns with automatic balancing. This is particularly useful for narrow paper or when maximizing space usage.
@media print {
/* Two-column layout for article text */
article.columns {
column-count: 2;
column-gap: 0.5in;
column-rule: 1pt solid #ccc;
}
/* Prevent column breaks inside these elements */
article.columns h2,
article.columns figure,
article.columns blockquote {
break-inside: avoid-column;
}
/* Span full width for some elements */
article.columns h1,
article.columns .full-width {
column-span: all;
}
}
The break-inside: avoid-column property prevents elements from splitting across columns, similar to page-break-inside: avoid for pages. The column-span: all property makes an element span all columns, useful for headings or full-width images.
Professional Invoice Layout
Invoices require precise layout with clear sections for billing information, itemized charges, and payment details. Print styles ensure invoices look professional whether printed, emailed as PDF, or filed. Good invoice design aids both comprehension and legal compliance.
The display: table-header-group property on thead makes table headers repeat on each page if the table spans multiple pages. The print-color-adjust: exact forces the header background to print, ensuring visual distinction even in color printing.
Business Report Formatting
Business reports need professional formatting with clear sections, data tables, and consistent styling across many pages. Print styles ensure reports maintain their structure and readability when printed, with proper page breaks and typography optimized for paper.
Reports benefit from generous margins (1 inch all around) for binding and notes. Tables should avoid page breaks, and headings should never break away from their content. The report metadata box uses page-break-inside: avoid to ensure all key information stays together.
Resume Print Optimization
Resumes must fit specific page counts (usually one page for entry-level, two for experienced professionals) and print cleanly in black and white. Print styles ensure resumes look professional regardless of how they're printed, with consistent formatting and careful space usage.
Resume print styles use tighter spacing (11pt font, 1.4 line-height) to maximize content on limited pages. Every section that should stay together gets page-break-inside: avoid. Black borders replace color accents for universal printer compatibility.
Print-Optimized Tables
Tables present special challenges for print: they can span multiple pages, need readable headers on each page, and must avoid splitting individual rows. Proper table print styling ensures data remains comprehensible across page breaks.
The display: table-header-group on thead is crucial—it makes headers repeat at the top of each page when tables span multiple pages. Similarly, display: table-footer-group on tfoot repeats footers. The page-break-inside: avoid on rows prevents individual rows from splitting across pages.