印刷用のレイアウトを調整して欲しい
紙に印刷…
まだそんなレガシーな技術を使う人類が居るのか…
と愚痴ってる場合ではありません。
やって欲しいと言われたらやるのです。
じゃぁ実際に印刷プレビューを見てみよう
まずは現状の確認から
<div id="hitotume">
<br>1
<br>2
<br>3
</div>
<div id="hutatume">
<br>4
<br>5
<br>6
</div>
<div id="mittume">
<br>7
<br>8
<br>9
</div>
例としてこんな感じのマークアップです。
で印刷プレビューを見てみると
---page1----------------------------------
1
2
3
4
5
---page2----------------------------------
6
7
8
9
という感じにhutatumeの要素がpage1とpage2に分断されてしまいました。
これでは視認性が悪く、ページの把握に手間取ります。
じゃぁどうするのか
cssにはプリンターで印刷する時に便利なプロパティがあります。
break-before
break-after
break-inside
の３つです。
このプロパティはページの区切りを制御します。
それぞれ解説します。
break-before
MDN web docs:break-before
このプロパティを指定された要素の前にページを区切るか否かを指定します。
break-before:autoは初期値、
break-before:avoidは区切るのを禁止、
break-before:allは強制的に区切ります。
今回の例なら
hutatumeにbreak-before:all
を指定すると
---page1----------------------------------
1
2
3
---page2----------------------------------
4
5
6
7
8
---page3----------------------------------
9
となります。
hutatumeの前である3と4の間でページが区切られます。
break-after
MDN web docs:break-after
このプロパティを指定された要素の後にページを区切るか否かを指定します。
break-after:autoは初期値、
break-after:avoidは区切るのを禁止、
break-after:allは強制的に区切ります。
今回の例なら
hutatumeにbreak-after:all
を指定すると
---page1----------------------------------
1
2
3
4
5
---page2----------------------------------
6
---page3----------------------------------
7
8
9
となります。
hutatumeの後である6と7の間でページが区切られます。
break-inside
MDN web docs:break-inside
このプロパティを指定された要素がページに区切られるか否かを指定します。
break-inside:autoは初期値、
break-inside:avoidは区切られるのを禁止します。
今回の例なら
hitotume、hutatume、mittumeにそれぞれbreak-inside:avoid
を指定すると
---page1----------------------------------
1
2
3
---page2----------------------------------
4
5
6
---page3----------------------------------
7
8
9
となります。
それぞれの要素にbreak-inside:avoidを指定しているので
要素の間でページが区切られることはないようにレイアウトされます。
結局どのように使えばいいの？
「あ～、ココでセクションの終わりだからページを区切りたいな」
って時はbreak-afterにallを指定。
「ココからセクションが始まるからページの始まりにしたいな」
って時はbreak-beforeにallを指定。
「このセクションは2ページに跨って印刷されたくないな」
って時はbreak-insideにavoidを指定。
って感じに使えば良い感じにレイアウトされると思います。
編集後記
入社9日目
要素をページに区切られないようにするためにめっちゃ調べました。
多くのサイトはbreak-beforeとbreak-afterは説明してくれるんだけど
求めていたbreak-insideを説明してくれるサイトはごく僅かでした…。
でもいくらメディアクエリでprintを指定してCSSを書いてレイアウト整えても
ブラウザ間の印刷プレビューに差がありすぎて吐きます。