用紙の大きさはA4とかって決まっているとき、その決まった大きさにずれずに収まるように印刷できるようなウェブページを作るときのティップス集。複数のページにしたいときにも対応。
@page を書く
@page はCSSの@ルールの一つで、印刷するときの用紙の大きさ等を指定できる。
@page {
size: 297mm 210mm;
margin: 0;
}
size プロパティでA4横向きの大きさで印刷することを表している。A4以外の大きさの紙に印刷しようとすると縦横比を保ったまま拡大縮小される模様。縦横比を保ってくれるので、別の大きさの用紙を使っても余白はできるがレイアウトが崩れることはなくせる。
margin プロパティで印刷するときの余白を指定できる。余白にはヘッダーやフッターを入れることができるようだが、やったことない。margin を0以外に設定するなら印刷できるページの領域が狭まるので次セクションではそれを考慮する必要が出てくる。
size は以下のような書き方もできる。
@page {
size: A4 landscape;
margin: 0;
}
各ページのブロックの縦横サイズを用紙に合わせる
<body>
<div class="page">
1ページ目
</div>
<div class="page">
2ページ目
</div>
</body>
body {
margin: 0;
}
.page {
box-sizing: border-box;
width: 297mm;
height: 210mm;
margin: 0;
padding: 30px;
}
各ページに対応するHTMLのブロック要素を作って、そのサイズをページのサイズと同じに設定する。周囲に余白を取るときは box-sizing: border-box; を設定した上で padding を設定すると内側の領域のサイズを計算する必要がなくなるのでわかりやすくなる。
前セクションで @page の margin を0以外に設定した場合、このブロック要素のサイズ指定はそのマージンを引いた分の大きさにしないといけない。
body 要素にはデフォルトのスタイルシートでマージンが設定されているので0にセットしておかないとずれる。
break-*** 系のCSSプロパティを使用する
break-before 等のプロパティを使って改ページする部分を指定する。
.page {
box-sizing: border-box;
width: 297mm;
height: 210mm;
margin: 0;
padding: 30px;
break-inside: avoid-page;
}
:nth-child(1 + n of .page) {
break-before: page;
}
break-before: page; によって各 .page の前で改ページするように指定している。break-inside: avoid-page; で各 .page 内では改ページがされないように指定している。
合わせたボックスの縦横サイズからはみ出ないように注意する
当然設定した縦横のサイズをはみ出す要素を置けば印刷時に表示が崩れることになるので、はみ出ないように注意する。内部ではなるべく絶対値は使用せずに%やfrなど相対値で大きさを指定するようにする。私がハマったこととして、display: none; が指定されていて表示されない要素でも、印刷時にはその要素の存在領域を確保した状態で印刷しようとするようなので注意。
小さい文字を印刷したい場合
このセクションの話は Google Chrome の仕様変更により実質的に問題になることはなくなった模様。今は意味のないティップスかもしれない。
ブラウザのフォントサイズには最小値が設定されていて、小さなフォントサイズを指定しても実際の文字サイズが最小値以下にはならないという仕様がある。例えば Google Chrome だと10px以下にはできないできなかった→Chrome 118 から制限がなくなった模様。
最小値10pxは印刷すると十分すぎるほど大きく、もっと小さな文字を印刷したいこともある。
その場合、ウェブページを2倍の大きさで作成して印刷時には縮小されるようにすることで、小さな文字を印刷させるという方法がある。
@page {
size: calc(297mm * 2) calc(210mm * 2);
margin: 0;
}
.page {
width: calc(297mm * 2);
height: calc(210mm * 2);
}
上のようにきっちり2倍の大きさでウェブページを作成する。この状態で10pxの大きさの文字を書けば、A4印刷時には縮小されて1/2の5px相当の大きさで印刷できる。