如何编写xhtml和css打印机友好?如何使用print css保存打印机墨水?

时间:2010-01-29 03:00:46

标签: html css xhtml printing

我不是在谈论mke print css或media=print

问题:

  • 我在谈论我们应该在XHTMl和屏幕css和打印css(其他 比印刷css中的disply:none我们 应该关心从中得到好的印刷品 网页。
  • 我们是否需要特别照顾 图像,css中的背景图像, flash,silverlight,iframe
  • 如何通过打印保存打印机墨水 CSS?

5 个答案:

答案 0 :(得分:1)

A List上有一些有用的文章除了这个主题外:Going to PrintPrinting a Book with CSS: Boom!

答案 1 :(得分:0)

不打印背景图像。这是可能的,但浏览器中的默认设置是;不要打印背景图像。

我确保图像的分辨率为150dpi。然后他们对于屏幕并不大,而且纸张也可以接受。 GIF格式不会将dpi信息存储在文件中,但您可以使用CSS为其提供可接受的大小。

较小的字体需要较少的墨水。

答案 2 :(得分:0)

从XHTML的角度来看,除了确保代码有效和语义之外,没什么可做的。

现在关于print css。您可以考虑有些人可能会用黑白打印您的页面,或者他们可能只有很少的彩色墨水(从而获得较暗的颜色)。因此,如果您有任何浅色,粉彩或文本与背景之间没有太多对比的地方,请确保在打印样式中提高对比度。 尝试以黑白打印页面,看看它的外观。

我不确定如何打印flash和silverlight这样的插件,但是你可以在print.css中为它们添加背景图像,所以如果它们至少没有打印,你可以获得闪存的快照而不是一个白洞。

对于图像,我建议Ton van Lankveld说。使它们150dpi,并确保它们在CMYK上看起来很好(你可以在Photoshop中通过转到View> Proof Colors来实现这一点。)

检查字体。有些可能需要更小,有些更大。如果您有大量文本,可能需要考虑使用更像“基于印刷”的字体,如Helvetica或Times New Roman(特别是如果您使用的是Verdana等基于屏幕的字体)。

最后为了节省墨水,我会删除任何不是绝对必要的东西(是display:none)。出于同样的原因,我会远离print.css中的背景图像。我会将所有超链接设置为黑色(或文本颜色),没有下划线,因为没有理由将它们放在打印页面中。 你也可以使用#111或#222代替#000来保存一些墨水(但它可能会影响易读性)。

答案 3 :(得分:0)

虽然我承认这不太可能是您收到的最实用的答案,但您可能需要考虑ecofont,这是一种专门用于保存打印机墨水的字体。

见评论。

答案 4 :(得分:0)

以下技术实际上使用 more 墨水,但与制作页面的打印版本相关。

假设有一个页面,其中超链接实际上对内容非常重要 - 比如,它是主题xyz的有用网站列表。不知道为什么有人会打印出来,但如果他们这样做,一堆带下划线的句子就不会有多大帮助。

您实际上可以使用CSS to print out the urls

对于后代,代码是

a:link:after, a:visited:after { content:" [" attr(href) "] "; }

我建议只使用类(例如

)对选定的链接进行此操作
a.printable:link:after, a.printable:visited:after { content:" [" attr(href) "] "; }

为了这个目的,我总是喜欢有角度的括号,所以我可能会重写它

a.printable:link:after, a.printable:visited:after { content:" <" attr(href) "> "; }

请务必记住,css中的“content:”值不允许使用实体。基本上你只需要输入你想要的原始文本。

此外,对于打印,您应该使用pt而不是pxem进行尺寸调整。您可以使尺寸小于屏幕等效尺寸。默认大小通常设置为12点,但您可以轻松地将其设置为11点并仍然保持足够的可读性。从长远来看,这将节省大量的墨水(和纸张!)。

除了内容图形(换句话说,构成页面的有意义内容的图形,而不是用于布局,美化或眼睛糖果的图形),几乎没有非文本应该成为这页纸。应该消除边框和背景,除非在极少数情况下(例如必须注意一段文字,尽管简单地设置为粗体可能同样有效,并再次节省墨水)。如果您正在使用CSS来制作看上去<hr>的内容,请在打印时完全摆脱样式并使用内置样式,或者用纯黑色或灰色线代替所有<hr>(和再次使用pt,如2pt而不是px,更改高度。

我想不出很多情况,你想要打印的iframe中有内容。如果是这种情况,那么制作页面的可打印版本非常值得,该版本将iframe的内容 out 并直接放入文档中,从而使其更适合打印。