@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) ")"; }
}