Bootstap5のウェブページをブラウザで印刷したときのBreakpoint

投稿日：

ホームページを印刷するときになるべく見た目通りに印刷するにはどうしたらいいか調査したときの覚書。

環境： Google Chrome 92, Bootstrap 5.0.2


結局、ブラウザ印刷はB3用紙（364 x 515 mm）とCSSで定義することにした。

@page {
  margin: 5mm;
  size: 364mm 515mm;
}

※ @pageのsizeはChromeとEdgeで有効。Firefoxは効かない。


印刷したときの横幅（Bootstrap Breakpoint）

B3(364 x 515 mm)の場合

B3の横幅364mmを（両端のマージン10mm引いて）pixelに変換すると

ディスプレイ： (364㎜ - 10mm) * 0.04inch * 72dpi = 1020px
印刷： (364㎜ - 10mm) * 0.04inch * 96dpi = 1359px

CSSの@media(BootstrapのBreakpoint)は72dpiで計算される。
この場合、BootstrapのLarge(lg)が適用。
その後、印刷用に横幅1359pxで再描画。

だからブラウザで印刷したときは見た目とBreakpintの位置に違和感がある。
（あくまでも実験した結果による推測です）


A4(210 x 297 mm)の場合

ディスプレイ： (210㎜ - 10mm) * 0.04inch * 72dpi = 576px
印刷： (210㎜ - 10mm) * 0.04inch * 96dpi = 768px

BootstrapのSmall(sm)が適用されて横幅768pxで印刷。

A3(297 x 420 mm)の場合

ディスプレイ： (297㎜ - 10mm) * 0.04inch * 72dpi = 827px
印刷： (297㎜ - 10mm) * 0.04inch * 96dpi = 1102px

BootstrapのMedium(md)が適用されて横幅1102pxで印刷。


関連記事