demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Force Accurate Colors When Printing Web Pages

css / print

Estimated reading time: 1 minute, 56 seconds

Modern browsers alter colors when printing web pages, which is entirely reasonable: few people wish to sacrifice an entire toner cartridge to a web page’s black background. But this behavior can be problematic: browser print routines will also remove background images, gradients, shadows and other effects, which can be important in the presentation of certain pages, such as portfolios.

Firefox has the Print Background Colors option in its Print dialog, which remains under the exclusive control of the user. Chrome and Safari will follow a particular CSS property to force accurate colors on elements when printing:

* { -webkit-print-color-adjust: exact; }

While you can apply -webkit-print-color-adjust  to any selector at all, the property will not work on the body background (again, saving that toner cartridge). However, it will work on child elements. You can see a simple example below:

Web page on screen Page printed on a monochrome printer, no special treatment Page printed on a color printer with webkit-print-color-adjust

I would recommend erring on the side of caution when using the -webkit-print-color-adjust  property: a reasonable assumption is to only use it for portfolio pages sent to a color printer, or other exceptions.  This behavior can be specified with an embedded @media query on appropriate pages:

<link rel=stylesheet href=styles.css>
<style>
@media print and (color) {
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
     /* presentation rules for the page on color printers */
}
</style>

Another media query within the central linked style sheet (styles.css) should cover all other print options:

/* main styles.css presentational rules */
@media print and (monochrome) {
       /* presentation rules for black-and-white printers, not concerned with color accuracy */
}

The embedded @media query will also work with the Print To PDF option for those without printers, generating an accurate digital copy of the portfolio page. (I’d suggest providing a PDF version of the portfolio as a download option also: you can use the same print routine to generate it, or a tool like Prince).

There are two possible improvements to this approach:

  • It would be helpful to warn those with color printers that printing a portfolio page may consume more ink;
  • For the highest print quality, we should deliver high-DPI Retina images to the printer.

Both of these possibilities will be addressed in future articles.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.