Uhuu Docs

Appearance

Pagination ​

To paginate content in the browser, we suggest using Paged.js, an open-source library, that acts as a polyfill for Paged Media and Generated Content for Paged Media W3C specifications.

Paged.js margin boxes documentation is a great resource.

Page counters ​

To define page numbers, paged.js uses a CSS counter that gets incremented for each new page.

To insert a page number on a page or retrieve the total number of pages in a document, the W3C proposes a specific counter named page. The counters declaration must be used within a content property in the margin-boxes declaration. The following example declares the page number in the bottom-left box:

css
@page {
  @bottom-left {
        content: counter(page);
  }
}

You can also add a bit of text before the page number:

css
@page {
  @bottom-left {
        content: "page " counter(page);
  }
}

To tally the total number of pages in your document, write this:

css
@page {
  @bottom-left {
        content: counter(pages);
  }
}

CSS counters ​

css-counter is a CSS property that lets you count elements within your content. For example, you might want to add a number before each figure caption. To do so, you would reset the counter for the <body> , increment it any time a caption appears in the content, and display that number in a ::before pseudo-element.

css
body {
  counter-reset: figureNumber;
}

figcaption {
  counter-increment: figureNumber;
}

figcaption::before {
  content: counter(figureNumber)
}

Size ​

The size of the pages in a book can be defined by either width and height (in inches or millimeters) or a paper size such as A5 or Letter. Page size must be the same for all the pages in the book and will be inferred only from the root @page.

css
@page {
  size: A5;
}

or

css
@page {
  size: 140mm 200mm;
}

Margins ​

The margin command defines the top, bottom, left, and right areas around the page’s content.

css
@page {
  margin: 30mm 10mm 30mm 10mm;
}

Page selectors ​

Blank pages ​

The blank selector styles pages that have no content, e.g., pages automatically added to make sure a new chapter begins on the desired left or right page.

css
@page :blank {
      @top-left { content: none; }
}

First page and nth page ​

There are selectors for styling the first page or a specific page, targeted by its number (named n in the specification).

css
@page :first {
      background: yellow;
}
css
@page :nth(5) {
      margin: 10mm;
}

Left and right or recto and verso ​

Typically, pages across a spread (a pair of pages) have symmetrical margins and are centered on the gutter. If, however, the inner margin needs to be larger or smaller, the selector to style left and right pages can make that change.

css
@page :left {
      margin-right: 10mm;
}
css
@page :right {
      margin-left: 10mm;
}

Margin boxes ​

The margins of a page are divided into sixteen named boxes, each with its own border, padding, and content area. They’re set within the @page query. A box is named based on its position: for example, @top-left, @bottom-right-corner, or @left-middle (see all rules). By default, the size is determined by the page area. Margin boxes are typically used to display running headers, running footers, page numbers, and other content more likely to be found in a book than on a website. The content of the box is governed by CSS properties.

To select these margin boxes and add content to them, use the following example:

css
@page {
  @top-center {
        content: "Moby-Dick";
  }
}

Controlling text fragmentation with page breaks

For example, this sequence will create a page break before each h1 element:

css
h1 {
      break-before: page;
}

This code, in contrast, will push the h1 to the next right page, creating a blank page if needed:

css
h1 {
    break-before: right;
}

This snippet will keep any HTML element that comes after an h1 on the same page as the h1, moving them both to the next page if necessary.

css
h1 {
      break-after: avoid;
}