web-dev-qa-db-ja.com

Webページを印刷するためのピクセル単位の安全な幅は？

Webページを印刷するための安全なピクセル単位の幅は？

私のページには大きな画像が含まれており、印刷時に切り取られないようにしたいです。

さまざまなブラウザマージンとUS Letter/DIN A4用紙サイズ。標準のレターサイズとデフォルトのDPI値があります。これらをpixelに変換できます。画像のwidth属性で指定する値は？

cssprinting
82
aemkei

真の「普遍的な答え」については、私はそれを提供することはできません。ただし、いくつかの詳細については、シンプルで決定的な答えを提供できます...

670ピクセル

少なくとも、これはマイクロソフト製品にとって安全な答えのようです。 675を含む多くの提案を読みましたが、これを自分でテストした後、670が思いつきました。

すべてのDPI、マージンの問題、ハードウェアの違いは別として、この答えは、IE9で印刷プレビュー（標準マージンを使用）を使用し、印刷サイズをデフォルトの「縮小してフィット」ではなく100％に設定した場合、すべてがこの幅で途切れることなくページに収まります。

HTMLメールを自分に送信し、Windows Live Mail 2011（Outlook Expressになったもの）で受信し、670幅でページを印刷すると、すべてが適切に収まります。これは、実際のハードコピーまたはMS XPSファイル（仮想印刷）に送信する場合に当てはまります。

実験する前は、700の任意の幅を使用していました。上記のすべてのシナリオで、ページの一部が切り取られていました。 670に減らしたとき、すべてが完璧にフィットしました。

幅の設定方法については、プリミティブな「ラッパー」htmlテーブルを使用して、幅を670に定義しました。

エンドユーザーのソフトウェアを指示できる場合は、そのような問題は簡単です。不可能な場合（当然のことですが）、使用しているブラウザなどの詳細をテストし、重要なブラウザのソリューションをハードコーディングできます。 IEとFFの間で、あなたはWebユーザーの約90％を文字通りカバーします。

85
Jonathan

見た目ほど簡単ではありません。私はちょうど同様の質問にぶつかりました、そして、ここに私が得たものがあります：最初に、 wikipedia の少しの背景。

次に、CSSでは、紙の場合、ptがあります。これはポイント、つまり1/72インチです。したがって、モニターと同じサイズの画像を使用する場合は、最初にモニターのDPI/PPI（通常、Wikipediaの記事に記載されている96）を知ってから、インチに変換してから、ポイント（72で割る）。

しかし、再び、ブラウザーには印刷可能なコンテンツに関するあらゆる種類の問題があります。たとえば、float cssタグを使用しようとすると、ページ区切りを使用していても、Geckoベースのブラウザーはページの途中で画像をカットします： ;あなたの画像で（ここを参照してください Mozillaバグ追跡システム ）。

A List Apart のこの記事には、ブラウザからの印刷に関する（多くの）詳細があります。

さらに、印刷プレビューで幅に合わせて「縮小」を指定し、さまざまな用紙サイズと向きを指定する必要があります。

したがって、インチ単位で適切な画像サイズを把握するか、ポイントを意味するか（7.1 "* 72 = 511.2なので、width: 511pt;は、ピクセルサイズに関係なく、レターサイズの用紙で機能します。または、幅のパーセンテージ幅に移動し、用紙サイズに基づいて画像の幅を調整します。

幸運を...

44
Gyuri

私が見つけた問題の解決策の1つは、幅をインチ単位で設定することでした。これまでのところ、私はこれがChromeで動作することをテスト/確認しただけです。私がそれを使用していたもの（8.5 x 11シートを印刷するため）にうまくいきました

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}
17
jHouse

印刷では、幅を設定せず、印刷レイアウトに動的な幅を持たせない障害物を取り除きます。つまり、ブラウザウィンドウをどんどん小さくしていくと、コンテンツは切り取られたり隠されたりしなくなりますが、ドキュメントは長くなります。このように、残りは必ずprinter/pdf-creatorによって処理されます。

画像や表などの固定幅の要素はどうですか？

画像

私が考えることができるオプション：

  • 印刷CSSで画像を任意の場合に収まると思われる幅に縮小し、pxではなくptを使用します（ただし、印刷にはさらに多くのポイント/ユニットが必要なので、これはほとんど問題になりません）
  • 印刷から除外

テーブル

  • 固定幅を削除します
  • 大量の情報があるテーブルがある場合は、ランドスケープを使用します
  • レイアウト目的でテーブルを使用しないでください
  • 印刷から除外
  • コンテンツを抽出し、段落として印刷する

http://www.intensivstation.ch/en/css/print/

または、CSS、印刷、メディア、レイアウトの組み合わせのその他のGoogle結果

9
markus

Webページで印刷したときに画像が切り取られないようにするためのソリューションは、次のCSSルールを使用することです。

@media print { 
  img { 
    max-width:100% !important;
  } 
}
5
dontcallmedom

プリンターはピクセルを理解せず、ドット（CSSのpt）を理解します。最善の解決策は、印刷用に追加のCSSを作成し、そのすべての測定値をドットで囲むことです。

次に、HTMLコードのヘッドセクションに次のコードを入力します。

<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
4
ARemesal

私はそれがあるとは思わない...それはブラウザ、プリンタ（物理的な最大dpi）とそのドライバ、あなたが指摘する用紙サイズ（そして私はB5用紙にも印刷したいかもしれません...）、設定（横向きまたは縦向き？）、さらにスケール（割合）などを変更できることがよくあります。
ユーザーが設定を調整できるようにします...

0
PhiLho