| FUNBREW PDF

NaN/NaN/NaN

HTMLからPDFを生成するとき、ブラウザでは完璧に見えていたレイアウトがPDFでは崩れる――これは多くの開発者が経験する問題です。

PDF生成に特有のCSSテクニックを知っておけば、こうした問題を事前に防げます。この記事では、FUNBREW PDFのAPIやPuppeteerなどのツールを使う際に役立つCSS設計のベストプラクティスを紹介します。

CSSでPDFを制御する — 3つの柱

CSSでPDFの出力を制御するには、大きく3つの仕組みを理解する必要があります。

CSS機能	役割	主なプロパティ
`@media print`	画面表示とPDF出力でスタイルを分離	`display`, `font-size`, `color`
`@page`	用紙サイズ・余白・ヘッダー/フッター	`size`, `margin`, `@bottom-center`
`break-` / `page-break-`	改ページ位置の制御	`break-inside`, `break-before`, `orphans`

この3つを組み合わせることで、ブラウザ表示とは独立したPDF専用レイアウトを構築できます。以下、それぞれの詳細とコード例を見ていきましょう。

改ページの制御

PDF生成で最もよくある問題が、意図しない位置での改ページです。

要素の途中で切れるのを防ぐ

/* テーブルや図が途中で切れるのを防止 */
table, figure, .card {
  break-inside: avoid;
  page-break-inside: avoid; /* 古いエンジン向けフォールバック */
}

/* 見出しの直後で改ページさせない */
h1, h2, h3 {
  break-after: avoid;
  page-break-after: avoid;
}

特定の位置で強制改ページ

/* セクション区切りで必ず改ページ */
.page-break {
  break-before: page;
  page-break-before: always;
}

/* 使用例: 各章の先頭で改ページ */
.chapter {
  break-before: page;
}

/* 奇数ページから始める（製本対応） */
.chapter-odd {
  break-before: right;
}

/* 偶数ページから始める */
.chapter-even {
  break-before: left;
}

`orphans`と`widows`で孤立行を防ぐ

段落の最初の1〜2行だけがページに残ってしまう「orphan（孤児）」や、段落末尾の数行だけが次のページに渡ってしまう「widow（寡婦）」を防ぐCSSプロパティがあります。

p {
  /* 前のページに残す最小行数 */
  orphans: 3;
  /* 次のページに送る最小行数 */
  widows: 3;
}

実用例：請求書の明細とフッター

<div class="invoice-body">
  <table class="line-items">
    <!-- 明細行（改ページ時にヘッダーを繰り返す） -->
    <thead><tr><th>品目</th><th>金額</th></tr></thead>
    <tbody>{{line_items}}</tbody>
  </table>
</div>
<div class="invoice-footer" style="break-inside: avoid;">
  <!-- 合計・振込先は必ず同じページに収める -->
  <p>合計: ¥{{total}}</p>
  <p>振込先: サンプル銀行...</p>
</div>

テンプレートエンジンと組み合わせると、改ページを考慮したテンプレート設計が容易です。

@media print の詳細活用

PDF生成エンジンは通常printメディアタイプでレンダリングします。これを活用して、PDF専用のスタイルを定義できます。

基本：不要な要素の非表示

/* 画面表示用 */
.sidebar, .navigation, .cookie-banner {
  display: block;
}

/* PDF生成時はナビゲーション等を非表示 */
@media print {
  .sidebar, .navigation, .cookie-banner, .no-print {
    display: none !important;
  }

  /* PDF用にフォントサイズを調整 */
  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  /* リンクのURLを表示（参考情報として） */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #6b7280;
  }
}

印刷時の色とコントラスト最適化

画面向けの淡い色はPDFでは読みにくくなることがあります。@media print内でカラーパレットを再定義しましょう。

@media print {
  /* 背景色を白に統一 */
  body {
    background: #ffffff;
    color: #000000;
  }

  /* ボーダーを強調 */
  table, th, td {
    border-color: #000000 !important;
  }

  /* グレーのプレースホルダーテキストを濃く */
  .text-gray-400 {
    color: #374151 !important;
  }

  /* シャドウをボーダーに変換 */
  .shadow, .shadow-md, .shadow-lg {
    box-shadow: none !important;
    border: 1px solid #d1d5db;
  }
}

PDF専用レイアウトクラスの定義

/* 画面では非表示、PDFでのみ表示する要素 */
.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }

  /* 2カラムレイアウトをPDF用に調整 */
  .content-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20mm;
  }

  .content-main {
    flex: 2;
  }

  .content-aside {
    flex: 1;
    border-left: 1pt solid #e2e8f0;
    padding-left: 10mm;
  }
}

エンジンによって@media printの対応状況が異なります。wkhtmltopdf vs Chromiumで詳しく比較しています。FUNBREW PDFのqualityエンジンはChromiumベースで完全対応しています。

@page ルールで用紙設定

/* A4用紙の余白設定 */
@page {
  size: A4;
  margin: 20mm 15mm;
}

/* 最初のページだけ余白を大きくする（表紙用） */
@page :first {
  margin-top: 60mm;
}

/* 横向き指定 */
@page {
  size: A4 landscape;
}

名前付きページで異なるレイアウトを混在

ドキュメント内で縦向きと横向きのページを混在させる場合は、名前付きページ（named pages）を使います。

@page wide-table {
  size: A4 landscape;
  margin: 15mm 10mm;
}

/* 横向きページにしたいセクションに適用 */
.wide-section {
  page: wide-table;
}

ページ番号とヘッダー・フッターの実装

@pageルールのmarginエリアにはコンテンツを配置できます。Chromiumベースのエンジン（FUNBREW PDFのqualityエンジン）は@pageマージンボックスを完全サポートしています。

@page {
  size: A4;
  margin: 25mm 20mm 20mm 20mm;

  /* ページ下部の中央にページ番号 */
  @bottom-center {
    content: counter(page) " / " counter(pages);
    font-size: 9pt;
    color: #6b7280;
  }

  /* 左下にドキュメント名 */
  @bottom-left {
    content: "社外秘：プロジェクト提案書";
    font-size: 8pt;
    color: #9ca3af;
  }

  /* 右上に日付 */
  @top-right {
    content: "2026年4月";
    font-size: 9pt;
    color: #6b7280;
  }
}

/* 表紙ではページ番号を非表示 */
@page :first {
  @bottom-center { content: none; }
  @bottom-left { content: none; }
}

ただし、ヘッダー・フッターに動的なデータ（例えば各章のタイトル）を入れたい場合は、API側のオプション（FUNBREW PDFのheaderHtml/footerHtmlパラメータ）を使う方が柔軟です。詳しくはAPIドキュメントを参照してください。

日本語フォント指定のベストプラクティス

PDF生成では、フォントが見つからないと文字化けや□（豆腐）表示になります。特に日本語は適切な設定が必要です。

フォントスタックの優先順位

body {
  /* 推奨フォントスタック（日本語環境） */
  font-family:
    'Noto Sans JP',      /* Google Fonts、多言語対応 */
    'Hiragino Sans',     /* macOS/iOS */
    'Hiragino Kaku Gothic ProN',
    'Yu Gothic',         /* Windows 8.1以降 */
    'Yu Gothic UI',
    'Meiryo',            /* Windows Vista以降 */
    'MS PGothic',        /* Windows XP以降（フォールバック） */
    sans-serif;
}

/* 明朝体が必要な場合 */
.serif {
  font-family:
    'Noto Serif JP',
    'Hiragino Mincho ProN',
    'Yu Mincho',
    'MS PMincho',
    serif;
}

/* 等幅フォント（コードブロック用） */
code, pre {
  font-family:
    'Noto Sans Mono',
    'Source Code Pro',
    'Courier New',
    monospace;
}

FUNBREW PDFでのフォント設定

FUNBREW PDFではNoto Sans JPがプリインストールされているため、追加設定なしで日本語が正しく表示されます。

/* FUNBREW PDFでの最小限の指定 */
body {
  font-family: 'Noto Sans JP', sans-serif;
}

他のツールではフォントの手動インストールが必要な場合があります。

フォントウェイトの明示的な指定

日本語フォントはウェイトによってグリフが異なることがあります。PDFで太字が正しく表示されない場合は、font-weightを明示的に指定します。

/* フォントウェイトを明示 */
h1, h2, h3 { font-weight: 700; }
p { font-weight: 400; }
strong, b { font-weight: 700; }
.light { font-weight: 300; }

Web Fontsの読み込み

/* Google Fontsを使う場合（300, 400, 700の3ウェイトを指定） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

外部フォントの読み込みはPDF生成速度に影響します。頻繁に生成するPDFでは、プリインストールフォントの利用を推奨します。本番環境のパフォーマンス最適化も参照してください。

縦組み（縦書き）対応

日本語PDF特有の縦書きレイアウトも、CSSで実現できます。

/* 縦書きコンテンツ */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* 縦書きページ全体 */
.vertical-page {
  writing-mode: vertical-rl;
  direction: rtl; /* 右から左へ */
  height: 257mm;  /* A4の幅を高さとして使用 */
}

テーブルのPDF対応

長いテーブルのヘッダー繰り返し

/* ページをまたぐテーブルでヘッダーを繰り返す */
thead {
  display: table-header-group;
}

/* フッター行（合計行など）を最後のページに固定 */
tfoot {
  display: table-footer-group;
}

テーブルの行が分割されるのを防ぐ

tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* セル内のコンテンツが多い場合 */
td {
  overflow-wrap: break-word;
  word-break: break-all;
}

複雑なテーブルの改ページ対応

行数が多いテーブルで、特定のグループ（例：請求書の月別小計）を分割させたくない場合は、<tbody>を複数に分けて各グループにbreak-inside: avoidを適用します。

<table>
  <thead>
    <tr><th>月</th><th>項目</th><th>金額</th></tr>
  </thead>
  <!-- 月ごとにtbodyを分けて分割防止 -->
  <tbody style="break-inside: avoid;">
    <tr><td rowspan="3">1月</td><td>開発費</td><td>¥500,000</td></tr>
    <tr><td>サーバー費</td><td>¥50,000</td></tr>
    <tr class="subtotal"><td>小計</td><td>¥550,000</td></tr>
  </tbody>
  <tbody style="break-inside: avoid;">
    <tr><td rowspan="2">2月</td><td>開発費</td><td>¥480,000</td></tr>
    <tr><td>サーバー費</td><td>¥50,000</td></tr>
  </tbody>
</table>

テーブルのスタイリング例

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
}

th {
  background: #f8fafc;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid #e2e8f0;
  /* PDFで背景色を出力するために必要 */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

td {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}

/* 偶数行にストライプ */
tr:nth-child(even) td {
  background: #f8fafc;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* 小計行の強調 */
tr.subtotal td {
  font-weight: 700;
  border-top: 2px solid #e2e8f0;
  border-bottom: 2px solid #e2e8f0;
  background: #eff6ff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

画像の最適化CSS

PDF内の画像は、適切なCSS設定がないとはみ出したり、過度に引き伸ばされたりすることがあります。

基本的な画像制御

/* 画像がコンテナからはみ出さないようにする */
img {
  max-width: 100%;
  height: auto;
}

/* ページ幅を超える大きな画像を縮小 */
@media print {
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}

画像の改ページ制御

/* 単独で表示させたい大きな図 */
figure.full-page {
  break-before: page;
  break-after: page;
  text-align: center;
}

figure.full-page img {
  max-height: 240mm; /* A4の高さからマージンを引いた値 */
  width: auto;
  max-width: 100%;
}

/* キャプション付き画像 */
figure {
  break-inside: avoid;
  margin: 0 0 12pt 0;
}

figcaption {
  font-size: 9pt;
  color: #6b7280;
  text-align: center;
  margin-top: 4pt;
}

SVGとアイコンの扱い

SVGはPDFで解像度非依存のまま出力されます。ただし、外部SVGファイルは<img>タグで読み込むより、インラインSVGの方が確実です。

/* SVGアイコンのサイズ固定 */
.icon svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  /* SVGの色はfillで制御 */
  fill: currentColor;
}

/* 高解像度印刷向け（300dpiを想定） */
@media print {
  .icon img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

ロゴや透過画像の背景処理

/* ロゴ画像の背景を白で固定（透過PNGが意図しない背景になる問題を防止） */
.logo {
  background: #ffffff;
  padding: 4px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

背景色と画像の出力

デフォルトでは、多くのPDFエンジンが背景色と背景画像を出力しません。

/* 背景色を強制出力（Chromiumベースエンジン向け） */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

APIリクエスト時にもprintBackground: true（Puppeteer）や対応オプションの指定が必要です。FUNBREW PDFではデフォルトで背景色が出力されます。

レスポンシブをPDF用に固定

ブラウザで表示したレスポンシブデザインをPDFに変換すると、意図しないモバイルレイアウトになることがあります。

/* PDF生成時は固定幅でレンダリング */
@media print {
  .container {
    width: 100% !important;
    max-width: none !important;
  }

  /* グリッドレイアウトを強制的にデスクトップ表示に */
  .grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Flexboxの折り返しを防止 */
  .flex-row {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
}

CSSカスタムプロパティ（変数）をPDFで活用

CSSカスタムプロパティ（変数）はChromiumベースのPDFエンジンで完全サポートされています。テーマや色の一元管理に活用できます。

:root {
  /* ブランドカラー */
  --color-primary: #2563eb;
  --color-accent: #f59e0b;

  /* タイポグラフィ */
  --font-base: 'Noto Sans JP', sans-serif;
  --font-size-base: 10.5pt;
  --line-height-base: 1.7;

  /* 余白（印刷用はptで指定） */
  --spacing-sm: 6pt;
  --spacing-md: 12pt;
  --spacing-lg: 24pt;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

h1 {
  color: var(--color-primary);
  font-size: calc(var(--font-size-base) * 2);
  margin-bottom: var(--spacing-lg);
}

FlexboxとGridのPDFレイアウト

モダンCSSレイアウトはPDFでも活用できますが、いくつかの注意点があります。

Flexboxの改ページ制限

Flexboxコンテナ内のアイテムにbreak-inside: avoidを適用しても、一部のエンジンでは無視されることがあります。確実に改ページを制御するには、Flexアイテムをブロック要素で囲みます。

/* Flexアイテムの改ページ対応 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12pt;
}

.flex-item-wrapper {
  break-inside: avoid;
  width: calc(50% - 6pt);
}

@media print {
  .flex-container {
    display: block; /* 改ページが必要な場合はblockに切り替え */
  }

  .flex-item-wrapper {
    display: inline-block;
    vertical-align: top;
  }
}

CSS Gridの固定レイアウト

Grid レイアウトはPDFで非常に有効ですが、fr単位よりも固定単位（mmやpt）を使うとより予測可能な出力になります。

@media print {
  .pdf-grid {
    display: grid;
    grid-template-columns: 60mm 1fr;
    gap: 8pt;
    width: 100%;
  }

  /* サイドバー＋メインコンテンツの2カラム帳票 */
  .pdf-sidebar {
    grid-column: 1;
    border-right: 0.5pt solid #d1d5db;
    padding-right: 8pt;
  }

  .pdf-main {
    grid-column: 2;
  }
}

マルチカラム帳票のレイアウトパターン

請求書や報告書で頻出する「左にラベル、右に値」のレイアウトは、Gridで簡潔に実装できます。

.info-grid {
  display: grid;
  grid-template-columns: 80pt 1fr;
  row-gap: 4pt;
  font-size: 10pt;
}

.info-grid dt {
  font-weight: 700;
  color: #374151;
}

.info-grid dd {
  margin: 0;
}

<dl class="info-grid">
  <dt>請求日</dt><dd>2026年4月13日</dd>
  <dt>支払期限</dt><dd>2026年5月13日</dd>
  <dt>請求先</dt><dd>株式会社サンプル</dd>
</dl>

よくある失敗例Top5と対処法

HTML→PDF変換でよく遭遇するCSS関連の失敗パターンと、その対処法をまとめました。

失敗1: `@media print` を書かずにPDF専用スタイルを当てようとする

画面表示とPDF出力で同じCSSを使い回すと、ナビゲーションバーやフッターがPDFに混入し、レイアウトが破綻します。

/* ❌ 悪い例: 全メディアに適用される */
.sidebar { display: none; }

/* ✅ 良い例: PDFのみに適用 */
@media print {
  .sidebar, .navigation, .footer-links {
    display: none !important;
  }
}

ポイント: PDF生成エンジンは print メディアタイプでレンダリングします。@media print で囲まないスタイルは画面表示にも影響します。

失敗2: `page-break-inside: avoid` を忘れてテーブルが途中で切れる

テーブルやカードコンポーネントが中途半端な位置でページをまたぐと、データの読み取りが困難になります。

/* ❌ 悪い例: 改ページ制御なし */
.data-card {
  padding: 16px;
  border: 1px solid #e5e7eb;
}

/* ✅ 良い例: カード内での改ページを防止 */
.data-card {
  padding: 16px;
  border: 1px solid #e5e7eb;
  break-inside: avoid;
  page-break-inside: avoid; /* 旧エンジン対応 */
}

ポイント: break-inside: avoid は現代的な標準、page-break-inside: avoid はwkhtmltopdf等の旧エンジン向けフォールバックです。両方書くのがベストプラクティスです。

失敗3: `@page` ルールを設定せず余白が大きすぎる/小さすぎる

@page を指定しないと、エンジンのデフォルト余白（通常かなり広め）が適用され、コンテンツエリアが狭くなります。

/* ❌ 悪い例: @page 未設定 → デフォルト余白（エンジン依存） */

/* ✅ 良い例: 用紙サイズと余白を明示 */
@page {
  size: A4;
  margin: 20mm 15mm;
}

/* 表紙ページは余白を広く */
@page :first {
  margin-top: 50mm;
}

ポイント: PDF特有の単位として mm（ミリメートル）や pt（ポイント）を使うと、物理サイズに正確に対応できます。

失敗4: `print-color-adjust: exact` を忘れて背景色が消える

多くのPDFエンジンはデフォルトで背景色を出力しません。せっかく設計したカラフルなテーブルやカードが白背景になります。

/* ❌ 悪い例: 背景色がPDFに出力されない */
.highlight-row {
  background-color: #fef3c7;
}

/* ✅ 良い例: 背景色を強制出力 */
.highlight-row {
  background-color: #fef3c7;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

ポイント: グローバルに * { print-color-adjust: exact; } を設定する方法もありますが、パフォーマンスを考慮すると背景色を使う要素にのみ指定するのがベターです。FUNBREW PDFではデフォルトで背景出力が有効です。

失敗5: レスポンシブCSSのままPDF生成してモバイルレイアウトになる

ビューポート幅が狭い状態でレンダリングされると、メディアクエリによってモバイル用レイアウトが適用されてしまいます。

/* ❌ 悪い例: PDF生成時にモバイルレイアウトが適用される */
@media (max-width: 768px) {
  .grid-2col { grid-template-columns: 1fr; }
}

/* ✅ 良い例: @media print で強制的にデスクトップレイアウトを維持 */
@media print {
  .grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .container {
    width: 100% !important;
    max-width: none !important;
  }
}

ポイント: API側でビューポート幅を指定できるエンジンもあります。FUNBREW PDFでは viewport.width パラメータで制御可能です。APIドキュメントを参照してください。

デバッグのコツ

PDFで期待通りのレイアウトにならない場合のデバッグ方法です。

ブラウザの印刷プレビュー: Chrome DevToolsでCtrl+Shift+P → "Emulate CSS media type" → "print"で確認
Playgroundでリアルタイムテスト: HTMLを貼り付けて即座にPDF出力を確認
エンジンの切り替え: fastとqualityで出力が異なる場合、CSS対応の違いが原因。エンジン比較を参照
1ページから始める: 複雑なレイアウトは1ページのPDFから段階的にテスト
pt単位を使う: PDF出力ではpxよりpt（ポイント）を使うと意図したサイズに近くなります（1pt = 1/72インチ）

よくあるトラブルと解決策

症状	原因	解決策
文字が□になる	フォント未インストール	`font-family`にフォールバック追加またはNoto Sansを指定
背景色が出ない	エンジンのデフォルト設定	`print-color-adjust: exact`を追加
テーブルが分割される	`break-inside`未設定	`tr`に`break-inside: avoid`を追加
余白が広すぎる	`@page`未設定	`@page { margin: 20mm 15mm; }`を追加
レイアウトがモバイル表示	ビューポート幅の問題	API側でビューポート幅を指定（例: `width: 1200px`）

詳しいトラブルシューティングはHTML to PDFトラブルシューティングガイドを参照してください。

まとめ

HTML→PDF変換のCSS設計で押さえるべきポイント:

改ページ: break-inside: avoidとbreak-before: pageで制御、orphans/widowsで孤立行を防ぐ
印刷スタイル: @media printでPDF専用スタイルを分離し、色とコントラストを最適化
用紙設定: @pageルールで余白・サイズ・ヘッダー・フッターを指定
フォント: 日本語フォントを明示的に指定、プリインストールフォントを活用
テーブル: theadの繰り返し、行の分割防止、複数tbodyでグループ管理
画像: max-width: 100%とbreak-inside: avoidで崩れを防止
背景色: print-color-adjust: exactで強制出力

Playgroundで実際にCSSを試しながら、最適なレイアウトを見つけてください。各言語でのAPI呼び出し方法はクイックスタートガイドを参照してください。

よくある質問（FAQ）

@media print と @page の違いは何ですか？

@media print はPDF出力時にのみ適用されるCSSブロックで、ナビゲーションの非表示やフォントサイズ変更など「画面とPDFでスタイルを切り替える」用途に使います。@page は用紙サイズ・余白・ヘッダー/フッターなど「紙そのものの設定」を定義するCSSアットルールです。両者は補完的で、@media print の中で @page を使う組み合わせが一般的です。

改ページが効かない原因と解決策は？

改ページが効かない主な原因は3つです。

break-inside/break-before ではなく古い page-break-inside/page-break-before のみを使っている → 両方書くのがベストプラクティス
Flexboxコンテナの直下要素に適用しても一部エンジンで無視される → ブロック要素で囲む
wkhtmltopdfなどの旧エンジンは break-* プロパティ非対応 → FUNBREW PDFの quality エンジン（Chromiumベース）は完全対応

PDFで背景色が出力されない場合の対処法は？

PDF生成エンジンはデフォルトで背景色と背景画像を出力しない設定になっています。CSSに以下を追加することで強制出力できます。

* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

FUNBREW PDFではデフォルトで背景色が出力されるため、追加設定は不要です。

日本語のフォントが文字化けする（豆腐になる）原因は？

PDF生成サーバーに日本語フォントがインストールされていない場合に発生します。CSSの font-family に 'Noto Sans JP' を指定するか、Google Fontsからフォントを読み込むことで解決できます。FUNBREW PDFはNoto Sans JPをプリインストール済みのため、font-family: 'Noto Sans JP', sans-serif; を指定するだけで日本語が正しく表示されます。詳しくは日本語フォント設定ガイドを参照してください。

ページ番号をPDFに追加するには？

@page ルールの @bottom-center マージンボックスを使う方法が最もシンプルです。

@page {
  @bottom-center {
    content: counter(page) " / " counter(pages);
    font-size: 9pt;
    color: #6b7280;
  }
}

FUNBREW PDF APIの displayHeaderFooter と footerTemplate オプションを使う方法もあり、動的なページ番号を柔軟に制御できます。詳しくはAPIドキュメントを参照してください。

テーブルがページをまたいで切れる問題を防ぐには？

tr 要素に以下を追加することで行の途中での改ページを防げます。

tr {
  break-inside: avoid;
  page-break-inside: avoid; /* 旧エンジン対応 */
}

論理的なグループ（例：月別の請求明細）は、複数の <tbody> に分けて各 <tbody> に break-inside: avoid を適用する方法が有効です。また <thead> に display: table-header-group; を設定してヘッダー行をページごとに繰り返すことも重要です。

wkhtmltopdf と ChromiumエンジンでCSSの動作が違うのはなぜ？

wkhtmltopdfはWebKit（古いバージョン）ベースで、CSS GridやFlexboxの一部機能、break-* プロパティ、@page マージンボックスなどを完全にサポートしていません。ChromiumベースのエンジンはCSSをより忠実にレンダリングします。FUNBREW PDFの quality エンジンはChromiumベースで最新CSSに完全対応しています。詳しくはwkhtmltopdf vs Chromium比較を参照してください。