用绝对邮件打印HTML [英] HTML print with absolute postitions

问题描述

是否可以打印一个真正绝对定位的纸张元素的HTML页面？似乎所有的浏览器都在这里大乱了。用绝对单位（例如.cm）定义一个物体很容易，并且通过 position：absolute 在里面放置元素。但是，每个浏览器似乎都试图使打印这样一个页面变得不可能。 FF例如增加了打印边距，即使在Linux上打印到PDF上，尽管页边距设置为0。 Chrome似乎在任何情况下都会缩小页面。
所以如何打印绝对定位的东西，例如。纸张表格字段，标记等？
我忽略了什么？

解决方案

可悲的是， CSS3模块：分页媒体允许所有这些发生。这是关于页面太大的规则：

3.3.3。呈现不适合页面页面的页面框

如果页面框与目标页面图纸尺寸不匹配，则用户代理可以选择（按顺序
$ b

• 在更大的页面上以指定的大小呈现页面框。


• 将页面框旋转90°，如果这会使页面框适合页面页面。


• 缩放页面框以适应页面页面。 （在缩放时，不需要保持页面或页面上任何元素的纵横比;但是，优先保留纵横比。）[由Chrome完成]


• 重新设置页面内容的格式，包括溢出到其他页面上。 [/ li>]
  
• 剪辑溢出的内容（最不喜欢的内容）。

执行这些操作前，用户代理 应该 咨询用户。 /www.w3.org/TR/css3-page/#positioning-page-box\">3.3.4。在页面上定位页面框

当页面框小于页面大小时，用户代理 应 > ，将页面放在页面中央，因为这样会对齐双面页面，并避免意外丢失打印在页面边缘附近的信息。
$ b

这个规则打破了所有的位置编辑的东西：

3.7。 页面框外的内容

[...]另外，当盒子被绝对定位时，它们可能会在不方便的地方结束
。例如，图片可以放在页面框的
边上。同样，当箱子使用固定的或相对的
定位时，它们也可能最终在页面框外面。

这些元素的确切格式规范位于外部
是本文档的范围。但是，我们建议作者和
的用户代理遵守以下关于页面框外
内容的一般原则：

• 用户代理应该避免生成大量的空页面框来表示元素的定位（例如，你不希望
  打印100个空白页面）。但是，请注意，生成少量
  的空白页面框可能需要遵守'page-break-before'和'page-break-after'的'left'和'right'
  值'。


• 作者不应将元素放置在不方便的位置，以避免渲染它们。相反：
  
  
  
  • 要完全抑制框的生成，请将'display'属性设置为'none'。
    
  • 要使框不可见，设置'visibility'属性。
    
  
  
  • 用户代理可以通过多种方式处理位于页面框外部的框，包括丢弃它们或创建页面
    
  
  

查看文件末尾的
。第3.7节的第二段：这些元素的确切格式规范超出了本文档的范围。由于没有其他文档，没有其他准则，因此本节后面的一般原则是，每个浏览器可以做任何想要的事情。

这是目前在这个CSS3模块中的缺陷之一。不过，我认为这些缺陷无法通过CSS4或修订版CSS3模块删除，因为各种可能的样式表和生成的布局过于庞大。另请注意，在脚注中提供的CSS打印配置文件：

‡打印机可以忽略当前元素在正常流程中的位置之前放置在页面上的定位元素。

所以基本上不可能在每个浏览器中创建相同的效果。就目前而言，实现便携式文档的唯一可能方式是使用第三方应用程序或通过PDF打印机和您最喜欢的浏览器创建PDF。只要W3C的建议不严格或者浏览器供应商实现他们想要的任何内容，其他任何方式都将失败。

• CSS3模块：Paged媒体（工作草案，2006年修订版）
> CSS Print Profile （工作草案，2006年最新修订版）

其他备注

如果你有一堆需要打印的 position：absolute 元素，有时候元素是否需要绝对定位是一个很好的问题，或者如果以相同或稍微不同的方式实现相同的效果。另外请注意，您应该在印刷媒体不真正需要的每个元素上使用 display：none ，例如广告，导航等。

Is it possible to print a HTML page with truly absolute positioned elements to paper? It seems all browsers are doing a big mess here. It is easy to define a body by absolute units (eg. cm) and place elements by position: absolute inside. However, every browser seem to try to make it impossible to print such a page. FF for example is adding print margins, even when printing to a PDF on linux despite 0-margin page settings. Chrome seems to shrink the page in every case. So how to print something with absolute positioning, eg. paper form fields, markings etc.? Have I overlooked something?

解决方案

Sadly, the CSS3 Module: Paged Media allows all this to happen. This are the rules concerning pages which are too big:

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.

And this is the rule which breaks all your positioned stuff:

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.

Have a look at the second paragraph of section 3.7: A specification for the exact formatting of such elements lies outside the scope of this document. Since there is no other document and no other guideline then the general principle following this paragraph, every browser can do whatever it want.

It's one of the flaws that are currently in this CSS3 module. However, I think those flaws cannot be removed by a CSS4 or revised CSS3 module, as the variety of possible stylesheets and resulting layouts is too huge too cover. Also note a little 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.

So it's basically not possible to create the same effect in every browser. As for the time being, the only possible way to achieve a portable document is to create a PDF with a third-party application or via a PDF printer and your most favorite browser. Every other way is bound to fail as long as either the W3C's recommendations aren't strict or the browser vendors implement whatever they want.

See also:

• CSS3 Module: Paged Media (Working draft, last revision 2006)
• CSS Print Profile (Working draft, last revision 2006)

Additional notes

If you have a bunch of position:absolute elements which need to be printed it's sometimes a good question whether an element actually needs to be positioned absolute, or if the same effect can be achieved in a slightly different or easier way. Also note that you should use display:none on each element that isn't truly needed for the printed media, such as ads, navigations, etc...

这篇关于用绝对邮件打印HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！