Headers & footers

header and footer accept any node input. They repeat on every page. Bands lay out at full page width and draw in the page margin areas, like Chromium's print templates. Pick a margin at least as tall as the band, or the band overlaps content, exactly as in Chromium.

import { render } from "takumi-pdf";

const pdf = await render(report, {
  footer: (
    <div tw="flex w-full justify-center text-[10px] text-gray-500">
      Page <span className="pageNumber" /> of <span className="totalPages" />
    </div>
  ),
});

Sizing the margin

A band draws in the page margin, so the margin has to be tall enough to hold it. margin defaults to "auto", which measures the band and takes the space it needs.

import { render } from "takumi-pdf";

const pdf = await render(report, {
  footer: (
    <div tw="flex w-full justify-center text-[10px] text-gray-500">
      Page <span className="pageNumber" /> of <span className="totalPages" />
    </div>
  ),
});

An "auto" side comes out at the band height plus the 20px bands are inset from the paper edge, and never below the default 48. A short band leaves the page looking as it did before. Set a side to a number to size it yourself:

margin: { top: 96, bottom: "auto" }

Left and right hold no band. "auto" there is the default 48.

To size a margin yourself, measure lays out a tree the way render measures a band: full page width, counter hooks filled with three-digit numbers. Leave the 20px inset on top of the height it returns.

import { measure } from "takumi-pdf";

const { height } = await measure(footer, { size: "a4" });

Passing viewport instead of a page size measures the tree as-is. Counter hooks stay empty.

Page counters

Text and container nodes classed pageNumber or totalPages receive counter text. The counter replaces what the node holds, so an empty <span /> is enough. Chromium's print templates use the same two names.

A node carrying both classes gets the page number.

Counter styles

Add a CSS @counter-style name next to the hook class. It formats the number. The first supported name wins. Unsupported names are ignored, and a hook without one counts in decimal.

import { render } from "takumi-pdf";

const pdf = await render(report, {
  footer: (
    <div style={{ fontSize: 12 }}>
      第 <span className="pageNumber trad-chinese-informal" /> 頁,共{" "}
      <span className="totalPages trad-chinese-informal" /> 頁
    </div>
  ),
});

Numbers and numerals

Blink defines cjk-ideographic as an extension of trad-chinese-informal, and this renderer follows it. Both read out numbers up to 9999. Past that they fall back to cjk-decimal, so page 10000 formats as 一零零零零.

Alphabets

These styles count the way a spreadsheet names its columns. The letter after z is aa.

Other digits

These styles write the decimal number in another script's digits.

khmer and cambodian share their digits, as do persian and urdu.

A registered font has to cover the digits of the style you pick. Latin fonts rarely carry Thai or Tibetan numerals, so pair a script style with a font that has the glyphs.

Band height

Band height is measured once with three-digit counters. Reaching 100 pages does not shift the layout between pages.