Uhuu Docs

Appearance

Pagination ​

To paginate content in the browser, we recommend using Paged.js, an open-source library that serves as a polyfill for Paged Media and Generated Content for Paged Media. See Paged.js margin boxes documentation for more details.

Page Counters ​

Paged.js uses a CSS counter for page numbers, incrementing with each page. Use the counter(page) to insert page numbers or the total pages count (counter(pages)) in margin boxes:

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

Page Breaks ​

Control content flow with CSS properties such as page-break-before, page-break-inside, and page-break-after. To add a page break before every level-1 heading:

css
h1 {
  page-break-before: always;
}

For more flexibility, use a .pageBreak class:

css
.pageBreak { page-break-before: always; }
html
<p>First paragraph</p>
<div class="pageBreak"></div>
<p>Second paragraph on new page</p>

Orphans and Widows ​

Define minimum lines that must appear at the top (orphans) or bottom (widows) of a page to improve readability:

css
p {
  orphans: 3;
  widows: 3;
}

CSS Counters ​

CSS counters count elements like figures. Reset and increment counters, and display them with a ::before pseudo-element:

css
body { counter-reset: figureNumber; }
figcaption {
  counter-increment: figureNumber;
  content: counter(figureNumber);
}

Page Size ​

Set page dimensions using measurements (in inches or millimeters) or standard sizes (e.g., A5):

css
@page { size: A5; }

Margins ​

Define page margins with the margin property:

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

Page Selectors ​

Blank Pages ​

The :blank selector targets pages without content:

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

First and nth Pages ​

Target the first or a specific page:

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

Left and Right (Recto and Verso) ​

Customize margins for left and right pages in a spread:

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

Margin Boxes ​

Pages have sixteen margin boxes for elements like headers, footers, and page numbers:

css
@page {
  @top-center { content: "Document Title"; }
}

Text Fragmentation with Page Breaks ​

Control page breaks with break-before, break-after, and break-inside:

css
div { break-before: page; }
div { break-after: avoid; }