Strategies for Debugging Print

CSSSean HannanJohns Hopkins University

Whyyyyyyyyyyyyyyyyyy?

• Print CSS can be frustrating as all get-out to get right.

• I just banged my head against a wall doing this, so I’d like it if others didn’t have to share the same fate. Ya feel me?

Open yer Toolbox

• Firebug (http://getfirebug.com/)• Web Developer (

http://chrispederick.com/work/web-developer/)

• Your browser of choice (probably Firefox or Chrome)

Here’s how ya do it.

Step Eins.

Use Web Developer to switch to the print styles.

Step Dos.

Load up your print CSS file.

Step Trois.

Turn on ‘Persist Features’. That way, you can edit CSS in your editor, save, and hit refresh in your browser, and you won’t have to go through steps one and two again. Handy, huh?

Get dem bugs.

• Now your browser will display the page somewhat like how it will when it prints out.

• I say somewhat because depending on the complexity of your site, the browser will display some things in print that shouldn’t really happen.

• To double check reality, Print Preview that sucker.

Get more of dem bugs.

• Now, it’s just a matter of using Firebug (like ya do) to identify your selectors and play with how they should look in hardcopy.

Layout/Styling Considerations

• Strip out anything interactive. You can’t click on a piece of paper. (use display: none;)

• Drop the color down to black and white (unless you’re a jerk that likes to waste ink).

• Whitespace and border: 1px solid black are your friends.

• Bump up font-size a ‘lil bit. Your clients’ eyes will thank you.

!important is muy importante

• So you’ve made some changes to the CSS, but they don’t seem to take effect. Shift+F5 does nothink.

• !important will override all style rules (even inline ones).

• Ex: div {border: 1px solid black !important;}

• Force your way to nice printouts through urgency.

:after {content} is king

• You may loose some visual distinction when you remove colors and borders. Text runs together with no break. Uh oh Spaghetti-Os.

• Identify the offending elements and see if you can’t separate them with some text.

• Ex: ul.inlinelist li:after {content: “, ”;}• A comma here, a colon there. Does

wonders.

Rewind, selector.

• One thing that can help with your layout is a reset.

• Use one of the standard CSS resets out there (like Eric Meyer’s: http://meyerweb.com/eric/tools/css/reset/)

• Or toss this little ditty at the end of your CSS file:

* { padding: 0 !important; margin: 0 !important; border: 0px !important;}

That’s it.

• Questions? Comments? Hit me up on Twitter (@MrDys).