如何通过 CSS 设置 Safari 打印边距以进行无边框打印

How to set Safari print margins via CSS to print borderless

提问by Willem Van Bockstal

I want to print a webpage to PDF without any margins in Safari. Page size is set to 'A4 borderless' in the print dialogue.

我想在 Safari 中将网页打印为 PDF，没有任何边距。在打印对话框中页面大小设置为“A4 无边框”。

Whatever I seem to do, Safari on OSX is adding an extra margin around my HTML. Check 'print backgrounds' to see what I mean.

无论我做什么，OSX 上的 Safari 都会在我的 HTML 周围添加额外的边距。检查“打印背景”以了解我的意思。

Clearly the @page-rule has no effect for Safari, but are there any other ways?

显然@page-rule 对 Safari 没有影响，但还有其他方法吗？

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

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

?

?

采纳答案by Flavien Volken

There is 3 things to take in consideration:

有3件事需要考虑：

1. The margin of the page's rule, unfortunately

   @page {
   margin: 0cm !important;
   }
   

   Has no effect on Safari 6, where it does in Chrome 23. As I know, as long as Safari is not supporting this, there is no solution (it seems to be fixed to around 10mm).

2. The page setting as seen hereyou might have to define a custom "Paper Size" in the "Print…" menu panel without any margin (you did it already btw).

3. Obviously to take care of the other inner content html, body… not to have any margin.

1. 页面规则的边距，不幸的是

   @page {
   margin: 0cm !important;
   }
   

   对 Safari 6 没有影响，它在 Chrome 23 中没有影响。据我所知，只要 Safari 不支持这一点，就没有解决方案（它似乎固定在 10 毫米左右）。

2. 页面设置所看到这里，你可能会在“打印...”菜单面板，来定义“纸张大小”没有任何余量（你做的已经BTW）。

3. 显然要照顾其他内部内容 html、body... 没有任何边距。

回答by unom

The selected answer isn't quite right. To correctly answer the question you need to understand the problem first.

选择的答案不太正确。要正确回答问题，您需要先了解问题。

Borderless printing and printers:

无边距打印和打印机：

Very few printers can "actually" print borderless prints even if they say they do. Most just enlarge the print a bit so it stretches beyond the actual page and, usually, give you a slider to adjust that amount. The reason is that most printer don't have a sensor to determine where the paper actually is, it presumes paper is there and for most prints it doesn't matter if it's 0,5mm off or even 1mm.

很少有打印机可以“实际”打印无边框打印件，即使他们说可以。大多数只是将打印件放大一点，使其超出实际页面，并且通常会为您提供一个滑块来调整该数量。原因是大多数打印机没有传感器来确定纸张的实际位置，它假定纸张在那里，对于大多数打印件，它是 0.5 毫米还是 1 毫米都无关紧要。

For borderless it matters because the print comes out with a white (paper) border around it.

对于无边界，这很重要，因为打印出来的周围有白色（纸）边界。

For this reason 95% of printers out there mimic this "borderless" print by actually running ink into thin air for a little bit just so the paper is covered all the way to the edge. Printing into thin air is bad, can cause smudges in the long term and should be avoided, so the amount of printing over the edge must be adjusted to a minimum.

出于这个原因，95% 的打印机模仿这种“无边界”打印，实际上是将墨水注入稀薄的空气中，让纸张一直覆盖到边缘。打印到稀薄空气中是不好的，从长远来看会导致污迹，应避免，因此必须将边缘打印量调整到最低限度。

Good large format printers have a sensor to detect paper width but it's used to adjust the paper slightly because the length, 50 to 150m per roll, can cause even a 0,1mm misalignment to become a problem and cause paper jams.

好的大幅面打印机有一个传感器来检测纸张宽度，但它用于稍微调整纸张，因为每卷 50 到 150m 的长度会导致甚至 0.1 毫米的错位成为问题并导致卡纸。

To fix this problem entirely, "bleed" is used, where you actually design everything to a slightly larger paper which is cut to size afterwards.

为了完全解决这个问题，使用了“出血”，你实际上将所有东西设计成一张稍大的纸，然后再剪成合适的尺寸。

Ok... now you know.

好吧……现在你知道了。

Onwards to the problem of CSS borderless prints:

关于 CSS 无边框打印的问题：

To fully understand this problem one must be acquainted with the "Box".

要完全理解这个问题，必须熟悉“盒子”。

The Box models the behaviour of almost every element in CSS. The page you want to print is usually wrapped in a tag of some sort, either a div with and id or a class like this:

Box 为 CSS 中几乎每个元素的行为建模。您要打印的页面通常包含在某种标签中，要么是带有 id 的 div，要么是这样的类：

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

We will be talking about the black line, called the border, and it's two siblings "margin" and "padding".

我们将讨论黑线，称为border，它是两个兄弟“margin”和“padding”。

Unbeknownst to most is the fact that every printer out there actually reports the margins within it can print for every paper size it supports.

大多数人不知道的事实是，每台打印机实际上都报告了它可以为它支持的每种纸张尺寸打印的边距。

Here is an HP 2800dtn doing so (just hover over the paper size for a while and it will appear).

这是一个 HP 2800dtn 这样做（只需将鼠标悬停在纸张尺寸上一会儿，它就会出现）。

The "fix":

“修复”：

Safari is doing the right thing. There I said it... it's not a bug.

Safari 正在做正确的事情。我说过了……这不是错误。

The reason it apparently refuses to produce borderless prints is that it's actually not possible (in the real world). You can do it, but people printing it at 100% zoom will have the content trimmed off by the printer, which, as I've described, can't print to the edge.

它显然拒绝生产无边界印刷品的原因是它实际上是不可能的（在现实世界中）。你可以做到，但是人们以 100% 的缩放比例打印它会被打印机修剪掉内容，正如我所描述的那样，它无法打印到边缘。

So most will have to "fit to paper" margins (the default OS X behaviour, minified to around 98% zoom) then enable borderless mode on the printer which in turn magnifies the minified 98% zoom version to 103%. If you do the math you get a weird number of probably 101.5% of the original version (I can't say for sure, I'm not very good at math if it isn't divided by two :) This isn't exactly a problem for fonts and vector graphics, but it wreaks havoc in the pixel world. The pixel world likes, just like I do, the number 2 by default, the rest is just "smoothing" it over.

所以大多数将不得不“适应纸张”边距（默认的 OS X 行为，缩小到 98% 左右的缩放）然后在打印机上启用无边界模式，这反过来又将缩小的 98% 缩放版本放大到 103%。如果你做数学运算，你会得到一个奇怪的数字，可能是原始版本的 101.5%（我不能肯定地说，如果它不除以二，我就不擅长数学:) 这不完全是字体和矢量图形的一个问题，但它在像素世界中造成了严重破坏。像素世界喜欢，就像我一样，默认数字 2，其余的只是“平滑”它。

So you can't fix it, because it isn't broken. Safari puts the border of the div and all its inner elements inside the "printable area" of the paper as reported by the printer. Good!

所以你无法修复它，因为它没有损坏。Safari 将 div 的边框及其所有内部元素放置在打印机报告的纸张“可打印区域”内。好的！

The solution:

解决方案：

You can't know the printer margins until you command+p andselect a paper size.

在您使用 command+p并选择纸张尺寸之前，您无法知道打印机边距。

But what can you do in CSS to get that "what you see is what you get" feeling everyone likes?

但是你可以在 CSS 中做些什么来获得每个人都喜欢的“所见即所得”的感觉？

1. Use the margin on the div.page you defined. Note that margin is calculated form the the element containing that div. So you need to wrap the pagein the actualpage

1. 使用您定义的 div.page 上的边距。请注意，边距是从包含该 div 的元素中计算出来的。所以，你需要换行page的actualpage

Define CSS per media type so that the screen shows imaginary print margins (close to the real thing) and the print get's a version without margins.

为每个媒体类型定义 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 */
  ...
  }
}

If you can't wrap the page into another div you can hack it (ie: less elegant solution) with padding.

如果您无法将页面包装到另一个 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 */
  ...
  }
}