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

Band height depends on layout, so it is hard to guess ahead of time. measure lays out a tree the same way render measures a band: full page width, counter hooks filled with three-digit numbers. Use the height to pick a margin:

import { measure, render } from "takumi-pdf";

const footer = (
  <div tw="flex w-full justify-center text-[10px] text-gray-500">
    Page <span className="pageNumber" /> of <span className="totalPages" />
  </div>
);
const { height } = await measure(footer, { size: "a4" });
const pdf = await render(report, {
  footer,
  margin: { top: 48, bottom: Math.max(48, height + 20) },
});

Bands sit 20px in from the paper edge, so leave that on top of the measured height.

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

Page counters

Elements with pageNumber or totalPages receive counter text. This matches Chromium's print header and footer template contract.

Add a CSS @counter-style name to the class list. It formats the number:

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>
  ),
});

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