` to screen readers and other tools that consume the document. Use actual table markup when the content is tabular. Repeated document titles, logos and page numbers belong in the `@page` margin boxes described above, or in the renderer's header and footer feature on older Chromium builds.
Watch out for ``: browsers may repeat it on every page too. That's useful for a repeated note and very wrong for an invoice grand total. Put a final-only total after the table and keep that smaller block together:
```css
.table-total {
display: flex;
justify-content: flex-end;
gap: 12mm;
margin-top: 4mm;
break-inside: avoid;
page-break-inside: avoid;
}
```
Don't put `break-inside: avoid` on the whole table. It asks the browser to keep every row together and can leave a huge blank area. Apply it to rows. A single row taller than the page is still going to split; CSS can't make it smaller.
For a table that is too wide:
- Shorten or wrap long identifiers.
- Assign sensible column widths.
- Reduce cell padding before shrinking all typography.
- Move secondary fields below the primary cell content.
- Use a landscape page only when the content genuinely needs it.
Shrinking a desktop table until it technically fits is not much of a solution if nobody can read the result.
## Step 6: Preserve Colors, Backgrounds and Images
Chrome tries to be conservative about your ink/toner. It may adjust colors and skip background graphics unless the user says otherwise. Mark the parts whose meaning or design depends on their colors:
```css
.document, .status-badge, .chart, thead {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
```
CSS alone does not turn on background printing. Set `printBackground: true` in Puppeteer or Playwright, or [`pdf_options.print_background`](https://docs.htmlcsstoimage.com/parameters/pdf_options/){target=_blank} in HTML/CSS to Image. `print-color-adjust: exact` asks Chrome not to simplify those colors for printing. Use both when the exact appearance matters. A person using the print dialog can still override the choice.
A PDF can preserve a blurry image with perfect fidelity. Use SVG for logos and diagrams where possible, and make sure photographs and other raster assets are large enough for their printed size.
Give remote images stable dimensions so a late arrival doesn't move every page break after it. For an `![]()
`, include its real `width` and `height` attributes so the browser knows the aspect ratio before the file arrives:
```html
```
```css
.logo {
width: 34mm;
height: auto;
}
.chart {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: contain;
break-inside: avoid;
}
```
## Step 7: Wait for Fonts and Images
Fonts are layout, not decoration. A late font swap changes word widths, line wrapping and every page break after it. Images do the same thing vertically. The initial HTML response arriving does not mean the document is ready.
Puppeteer's [`waitForFonts`](https://pptr.dev/api/puppeteer.pdfoptions#waitforfonts){target=_blank} option defaults to `true`. The helper below also waits up to 10 seconds for the `![]()
` elements currently in the document and gives Playwright the same check. It does not know whether a canvas chart, CSS background, iframe or later JavaScript update is finished.
::: tabs
@tab Puppeteer (JS)
```js
async function waitForCurrentAssets(page) {
await page.evaluate(async () => {
const assetsReady = (async () => {
await document.fonts.ready;
await Promise.all(
Array.from(document.images).map(async (image) => {
if (image.complete) {
await image.decode().catch(() => {});
return;
}
await new Promise((resolve) => {
image.addEventListener("load", resolve, { once: true });
image.addEventListener("error", resolve, { once: true });
});
})
);
})();
await Promise.race([
assetsReady,
new Promise((resolve) => setTimeout(resolve, 10_000)),
]);
});
}
```
@tab PuppeteerSharp (.NET)
```csharp
static async Task WaitForCurrentAssetsAsync(PuppeteerSharp.IPage page)
{
await page.EvaluateFunctionAsync(
"""
async () => {
const assetsReady = (async () => {
await document.fonts.ready;
await Promise.all(
Array.from(document.images).map(async (image) => {
if (image.complete) {
await image.decode().catch(() => {});
return;
}
await new Promise((resolve) => {
image.addEventListener("load", resolve, { once: true });
image.addEventListener("error", resolve, { once: true });
});
})
);
})();
await Promise.race([
assetsReady,
new Promise((resolve) => setTimeout(resolve, 10_000)),
]);
}
""");
}
```
@tab Playwright (JS)
```js
async function waitForCurrentAssets(page) {
await page.evaluate(async () => {
const assetsReady = (async () => {
await document.fonts.ready;
await Promise.all(
Array.from(document.images).map(async (image) => {
if (image.complete) {
await image.decode().catch(() => {});
return;
}
await new Promise((resolve) => {
image.addEventListener("load", resolve, { once: true });
image.addEventListener("error", resolve, { once: true });
});
})
);
})();
await Promise.race([
assetsReady,
new Promise((resolve) => setTimeout(resolve, 10_000)),
]);
});
}
```
@tab Playwright (.NET)
```csharp
static async Task WaitForCurrentAssetsAsync(Microsoft.Playwright.IPage page)
{
await page.EvaluateAsync(
"""
async () => {
const assetsReady = (async () => {
await document.fonts.ready;
await Promise.all(
Array.from(document.images).map(async (image) => {
if (image.complete) {
await image.decode().catch(() => {});
return;
}
await new Promise((resolve) => {
image.addEventListener("load", resolve, { once: true });
image.addEventListener("error", resolve, { once: true });
});
})
);
})();
await Promise.race([
assetsReady,
new Promise((resolve) => setTimeout(resolve, 10_000)),
]);
}
""");
}
```
:::
The 10-second deadline keeps one sick image server from holding a PDF worker forever. This helper treats a broken image or the deadline as “done waiting,” so use it for layout stability rather than validation. If a missing logo or chart should fail the job, check that asset explicitly before creating the PDF.
Pages that continuously poll or stream data may never become network-idle, so the automation examples below do not wait for it. Have the application set an element, attribute or JavaScript flag when the report is ready. Keep an overall timeout around the render too.
If you load a real URL, the PDF worker needs access to every asset URL too. With `page.setContent()`, relative URLs have no useful application base unless you add one, for example with `
```
```css
.logo {
width: 34mm;
height: auto;
}
.chart {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: contain;
break-inside: avoid;
}
```
## Step 7: Wait for Fonts and Images
Fonts are layout, not decoration. A late font swap changes word widths, line wrapping and every page break after it. Images do the same thing vertically. The initial HTML response arriving does not mean the document is ready.
Puppeteer's [`waitForFonts`](https://pptr.dev/api/puppeteer.pdfoptions#waitforfonts){target=_blank} option defaults to `true`. The helper below also waits up to 10 seconds for the `