@pageディレクティブでページ全体の余白の調整。
単位はmmがよく利用される。
@media print { @page { margin: 5mm; } }
印刷では、ウェブ上での1ページが複数ページになるため、見出しの途中や画像の途中でページが変わることがある。
以下は表示する行数をコントロールする方法。
@media print { p,h1, h2, h3, h4, h5, h6 { /* 改ページ前のページ末尾に書かれるべき最低行数 */ orphans: 3; /* 改ページ後のページ先頭に書かれるべき最低行数 */ widows: 3; } h1, h2, h3, h4, h5, h6 { /* 要素の直後で改ページしない */ page-break-after: avoid; } table, img, pre, blockquote { /* 要素の途中で改ページしない */ page-break-inside: avoid; } }
リンク先を表示させたり、略語を示すabbrタグのtitleを表示。
@media print{ a.link[href]:after { content: " (" attr(href) ")"; } a.link[href^="javascript:"]:after, a.link[href^="#"]:after { content: ""; } abbr[title]:after { content: " (" attr(title) ")"; } }