18

Safari で Web ページを余白なしで PDF に印刷したいと考えています。印刷ダイアログでページサイズが「A4フチなし」に設定されています。

私が何をしているように見えても、OSX の Safari は HTML の周りに余分なマージンを追加しています。「印刷背景」をチェックして、私が何を意味するかを確認してください。

明らかに、@page-rule は Safari には影響しませんが、他の方法はありますか?

http://jsfiddle.net/willemvb/psFHC/

@page {
  size: 21cm 29.7cm;   /*A4*/
  margin: 0; /*webkit says no*/
}

html{
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    width: 100%; 
    background: #eee;
}

</p>

4

2 に答える 2

10

考慮すべき 3 つの点があります。

  1. ページの罫線の余白、残念ながら

    @page {
margin: 0cm !important;
}

    Safari 6 では効果がありませんが、Chrome 23 では効果があります。私の知る限り、Safari がこれをサポートしていない限り、解決策はありません (約 10mm に固定されているようです)。

  2. ここに表示されているページ設定では、[印刷...] メニュー パネルでカスタムの [用紙サイズ] を余白なしで定義する必要がある場合があります (既に行っています)。

  3. 明らかに、他の内部コンテンツの html、body を処理する必要があります... 余裕がないこと。

于 2012-12-20T16:29:09.250 に答える
4

選択した答えは正しくありません。質問に正しく答えるには、まず問題を理解する必要があります。

フチなし印刷とプリンター:

フチなし印刷ができるといっても、「実際に」印刷できるプリンターはほとんどありません。ほとんどの場合、実際のページを超えて印刷物を少し拡大するだけで、通常はスライダーでその量を調整できます. その理由は、ほとんどのプリンターには用紙が実際にどこにあるかを判断するためのセンサーがなく、用紙がそこにあると想定されているためです。ほとんどの印刷では、0.5mm ずれていても 1mm ずれていても問題ありません。

フチなしの場合、印刷の周りに白い（紙の）フチが付くため、これは重要です。

このため、95% のプリンターはこの「フチなし」印刷を模倣しており、紙が端まで完全に覆われるように、実際にインクを少しだけ空中に飛ばします。薄い空気への印刷は良くなく、長期的には汚れの原因となる可能性があるため、避ける必要があります。

優れた大判プリンターには紙幅を検出するセンサーがありますが、1 ロールあたり 50 ～ 150 m の長さがあるため、0.1 mm のずれでも問題になり、紙詰まりを引き起こす可能性があるため、紙をわずかに調整するために使用されます。

この問題を完全に解決するために、「裁ち落とし」が使用されます。実際にはすべてを少し大きめの紙にデザインし、後でそのサイズにカットします。

わかりました...今、あなたは知っています。

CSS フチなし印刷の問題に進みます。

この問題を完全に理解するには、「ボックス」に精通している必要があります。

ボックスモデル

Box は、CSS のほぼすべての要素の動作をモデル化します。印刷したいページは、通常、何らかのタグでラップされています。これは、id を含む div または次のようなクラスです。

<div class="page">lots of content</div>

ボーダーと呼ばれる黒い線について説明します。これは、「マージン」と「パディング」の 2 つの兄弟です。

ほとんどの人が知らないのは、そこにあるすべてのプリンターが、サポートするすべての用紙サイズで印刷できる余白を実際に報告するという事実です。

これは HP 2800dtn です (用紙サイズにカーソルを合わせると表示されます)。

HP2800dtn

「修正」：

Safariは正しいことをしています。私はそれを言った...それはバグではありません。

フチなし印刷を拒否しているように見えるのは、実際には（現実の世界では）不可能だからです。できますが、100% ズームで印刷すると、プリンターによってコンテンツがトリミングされます。これは、前述のように、端まで印刷できません。

そのため、ほとんどの場合、余白を「紙に合わせる」必要があります (OS X のデフォルトの動作で、約 98% のズームに縮小されます)。次に、プリンタでフチなしモードを有効にして、縮小された 98% のズーム バージョンを 103% に拡大します。計算すると、おそらく元のバージョンの 101.5% という奇妙な数値が得られます (確かなことは言えません。2 で割らない場合、私は数学が得意ではありません :) これは正確ではありません。フォントとベクトル グラフィックの問題ですが、ピクセルの世界では大混乱を引き起こします。ピクセルの世界は、私と同じように、デフォルトで数字の 2 が好きで、残りはそれを「滑らかにする」だけです。

壊れてないから直せない。Safari は、div の境界線とそのすべての内部要素を、プリンターから報告された用紙の「印刷可能領域」内に配置します。良い！

ソリューション：

command+p を押して用紙サイズを選択するまで、プリンターのマージンを知ることはできません。

しかし、CSS で何ができるのでしょうか。

  1. 定義した div.page の余白を使用します。マージンは、その div を含む要素から計算されることに注意してください。pageしたがって、をラップする必要がありますactualpage

メディア タイプごとに CSS を定義して、画面に架空の印刷余白 (実際のものに近い) を表示し、印刷物が余白のないバージョンになるようにします。

/* @media all { */ /* I like using these */
  div.actualpage {
   ...
   height: 210mm; /* DIN A4 standard paper size */
   width: 297mm;
   ...
  }
  div.page {
   ...
   /* margin: 0;  you don't really have to explicitly set it to 0 unless it's already set to something else */
   ...
  }
/* } */

@media screen {
 div.page {
  ...
  margin: 5mm 5mm 5mm 10mm; /* printers usually have a bigger bottom margin*/
  ...
  }
}

@media print {
 div.page {
  ...
  margin: 0mm; /* Browser will apply the correct margins when it prints */
  ...
  }
}

ページを別の div にラップできない場合は、パディングを使用してハックできます (つまり、あまり洗練されていないソリューション)。

/* @media all { */ /* I like using these */
  div.page {
   ...
   height: 210mm; /* DIN A4 standard paper size */
   width: 297mm;
   /* padding: 0;  you don't really have to explicitly set it to 0 unless it's already set to something else */
   ...
  }
/* } */

@media screen {
 div.page {
  ...
  padding: 5mm 5mm 5mm 10mm; /* printers usually have a bigger bottom margin*/
  ...
  }
}

@media print {
 div.page {
  ...
  padding: 0mm; /* Browser will apply the correct margins when it prints */
  ...
  }
}
于 2015-12-01T11:03:51.563 に答える