Previous

CSS: Pagination

In CSS, pagination refers to the styling and layout of content that spans multiple pages, such as articles, documents, or lengthy text blocks. CSS provides properties and techniques to control how content is divided and displayed across pages, including page breaks, page size, margins, and numbering. Here's a guide on how to implement pagination in CSS:

1. Page Breaks

page-break-before and page-break-after

These properties control where page breaks occur before or after an element.

  • page-break-before: Specifies where a page break should occur before an element.
  • page-break-after: Specifies where a page break should occur after an element.
.page-break {
    page-break-before: always; /* Page break before this element */
    page-break-after: always; /* Page break after this element */
}

2. Page Size and Margins

size and margin

These properties define the size of the page and its margins.

  • size: Sets the size of the page. Values can be auto, A3, A4, A5, B4, B5, letter, legal, or specific dimensions (width height).
  • margin: Sets the margins of the page. Values can be auto, specific lengths, or a combination of four values (top right bottom left).
@page {
    size: A4; /* Page size */
    margin: 2cm; /* Page margins */
}

3. Page Numbering

counter-reset and content

These properties are used for page numbering.

  • counter-reset: Resets the value of a counter.
  • content: Inserts generated content, such as page numbers, using the counter() function.
@page {
    counter-reset: page;
}

.page-number::after {
    content: counter(page); /* Page number */
}

Example

Here's an example of how to use these properties together for pagination:

@page {
    size: A4;
    margin: 2cm;
    counter-reset: page;
}

.page {
    page-break-before: always;
}

.page-number::after {
    content: counter(page);
}

/* Example usage */
.article {
    font-size: 12pt;
    line-height: 1.5;
}

.article > div {
    margin-bottom: 20px;
}

<div class="article">
    <div class="page">
        <h1>Title Page</h1>
        <p>Content goes here...</p>
    </div>
    
    <div class="page">
        <h1>Page 1</h1>
        <p>Content goes here...</p>
    </div>
    
    <div class="page">
        <h1>Page 2</h1>
        <p>Content goes here...</p>
    </div>
    
    <div class="page-number">Page</div>
</div>

In this example:

  • @page is used to define the page size, and margins, and reset the page counter.
  • .page class is used to mark sections that should start on a new page.
  • .page-number::after is used to display the page number after each page.

Notes and Considerations

  • Browser Support: CSS pagination properties are well-supported in modern browsers but may have limited support in older browsers, especially for advanced features like counters and page sizes.
  • Print Media: Pagination properties are commonly used in print stylesheets (@media print) to control how content is displayed when printed.
  • Responsive Design: Consider responsiveness when designing paginated content for different devices and screen sizes.

By utilizing CSS pagination properties effectively, you can create well-structured and visually appealing documents or articles that are easy to navigate and read across multiple pages.

Previous