ブラウザーから Markdown を PDF に書き出す
ブラウザーがウェブページから PDF を作る方法は二つあり、その二つは同じようには良くありません。
一つ目は、ページを画像として描画し、その画像を PDF で包む方法です。これを行うライブラリーは 組み込むのが簡単で、その結果できるのは、文字がもはや文字ではないファイルです。選ぶことも、検 索することも、一行コピーすることもできず、ファイルは必要の何倍もの大きさになります。
二つ目は、ページを印刷して、送信先に「PDF に保存」を選ぶ方法です。ブラウザーは文書を紙向け に組版し、印刷用のスタイルシートを尊重し、本物のベクター文字を書き出します。クリックが一つ増 えるだけで、本当に良いファイルができます。ですからここで PDF として保存を押すと、これが起 こります。
効いてくる四つの設定
以下はすべて、ページ側ではなく印刷ダイアログにあります。どのスタイルシートからも設定できない からです。
送信先: PDF に保存。 物理的なプリンターではありません。
背景のグラフィック: オン。 詳細設定の中にあり、これが見落とされがちです。オフのままだと ブラウザーは背景の塗りをすべて捨てます。コードブロックは網掛けを失い、表の見出しは白くなり、 暗いテーマの PDF は白い紙に白い文字という姿で出てきます。設定というより壊れた書き出しに見え ます。
ヘッダーとフッター: オフ。 この項目は、ブラウザーが独自にページの URL と日付を足すもので す。自分でヘッダーやフッターを設定しているなら、両者は衝突します。ブラウザー側をオフにして自 分の方を残すか、ページ番号が欲しいなら逆にします。それについては後述します。
拡大縮小: 100% または既定。「ページに合わせる」は文字を拡大縮小し、余白を狂わせます。そし てヘッダーとフッターの間隔は、その余白に依存しています。
拡大縮小の項目がときどき消える理由
文書が固定の用紙サイズを宣言していると、Chrome は用紙が既に著者によって決められたものとみな し、拡大縮小の項目をまるごと隠します。これはブラウザーの不具合でもページの不具合でもなく、文 書が具体的であることの帰結です。
ですから用紙は選択肢です。A4、レター、プリンターの既定。前の二つはサイズを要求する ので拡大縮小を失います。三つ目は何も要求しないので拡大縮小が戻ってきます。余白は三つのいずれ でも文書が決めるので、ヘッダーやフッターはどちらにしても場所を保ちます。
各ページに繰り返されるヘッダーとフッター
繰り返されるヘッダーはすべてのページに現れます。ブラウザーでは、位置を固定した要素で実現しま す。仕様では、ページ分割される媒体の各紙面で繰り返されるとされています。
微妙なのは、そのための場所を確保することです。分かりやすいやり方 — 文書本体の上に余白を取る — では、場所は一度しか確保されません。本体は、何ページに分かれて印刷されようと一つの箱だから です。一ページ目では機能し、二ページ目からはヘッダーが本文の上に乗ります。
解決策は、ページごとに適用される @page の余白の中に場所を確保し、負のオフセットでバーをその
余白に配置することです。捺印エリアがやっているのがこれで、実際にバーが乗っている辺の余白だけ
を広げます。
四つの入力欄 — ヘッダー左、ヘッダー右、フッター左、フッター右 — はどれも好きな文字を受け付け、 加えて印刷時に埋められる差し込み語が使えます。
{title}— 文書の最初の見出し、または最初の行{date}、{time}、{datetime}— PDF を作った日時
ページ番号がない理由
{page} という差し込み語は意図的にありません。繰り返される要素の中でページを数えることは、ブ
ラウザーにはできません。counter(page) は @page の余白ボックスの中でしか解決されず、主要な
ブラウザーはどれもそれを実装していないからです。黙って何も印刷しない差し込み語は、差し込み語
がないことより悪いでしょう。
ページ番号が必要なら、ブラウザー自身のヘッダーとフッターの項目が付けてくれます。捺印の代わり にそちらを使うか、両方を受け入れて反対側の辺に置かせてください。
暗い PDF
暗いオプションはページを反転させ — 黒い紙に白いインク — 他の色はそのままにします。意図的な例外 が一つ。リンクの色は明るくされます。明るいテーマの青は黒に対しておよそ 2.5:1 しかなく、読めな いからです。色相は保ったままコントラストを得ます。
背景のグラフィックを忘れずに。それなしで印刷した暗い PDF は、真っ白なページになります。