Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

The Joys of Printing from the Web

Karissa Wingate

Print style sheets, should in theory, be simple. You strip out the complicated junk from your page, and format it a little better for a piece of paper. Right? Wrong. Print style sheets are a pain in the butt. They’re hard to debug, finicky depending on the browser, and downright annoying to get perfect.

1) Simpler is better.

If you can strip out all of your current styles and then add in only whats required for it to look right, do that. Don’t try to embellish or pixel-perfect things.

2) Greyscale printing is popular.

Make sure that everything you’re putting on the paper is actually worth spending ink on, and that it’s going to print legibly in greyscale.

3) Ditch the background images and colors.

They won’t print. Seriously. You can’t force the browser to do it, and there are some really bad hacks out there to kind of get around things, but just don’t. for sanity’s sake.

4) Don’t forget your sprites!

If there are sprints in the page that really need to be printed, make sure you find a way to include them that isn’t a css background.

5)  @Page

Almost a secret, it’s a pain in the butt if you’re printing to oddly shaped paper. I once spent a good long while trying to figure out why my Win8 app wouldn’t print properly to 3in wide receipt paper. Turns out I needed to override the default margins the the @Page selector sets. It’s almost like targeting the HTML element in the browser, except it uses an @ symbol prefix unlike anything else. Includes pseudo elements to target left and right sides of the paper, and the first page in a printout.

6) Page breaks can be decided by you!

Got something awkward to have printing on two sheets of paper? You can use CSS to change the way your print out flows across pages.

7) Reading distance changes.

Standard font size for a paragraph, on paper is 12pt and on the web its 16pt. Adjust accordingly.

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\