◆ 横(landscape)にしたときも縦(portrait)でレイアウトされてはみ出してしまう問題が直ってた
最近比較的よくブラウザの印刷機能を使って紙に印刷したり PDF を作ったりする系の話題を目にしました
簡単なものならいいのですが ある程度凝ったものを作ろうとすると Chrome などでは機能不足で印刷用の別のツールが必要になるのですよね

特に個人的には致命的なバグも放置されてますし
と思ったものの もしかして最近それが直ったとかなんでしょうか

試してみると直ってました

問題だったもの

そのバグですが 印刷用紙を横にしても縦を前提にレイアウトしてはみ出してしまい一部のテキストが見えなくなるというものです

HTML 的にはこういうのを用意します

<!doctype html>

<style>
	@page portrait {
		size: A4 portrait;
	}
	@page landscape {
		size: A4 landscape;
	}
	body {
		font-size: 64px;
	}
	.portrait {
		page: portrait;
	}
	.landscape {
		page: landscape;
	}
</style>

<script type="module">
	// <div>0</div><div>1</div> ... <div>29</div>
	const html = Array(30).keys().map(i => `<div>${i}</div>`).toArray().join("")
	page1.innerHTML = html
	page2.innerHTML = html
	page3.innerHTML = html
</script>

<div id="page1" class="portrait"></div>
<div id="page2" class="landscape"></div>
<div id="page3" class="portrait"></div>

これを印刷から PDF 化して期待するのはこれです
左上から左下にいって 右上から右下への流れです

print-pdf-pages-ch122

これが現時点 (Chrome 122) での動きです

以前はこうでした

print-pdf-pages-ch113

横になってるページで 8, 9, 18, 19 などが見えていません
7 や 17 も切れてます
これは Chrome 113 時点のもので どのバージョンで直ったかまでは調べてないです

発生してたのは結構前からで 2021/09/05 時点では確認してました

まだ機能不足

この問題の改善で大きな問題はなくなったのですが やっぱり機能不足ではあります
ヘッダーやフッターに文字列を追加する @top-left や @bottom-center 等が使えないです

ページ内で実現するにも position:fixed 的なのはうまく動かず ページ番号の表示には問題があったはずです
なので自動改ページに任せられず 自分でページの本文を適当なサイズで区切って 1 ページ 1 ページを個別に作ってるのですよね

一般的なブラウザ以外のツールでも wkhtmltopdf は古すぎるし 小さなバグは多く残ってるし Weasyprint は使える日本語フォントが限られるし 使える機能も限られてるしで PDF 化ならこれとまで言えないのですよね