印刷用のレイアウトを調整して欲しい
紙に印刷…
まだそんなレガシーな技術を使う人類が居るのか…
と愚痴ってる場合ではありません。
やって欲しいと言われたらやるのです。
じゃぁ実際に印刷プレビューを見てみよう
まずは現状の確認から
<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
の3つです。
このプロパティはページの区切りを制御します。
それぞれ解説します。
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を書いてレイアウト整えても
ブラウザ間の印刷プレビューに差がありすぎて吐きます。