印刷用CSSでよく設定されているパターン

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA