running words around
design education and visual communication
authored by chris m hughes

Printliminator - CSS to customise web printing

Wednesday, 20 January 2010

In the bad old days of the web, designers spent most of their time finding workarounds to make sure that pages displayed the same in each of the main browsers.

Thankfully, a decade or so into the 21st Century, Mozilla, Opera, Safari and even Internet Explorer are all singing from the roughly the same (style)sheet.

The big headache now for designers is the proliferation of media devices and their attendant accessibility requirements. Websites now need a stylesheet for screen, print, projection, handheld, and so on, all meeting W3C standards.

Typically you create a separate stylesheet for each media option, using this simple css - {display:none;} to hide unwanted page elements in any given stylesheet.

The biggest headache is styling in this manner for the most primitive device of all - the humble printer.

A stylesheet for easy printing will normally exclude background images, ads, flash and so on. But this leaves no room for customisation of the printable content and can ruin the careful css presentation of the page.

Enter Printliminator - a bookmark tool that lets you remove any css block element section of a page - thus giving you a flexible way of choosing what content you print from a webpage.

It even lets you compile a print media stylesheet based on your selections.

The whole process is intuitive and beautifully conceived. Printliminator appears on your desktop as a small four-button console, and it highlights div tags on the webpage with a simple red border.

The console stays on top of any element on a webpage because its an absolutely positioned div with a z-index of 1000.

Now all you need to do is bookmark it, and try it out on this page - Printliminator.