CSS Paged Media is a powerful module that allows web developers to control the layout and formatting of printed documents. With CSS Paged Media, you can create beautifully designed pages for print, including books, magazines, brochures, and more. In this guide, we will explore the key concepts of CSS Paged Media and provide examples to help you understand its usage.
1. Introduction to CSS Paged Media:
CSS Paged Media is a module of the Cascading Style Sheets (CSS) language that focuses on the presentation and layout of content for print. It provides a set of properties and rules specifically designed for creating print-ready documents. By using CSS Paged Media, you can define page breaks, page sizes, margins, headers, footers, and other print-specific elements.
2. Creating Page Breaks:
One of the fundamental features of CSS Paged Media is the ability to control page breaks. You can specify where a page should break using the `page-break-before`, `page-break-after`, and `page-break-inside` properties. For example, to ensure that a new chapter starts on a new page, you can use the following CSS:
“`css
.chapter {
page-break-before: always;
}
“`
3. Defining Page Sizes and Margins:
With CSS Paged Media, you can define the size and margins of each page. This is particularly useful when designing documents for different paper sizes, such as A4 or letter. You can use the `size` and `margin` properties to set the desired dimensions. Here’s an example:
“`css
@page {
size: A4;
margin: 2cm;
}
“`
4. Adding Headers and Footers:
CSS Paged Media allows you to include headers and footers on each page of your printed document. You can use the `@top-left`, `@top-center`, `@top-right`, `@bottom-left`, `@bottom-center`, and `@bottom-right` at-rules to define the content and styling of these sections. Here’s how you can add a simple header to your document:
“`css
@page {
@top-center {
content: “My Document”;
}
}
“`
5. Styling Page Numbers:
Page numbers are essential for navigating through printed documents. CSS Paged Media provides the `content` property to add page numbers to headers, footers, or any other element. You can use the `counter` function to generate automatic page numbers. Here’s an example:
“`css
@page {
@bottom-right {
content: counter(page);
}
}
“`
6. Controlling Page Orientation:
CSS Paged Media allows you to control the orientation of each page, such as portrait or landscape. You can use the `size` property with the `landscape` keyword to switch the orientation. Here’s an example:
“`css
@page {
size: A4 landscape;
}
“`
7. Generating Table of Contents:
CSS Paged Media provides the `content` property to generate a table of contents automatically. You can use the `target-counter` function to reference headings and create hyperlinks within the document. Here’s an example:
“`css
@page {
@top-center {
content: “Table of Contents”;
}
}
h1 {
counter-increment: chapter;
}
h1::before {
content: target-counter(attr(id), chapter) “. “;
}
“`
Conclusion:
CSS Paged Media is a valuable tool for creating print-ready documents with precise control over layout and formatting. By using CSS Paged Media properties and rules, you can design professional-looking pages, add headers and footers, control page breaks, and generate table of contents. With its extensive capabilities, CSS Paged Media empowers web developers to create high-quality printed materials directly from their websites.