[印刷] をクリックするとグリフィコンが表示されませんが、ブラウザ ウィンドウでは正しく表示されます。最新の Twitter ブートストラップを除いて、静的コンテンツを含む単純なページについて話しています。
Bootstrap アイコンを印刷して表示することは可能ですか?
質問する
4389 次
4 に答える
7
完全な CSS ソリューション
ユーザーがブラウザで「背景画像の印刷」をオンにする必要なく、印刷時にブートストラップのアイコン（グリフィコン）を表示する必要があるサイトで発生するこの問題の80〜90％を解決するCSS印刷スタイルシートソリューションを作成しましたこのソリューションは、すべての主要なブラウザー (Chrome、Safari、Firefox、IE) で動作します。
この解決策は、特にブートストラップの問題を参照して詳細に説明されていますが、必要に応じて背景画像が印刷されないという他の同様の問題にも活用できるはずです。また、別のスタイルシートを使用していることも前提としてい@media print {}ます。解決しない状況の 10 ～ 20% と、その理由を最後に説明します (これらの発生に対する修正も)。
background-image、background-positionおよびプロパティがスプライト イメージの位置とサイズに排他的に使用される問題は、いくつかのオーバーライドと共にwidth heightプロパティ、、、およびに置き換えることで解決されcontent: url()ます。clip: rect()margin-topmargin-left
私の場合、<i class="icon-globe"></i>国際的に利用可能なコースへのリンクを表示するために を使用していたので、ユーザーは頻繁にこのリストを印刷しましたが、重要な表示情報はブラウザによって削除されました。すべての CSS をコピーしてアイコンを印刷スタイルシートに表示し、プロパティ値
-webkit-print-color-adjust:exact;を
[class^="icon-"], [class*="icon-"] {
背景画像: url("../img/glyphicons-halflings.png");
背景位置: 14px 14px;
background-repeat: 繰り返しなし...
}
しかし、これは Chrome と Safari の問題を解決しただけであり、Firefox または IE がこの Webkit プロパティをすぐにサポートするというコミュニティからの兆候はありません。
<i class="icon-globe"></i>そのため、ページがブラウザによってプリンタ ドライバに送信されるときのレンダリング 方法を完全に変更する必要があります。
スプライトを実行する際の標準的な方法は、表示可能な開始スペース (この場合は 14px x 14px) を宣言しbackground-image、適切なアイコンが透けて見えるようにそのスペースの後ろに再配置することです。
これをフォアグラウンドで効果的に複製するには、 を使用しcontent: url()てイメージを呼び出し、clip: rect()このイメージを適切なアイコンに切り詰めてから、負の値を使用しmargin-topてmargin-left新しいフォアグラウンド イメージをバックグラウンド イメージ アイコンが最初に配置されていた場所に戻します。
難点は、クリップを使用して画像を切り取るには 4 つの座標 (上、右、下、左)background-positionが必要ですが、必要なのは 2 つの座標 (xpos、ypos - 左上隅からのピクセル距離) だけです。このプロパティを使用する際のもう 1 つの問題は、これらの座標clipとは異なりpadding、marginこれらの座標がそれぞれの外側の境界線から計算されず、上辺と左辺のみから計算されることです。これにより、実際には数学的変換がbackground-position少し簡単になりますが、慣れるまでに時間がかかる場合があります。
クリップ プロパティの詳細
(私の評判が低いためにリンクが不足しているため、私が行った卑劣な行為を理解する必要があります)
www.ibloomstudios[dot]com/articles/misunderstood_css_clip/ css-tricks[dot]com /css-sprites-with-inline-images/tympanus[dot]net/codrops/2013/01/16/css-clip-property の理解/
実際のコード
例に戻ると、<i class="icon-globe"></i>変換したい
[class^="icon-"], [class*="icon-"] {
表示: インラインブロック;
幅: 14px;
高さ: 14px;
*margin-right: .3em;
行の高さ: 14px;
vertical-align: テキストの上;
背景画像: url("../img/glyphicons-halflings.png");
背景位置: 14px 14px;
バックグラウンドリピート: リピートなし;
}
//他のアイコンをスキップしています...
.icon-globe {
背景位置: -336px -144px;
}
印刷スタイルシートでこれに
i[class^="icon-"], i[class*="icon-"] {
表示: インラインブロック;
vertical-align: テキストの上;
幅: 14px;
背景画像:なし!重要;
バックグラウンドリピート:リピートなし;
背景位置: 0 0!重要;
}
//他のアイコンをスキップしています...
i.icon-globe::after {
クリップ: rect(144px 350px 158px 336px)!重要;
margin-left: -336px!重要;
margin-top: -144px!重要;
content: url('../img/glyphicons-halflings.png')!重要;
位置:絶対!重要;
幅:自動!重要;
高さ:自動!重要;
}
background-position(xpos & ypos OR left & top)座標を取得して正に変更することは、clip : rect(top, left+14px, top+14px, left)と同じであることがわかります。
次に、元のネガbackground-position: left top;をmargin-leftおよびとして使用しmargin-topます。
この CSS には!important、元のブートストラップ アイコンが、印刷時に切り取られた新しいクリップ イメージの上に表示される場合に備えて、いくつかのオーバーライドも含まれています。
それは地球のアイコンで機能し、特定の問題を解決しましたが、他にいくつのアイコンが印刷されていないのか疑問に思ったので、メモ帳のすべてのコマンドを巧妙に置き換えて、ブートストラップ アイコンの CSS とタブ区切りの 1 行バージョンを作成しました。各要素（さらに、ゼロにいくつかのpxを追加して、列が整列するようにします）...
.icon-glass { 背景位置: 0 px 0 px ; }
.icon-music { 背景位置: -24 px 0 px ; }
.icon-search { 背景位置: -48 px 0 px ; }
.icon-envelope { background-position: -72 px 0 px ; }
.icon-heart { background-position: -96 px 0 px ; }
.icon-star { background-position: -120 px 0 px ; }
.icon-star-empty { background-position: -144 px 0 px ; }
.icon-user { background-position: -168 px 0 px ; }
.icon-film { background-position: -192 px 0 px ; }
.icon-th-large { background-position: -216 px 0 px ; }
.icon-th { background-position: -240 px 0 px ; }
.icon-th-list { background-position: -264 px 0 px ; }
.icon-ok { 背景位置: -288 px 0 px ; }
.icon-remove { 背景位置: -312 px 0 px ; }
.icon-zoom-in { background-position: -336 px 0 px ; }
.icon-zoom-out { background-position: -360 px 0 px ; }
.icon-off { 背景位置: -384 px 0 px ; }
.icon-signal { background-position: -408 px 0 px ; }
.icon-cog { 背景位置: -432 px 0 px ; }
.icon-trash { 背景位置: -456 px 0 px ; }
.icon-home { 背景位置: 0 px -24 px ; }
.icon-file { 背景位置: -24 px -24 px ; }
.icon-time { background-position: -48 px -24 px ; }
.icon-road { background-position: -72 px -24 px ; }
.icon-download-alt { background-position: -96 px -24 px ; }
.icon-download { background-position: -120 px -24 px ; }
.icon-upload { background-position: -144 px -24 px ; }
.icon-inbox { 背景位置: -168 px -24 px ; }
.icon-play-circle { background-position: -192 px -24 px ; }
.icon-repeat { 背景位置: -216 px -24 px ; }
.icon-refresh { background-position: -240 px -24 px ; }
.icon-list-alt { background-position: -264 px -24 px ; }
.icon-lock { background-position: -287 px -24 px ; }
.icon-flag { background-position: -312 px -24 px ; }
.icon-headphones { background-position: -336 px -24 px ; }
.icon-volume-off { background-position: -360 px -24 px ; }
.icon-volume-down { background-position: -384 px -24 px ; }
.icon-volume-up { background-position: -408 px -24 px ; }
.icon-qrcode { background-position: -432 px -24 px ; }
.icon-barcode { background-position: -456 px -24 px ; }
.icon-tag { 背景位置: 0 px -48 px ; }
.icon-tags { background-position: -25 px -48 px ; }
.icon-book { 背景位置: -48 px -48 px ; }
.icon ブックマーク { 背景位置: -72 px -48 px ; }
.icon-print { background-position: -96 px -48 px ; }
.icon-camera { background-position: -120 px -48 px ; }
.icon-font { background-position: -144 px -48 px ; }
.icon-bold { background-position: -167 px -48 px ; }
.icon-italic { 背景位置: -192 px -48 px ; }
.icon-text-height { background-position: -216 px -48 px ; }
.icon-text-width { background-position: -240 px -48 px ; }
.icon-align-left { background-position: -264 px -48 px ; }
.icon-align-center { background-position: -288 px -48 px ; }
.icon-align-right { background-position: -312 px -48 px ; }
.icon-align-justify { background-position: -336 px -48 px ; }
.icon-list { background-position: -360 px -48 px ; }
.icon-indent-left { background-position: -384 px -48 px ; }
.icon-indent-right { background-position: -408 px -48 px ; }
.icon-facetime-video { 背景位置: -432 px -48 px ; }
.icon-picture { background-position: -456 px -48 px ; }
.icon-pencil { background-position: 0 px -72 px ; }
.icon-map-marker { background-position: -24 px -72 px ; }
.icon-adjust { 背景位置: -48 px -72 px ; }
.icon-tint { background-position: -72 px -72 px ; }
.icon-edit { 背景位置: -96 px -72 px ; }
.icon-share { 背景位置: -120 px -72 px ; }
.icon-check { background-position: -144 px -72 px ; }
.icon-move { background-position: -168 px -72 px ; }
.icon-step-backward { background-position: -192 px -72 px ; }
.icon-fast-backward { background-position: -216 px -72 px ; }
.icon-backward { background-position: -240 px -72 px ; }
.icon-play { background-position: -264 px -72 px ; }
.icon-pause { background-position: -288 px -72 px ; }
.icon-stop { 背景位置: -312 px -72 px ; }
.icon-forward { background-position: -336 px -72 px ; }
.icon-fast-forward { background-position: -360 px -72 px ; }
.icon-step-forward { background-position: -384 px -72 px ; }
.icon-eject { background-position: -408 px -72 px ; }
.icon-chevron-left { background-position: -432 px -72 px ; }
.icon-chevron-right { background-position: -456 px -72 px ; }
.icon-plus-sign { background-position: 0 px -96 px ; }
.icon-minus-sign { background-position: -24 px -96 px ; }
.icon-remove-sign { background-position: -48 px -96 px ; }
.icon-ok-sign { background-position: -72 px -96 px ; }
.icon-question-sign { background-position: -96 px -96 px ; }
.icon-info-sign { background-position: -120 px -96 px ; }
.icon-screenshot { background-position: -144 px -96 px ; }
.icon-remove-circle { background-position: -168 px -96 px ; }
.icon-ok-circle { background-position: -192 px -96 px ; }
.icon-ban-circle { background-position: -216 px -96 px ; }
.icon-arrow-left { background-position: -240 px -96 px ; }
.icon-arrow-right { background-position: -264 px -96 px ; }
.icon-arrow-up { background-position: -289 px -96 px ; }
.icon-arrow-down { background-position: -312 px -96 px ; }
.icon-share-alt { background-position: -336 px -96 px ; }
.icon-resize-full { background-position: -360 px -96 px ; }
.icon-resize-small { background-position: -384 px -96 px ; }
.icon-plus { background-position: -408 px -96 px ; }
.icon-minus { background-position: -433 px -96 px ; }
.icon-アスタリスク { 背景位置: -456 px -96 px ; }
.icon-exclamation-sign { background-position: 0 px -120 px ; }
.icon-gift { background-position: -24 px -120 px ; }
.icon-leaf { background-position: -48 px -120 px ; }
.icon-fire { background-position: -72 px -120 px ; }
.icon-eye-open { background-position: -96 px -120 px ; }
.icon-eye-close { background-position: -120 px -120 px ; }
.icon-warning-sign { background-position: -144 px -120 px ; }
.icon-plane { background-position: -168 px -120 px ; }
.icon-calendar { 背景位置: -192 px -120 px ; }
.icon-random { background-position: -216 px -120 px ; }
.icon-comment { background-position: -240 px -120 px ; }
.icon-magnet { background-position: -264 px -120 px ; }
.icon-chevron-up { background-position: -288 px -120 px ; }
.icon-chevron-down { background-position: -313 px -119 px ; }
.icon-retweet { background-position: -336 px -120 px ; }
.icon-shopping-cart { background-position: -360 px -120 px ; }
.icon-folder-close { background-position: -384 px -120 px ; }
.icon-folder-open { background-position: -408 px -120 px ; }
.icon-resize-vertical { background-position: -432 px -119 px ; }
.icon-resize-horizontal { background-position: -456 px -118 px ; }
.icon-hdd { 背景位置: 0 px -144 px ; }
.icon-bullhorn { background-position: -24 px -144 px ; }
.icon-bell { background-position: -48 px -144 px ; }
.icon-certificate { background-position: -72 px -144 px ; }
.icon-thumbs-up { background-position: -96 px -144 px ; }
.icon-thumbs-down { background-position: -120 px -144 px ; }
.icon-hand-right { background-position: -144 px -144 px ; }
.icon-hand-left { background-position: -168 px -144 px ; }
.icon-hand-up { background-position: -192 px -144 px ; }
.icon-hand-down { background-position: -216 px -144 px ; }
.icon-circle-arrow-right { background-position: -240 px -144 px ; }
.icon-circle-arrow-left { background-position: -264 px -144 px ; }
.icon-circle-arrow-up { background-position: -288 px -144 px ; }
.icon-circle-arrow-down { background-position: -312 px -144 px ; }
.icon-globe { background-position: -336 px -144 px ; }
.icon-wrench { background-position: -360 px -144 px ; }
.icon-tasks { background-position: -384 px -144 px ; }
.icon-filter { background-position: -408 px -144 px ; }
.icon-briefcase { background-position: -432 px -144 px ; }
.icon-fullscreen { background-position: -456 px -144 px ; }
...そして、Excel スプレッドシートを使用して一度にすべての計算を行うことができます。上記の書式設定が使用されている限り、スプライトの変更を行うために Excel シートをセットアップし、このプロセスを複製するために必要な変数は 3 つだけです -imgパス、幅、高さ、人々がそれらの詳細を要求した場合、それらのセルの正確な式で更新しますが、今のところ結果は次のとおりです(もう少し巧妙にメモ帳++のすべてのコマンドを置き換えて、整数とpxの間のスペースを削除し、いくつかの改行を追加した後) )...
i.icon-glass::after{
クリップ: rect( 0px 14px 14px 0px)!重要;
margin-top: 0px!重要;
margin-left: 0px!重要;
content: url('../img/glyphicons-halflings.png')!重要; 位置:絶対!重要;
幅:自動!重要;
高さ:自動!重要;
}
i.icon-music::after{
クリップ: rect( 0px 38px 14px 24px)!重要;
margin-top: 0px!重要;
margin-left: -24px!重要;
content: url('../img/glyphicons-halflings.png')!重要;
位置:絶対!重要;
幅:自動!重要;
高さ:自動!重要;
}
i.icon-search::after{
クリップ: rect( 0px 62px 14px 48px)!重要;
margin-top: 0px!重要;
margin-left: -48px!重要;
content: url('../img/glyphicons-halflings.png')!重要;
位置:絶対!重要;
幅:自動!重要;
高さ:自動!重要;
}
私の評判が低すぎるため、文字スペースとハイパーリンクが不足していますが、それを手伝ってください)以前の回答で参照されているブートストラップ問題レポートに CSS の結果全体を投稿しました https://github.com/twitter/bootstrap/号/4412
うまくいかないとき
画面の代わりに印刷スタイルシートを使用してブラウザー ウィンドウで表示することでこれをテストした人は誰でも、それが完全に機能することを確認できます。前述したように、この解決策は、10% ～ 20% のケースを除いて機能します。 . このソリューションの例外は、実際にページを印刷する (またはペーパーレス デバッグ用にファイルに印刷する) 場合にのみ表示されます。
position: absolute;プロパティを使用するために必要なプロパティが原因で、新しいフォアグラウンド イメージ スプライトが印刷可能領域の外にオーバーフローする可能性がありclipます。W3C 標準に関して言えば、これらの画像のレンダリングは、CSS Paged Media Module Level 3セクション 4.2-ページ ボックス外のコンテンツに記載されているように定義されていません。
この仕様は、ページ ボックスの外側に配置されたボックスの処理方法を定義しません。
（これもチェックしてください 古いがより良い説明HTML print with absolute positions）
では、標準が合意されていない場合、ブラウザーの巨人は何をしているのでしょうか。何が起こるかというと、印刷可能なページ領域の上部、下部、および側面に沿ってオーバーフローするスプライト画像全体 (非表示部分) により、ブラウザーは CSS と印刷可能なページ領域を処理および調整する方法を決定する必要があります。このブラウザー修正は、ブラウザーで を表示する場合には表示されません。これは、すべてが 1 つのページであり、画像がサイド リミットを問題なくオーバーフローする可能性があるためです。2014 年 5 月 28 日の時点でそれぞれが何をしているのか、そしておそらくなぜこのようになっているのかを説明します。
まず、それを最もよく処理するブラウザを使いましょう。
インターネットエクスプローラ！
(他のことを言うつもりでしたが) 画像は適切に切り取られていますが、印刷可能な領域の端を制限することから離れているため、印刷時に間違った場所に表示されます。
Safari と Chrome は同じように動作し、印刷可能な領域の端を制限して画像を移動しますが、クリップはその場所に残り、指定が間違っているか、アイコンが表示されません。
Firefox は、最初のページにアイコンのみを印刷することでこれを最悪に処理しているように見えます。オーバーフローが発生した場合、残りのすべてのアイコンを、存在する div またはセクション内の上部のページに強制的に配置します。(これは全体的な解決策から Firefox を除外すると主張する人もいるかもしれませんが、最初のページが機能しているという事実は、私たちがうまく尋ねれば、Mozilla が将来解決することを願っています)
これが 80 ～ 90% で機能すると言うのはなぜですか? スプライトのサイズと印刷可能領域からの距離は、ページごとに大きく異なる 2 つの決定要因であり、ほとんどの場合、印刷可能領域の 20% までしか影響しないためです。
これらの 10 ～ 20% の発生に対するソリューション
私の場合、アイコンは多くのページにわたる大きなリストで使用されているため、globe-iconブラウザによっては、ほとんどすべてのページの上部がずれているか、間違ったアイコンになっています。このページは頻繁に印刷され、正確である必要があることがわかっているため、少なくとも 99% の確率でこれが機能することを確認する必要があります。これを行うには、スプライトから地球のアイコンを切り取り、追加の配置や CSS のクリッピングを行わずに挿入します (これが、この問題に対する元の最良の回答です)。
i.icon-globe::after{
content: url('../img/globe-glyphicon.png')!重要;
}
そして、まだこれを適切に印刷できないユーザーの 1% についてはどうでしょうか。動作するブラウザーから PDF ファイルに印刷し、それをダウンロードして印刷できるようにします。
読んでくれてありがとう (@_@)
于 2014-05-28T23:58:48.383 に答える
2
Bootstrap の mdo から: 「これは背景画像であり、印刷時にブラウザによって削除される可能性があります。」
于 2013-01-02T21:58:48.213 に答える
1
私もこれにかなり困惑しました。結局、グリフィコン システムを使用する代わりに、使用していたグリフの専用イメージを作成することになりました。次に、 and を使用@printし:contentて、アイコンがあるべき場所に画像を挿入しました。
@media print {
i.glyphicon-arrow-right{ content: url(../img/arrow.png) !important;}
}
于 2014-01-17T21:29:02.923 に答える
0
Bootstrap の古いバージョン (2.3.2 など) の場合@media print、下部にブロックがあり_reset.scss、ブラウザーの印刷 CSS の決定を改善できません。最近のすべてのブラウザーでは、印刷時に背景画像が必要かどうかを構成できます。これは、このブロック内の行によって上書きされ* { background: transparent !important; }、印刷ダイアログで「背景画像を印刷する」オプションを選択した場合でも、背景画像を使用するアイコン ライブラリが壊れます。
最新の Bootstrap バージョンを使用していて、これがまだ問題である場合は、印刷メディア css が独自のファイルに分割されており、Bootstrap カスタマイザーを使用して除外できます。
于 2015-05-04T10:34:06.483 に答える