CSSでSafariの印刷マージンを設定して境界線を印刷する方法

Question

WebページをSafariで余白なしで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; 
} 

Answer 1

考慮して取るべき3つの事がある：

1. ページのルールのマージン、残念ながら

   @page { 
   margin: 0cm !important; 
   } 
   

   ハ私が知っている限り、Safariがこれをサポートしていない限り、解決策はありません（約10mmに固定されているように見えます）。

2. hereと表示されているページ設定では、「印刷...」メニューパネルでカスタム「用紙サイズ」を余白なしに定義する必要があります（すでにbtwしています）。

3. 明らかに他の内部コンテンツhtml、body ...の世話をするには余白を持たないでください。

Answer 2

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

フチなし印刷やプリンタ：

非常に少数のプリンタは、「実際に」、彼らは彼らが何を言うても、フチなしプリントを印刷することができます。ほとんどの場合、プリントが少しだけ拡大されるので、実際のページを超えて広がります。通常、その量を調整するスライダを与えます。その理由は、ほとんどのプリンタは紙が実際にどこにあるかを判断するセンサを持っていないということです。用紙はそこにあると推定され、ほとんどのプリントでは0,5mmオフか1mmでも問題ありません。

縁なしの場合は、周囲に白い（紙の）境界線が印刷されているため、重要です。

この理由から、そこにあるプリンタの95％は実際にインクを薄い空気の中に少しずつ流し込んでこの縁なしのプリントを模倣しているだけなので、紙が端まで完全に覆われています。薄い空気中に印刷することは悪く、長期間に渡って汚れが発生する可能性があるため避けてください。そのため、エッジ上の印刷量を最小限に抑える必要があります。

優れた大判プリンタには、用紙の幅を検出するセンサがありますが、ロールごとに50〜150mの長さがあるため、0.1mmの位置ずれが問題となり、紙詰まりが発生する可能性があります。

この問題を完全に解決するために、後でサイズにカットされたやや大きめの用紙にすべてをデザインする「ブリード」が使用されます。

いいえ...あなたは知っています。以降CSSボーダーレスプリントの問題に

：

完全に1が「ボックス」に精通する必要があり、この問題を理解するために。

ボックスモデルCSSのほぼすべての要素の振る舞い。印刷したいページは通常、ある種のタグに持つdiv要素とidまたは、このようなクラスのいずれかに包まれている。

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

我々は国境呼ばれ、黒のラインの話をされ、それは2つの兄弟 "マージン"と "パディング"です。

ほとんどの場合、そこにあるすべてのプリンタが実際にその中のマージンを報告するということは、それがサポートするすべての用紙サイズで印刷できるということです。

ここではHP 2800dtnを使用しています（しばらくの間、用紙サイズにカーソルを置くと表示されます）。

"修正"：

Safariが正しいことをやっています。そこに私はそれを言った...それはバグではない。

境界線のないプリントを作成することを明らかに拒否する理由は、実際には（実際のところは）不可能なことです。あなたはそれを行うことができますが、それを100％ズームで印刷する人は、私が説明したように、端に印刷することができないコンテンツをプリンタから取り除いてしまいます。

ほとんどの場合、デフォルトのOS Xの動作で、約98％のズームに縮小されます。次に、プリンタでボーダレスモードを有効にし、縮小された98％のズームバージョンを103％に拡大します。あなたが数学をすると、元のバージョンのおそらく101.5％の奇妙な数が得られます（私は確かに言うことはできません、それは2で割っていない場合、私は数学ではあまり良くありません:) これはありませんまさにフォントやベクトルグラフィックスの問題ですが、それはピクセル世界で大混乱です。ピクセルワールドは、私のように、デフォルトで2番の数字を好きです。残りの部分は、それを「平滑化」しています。

壊れていないので修正できません。 Safariは、divとその内側の要素の境界線を、プリンタが報告した用紙の「印刷可能領域」内に配置します。良い！

ソリューション：あなたは用紙サイズを選択 + P を指揮してまで

あなたは、プリンタマージンを知ることができません。

しかし、 "あなたが見るものはあなたが得るものです"ということをCSSで何ができますか？誰もが気に入っていると感じていますか？

1. 定義したdiv.pageに余白を使用します。マージンはそのdivを含む要素から計算されることに注意してください。だから、画面は（本物に近い）虚印刷マージンを示し、印刷GET余白なしバージョンだようactualpage

でpageは、メディアタイプごとの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 */ 
    ... 
    } 
}