bootstrapのprintモジュール の履歴(No.1)

いろいろ迷惑†

.visible-print や .hidden-print は良いとして、 リンク先を印刷するとかのその他の機能はこれのおかげで喜んでる人なんて皆無じゃないかと。

ユーザーは基本的には WISIWIG を期待すると思うし、 背景の印刷をする・しないはブラウザ側で選べることが多いし、

LANG:css(linenumber)
@media print {
  *, :after, :before {
    color: #000 !important;
    text-shadow: none !important;
    background: 0 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
  }

  a, a: visited {
    text-decoration: underline
  }

  a[href]:after {
    content: " (" attr(href) ")"
  }

  abbr[title]:after {
    content: " (" attr(title) ")"
  }

  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""
  }

  blockquote, pre {
    border: 1px solid #999;
    page-break-inside: avoid
  }

  thead {
    display: table-header-group
  }

  img, tr {
    page-break-inside: avoid
  }

  img {
    max-width: 100% !important
  }

  h2, h3, p {
    orphans:3; /* 改ページされる際の前ページの最低行数 */
    widows:3   /* これは何？ */
  }

  h2, h3 {
    page-break-after: avoid
  }

  select {
    background: #fff !important
  }

  .navbar {
    display: none
  }

  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important
  }

  .label {
    border: 1px solid #000
  }

  .table {
    border-collapse: collapse !important
  }

  .table td,
  .table th {
    background-color: #fff !important
  }

  .table-bordered td,
  .table-bordered th {
    border: 1px solid #ddd !important
  }
}

やっていることは、

• 装飾を極力削る
  • 背景をできる限り白にする
  • 文字を黒にする
  • ドロップシャドーを無効にする
• リンクの後に括弧書きで飛び先を表示する
• リンクに下線を表示する
• 短縮語の後に括弧書きで正式名を表示する
• blockquote, pre に枠を付ける
• 改行関連
• navbar を隠す
• .btn > .caret に枠を付ける
• テーブルに枠を付ける

ですが、

• 改行関連（これは有効）
• navbar を隠す（これは有益）
• .btn > .caret に枠を付ける（これは有効？）

以外は余計なので、

LANG:css(linenumber)
@media print {
  thead {
    display: table-header-group
  }

  img, svg, tr {
    page-break-inside: avoid
  }

  img {
    max-width: 100% !important
  }

  h2, h3, h4, p {
    orphans:3; /* 改ページされる際の前ページの最低行数 */
    widows:3   /* これは何？ */
  }

  h2, h3, h4 {
    page-break-after: avoid
  }

  .navbar {
    display: none
  }
}

としました。