带有绝对位置的 HTML 打印

Question

是否可以将具有真正绝对定位元素的 HTML 页面打印到纸上？似乎所有浏览器都在这里搞得一团糟。通过绝对单位(例如 cm)定义主体并通过 position: absolute 将元素放置在内部很容易。然而，每个浏览器似乎都试图使打印这样的页面变得不可能。例如，FF 正在添加打印边距，即使在 Linux 上打印为 PDF 时，尽管页面设置为 0-margin。 Chrome 似乎在每种情况下都会缩小页面。那么如何打印具有绝对定位的东西，例如。纸质表格字段、标记等？我是否忽略了什么？

Answer 1

可悲的是，CSS3 Module: Paged Media允许这一切发生。这是关于页面过大的规则:

3.3.3. Rendering page boxes that do not fit a page sheet

If a page box does not match the target page sheet dimensions, the user agent MAY choose (in order of preference) to:

• Render the page box at the indicated size on a larger page sheet.
• Rotate the page box 90° if this will make the page box fit the page sheet.
• Scale the page box to fit the page sheet. (There is no requirement to maintain the aspect ratio of the page or of any elements on the page when scaling; however, preservation of the aspect ratio is preferred.) [done by Chrome]
• Reformat the page contents, including 'spilling' onto other page sheets. [done by many other or older browsers]
• Clip overflowed content (least preferred).

The user agent should consult the user before performing these operations.

3.3.4. Positioning the page box on the sheet

When the page box is smaller than the page size, the user agent should center the page box on the sheet since this will align double-sided pages and avoid accidental loss of information that is printed near the edge of the sheet.

这条规则打破了你所有的positioned东西:

3.7. Content outside the page box

[...] Also, when boxes are positioned absolutely, they MAY end up in "inconvenient" locations. For example, images MAY be placed on the edge of the page box. Similarly when boxes use fixed or relative positioning, they MAY also end up outside of the page box.

A specification for the exact formatting of such elements lies outside the scope of this document. However, we recommend that authors and user agents observe the following general principles concerning content outside the page box:

• User agents SHOULD avoid generating a large number of empty page boxes to honor the positioning of elements (e.g., you don't want to print 100 blank pages). Note, however, that generating a small number of empty page boxes MAY be necessary to honor the 'left' and 'right' values for 'page-break-before' and 'page-break-after'.
• Authors SHOULD not position elements in inconvenient locations just to avoid rendering them. Instead:
  • To suppress box generation entirely, set the 'display' property to 'none'.
  • To make a box invisible, set the 'visibility' property.
• User agents MAY handle boxes positioned outside the page box in several ways, including discarding them or creating page boxes for them at the end of the document.

请查看第 3.7 节的第二段:此类元素的确切格式规范不在本文档的范围内。由于没有其他文档和指南，因此按照本段的一般原则，每个浏览器都可以做任何它想做的事情。

这是此 CSS3 模块中当前存在的缺陷之一。但是，我认为这些缺陷无法通过 CSS4 或修订后的 CSS3 模块消除，因为可能的样式表和由此产生的布局的多样性太大而无法涵盖。还要注意一点footnote given in CSS Print Profile :

‡ The printer MAY ignore positioned elements that are placed on the page before the position of the current element in the normal flow.

所以基本上不可能在每个浏览器中创建相同的效果。目前，实现可移植文档的唯一可能方法是使用第三方应用程序或通过 PDF 打印机和您最喜欢的浏览器创建 PDF。只要 W3C 的建议不严格或浏览器供应商实现他们想要的任何东西，其他任何方法都注定会失败。

另见:

• CSS3 Module: Paged Media (工作草案，2006 年最后修订)
• CSS Print Profile (工作草案，2006 年最后修订)

附加说明

如果你有一堆需要打印的 position:absolute 元素，有时一个很好的问题是一个元素是否真的需要绝对定位，或者是否可以在一个元素中实现相同的效果略有不同或更简单的方法。另请注意，您应该在打印媒体真正不需要的每个元素上使用 display:none，例如广告、导航等...