bootstrapのprintモジュール

(1102d) 更新

公開メモ

いろいろ迷惑

.visible-print や .hidden-print は良いとして、 「a 要素の直後にリンク先を括弧書きで印刷する」なんて機能は迷惑千万。

ユーザーは基本的には 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 を隠す(これは有益)

以外は余計なので、

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
  }
}

としました。


Counter: 3767 (from 2010/06/03), today: 1, yesterday: 2