Print style sheet implementation and refinements.

[mhulse]

Partially done. Might need to re-work media queries and approach to CSS linking to keep screen sheets separate from print.

[mhulse]

So far, going to mix this:

https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L230-L300

... and this:

http://code.google.com/p/hartija/source/browse/trunk/print.css

... and then massage from there.

[mhulse]

After seeing the results of the my current print stylesheet on the live site, I can say that the print styles are going to need some more massaging.

Patch: Using PrintFriendly on story pages and removed my first attempt at a print style sheet.

Back to drawing board.

---

Some resources:

• http://css.2040035.n2.nabble.com/Media-query-syntax-when-a-separate-style-sheet-is-included-td7581103.html
• http://coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/
• http://meiert.com/en/blog/20070221/print-style-sheets-the-basics-for-no-excuses/
• http://alisothegeek.com/2010/01/how-to-make-a-great-print-stylesheet/
• http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/
• https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L230-L300
• http://code.google.com/p/hartija/source/browse/trunk/print.css

---

Need to determine best way to handle @media print {} and @media other {} media queries. Currently, with the print styles removed, the mobile version of the site is what gets printed.

Contemplating removing all of the media screen and bits from all media queries.

I need to test how all styles (desktop styles) affect the printed product. Is it best to override those styles in the print styles, or try to start from scratch. After my last attempt, I'm going to remove the media restrictions (screen and) from the media queries and go from there (this will allow the desktop styles to get printed).

On one hand, I like the thought of starting from a clean slate (using browser defaults) for the printed page, but I just don't see how that's possible with the current "mobile-first" media query setup (the mobile styles are out in the open).

[mhulse]

If nothing else, I need to add more display: none; elements to this list:

https://github.com/registerguard/bulldog/blob/0c56c0c64a64076c3487e4539ddc8284653d20e0/build/files/css/less/print.less#L89-L96

Doing so would fix the problems Tyler was having with our story pages.

[mhulse]

Related: https://github.com/registerguard/tracker/issues/15

[mhulse]

Here's the final solution:

1. Fix all media queries so that desktop styles load when printing via the browser.
2. Implement the Printfriendly modal window button on story pages.

This solution will allow for someone to print what they "see" (as a desktop view) on any of our pages, and the Printfriendly script will allow someone to print a printer-friendly version of a story if they so choose.

:+1:

[mhulse]

Ahhh, there's a "pro" version:

http://www.printfriendly.com/pro

We should consider paying for it.

$4 monthly or $40 yearly(save 17%)

[mhulse]

Need to determine best way to handle @media print {} and @media other {} media queries. Currently, with the print styles removed, the mobile version of the site is what gets printed.

Respond.js might not work with just @media {} blocks. Need to do @media all and {}. That issue is a couple years old, so maybe the code has been updated to work without the all bit?

[mhulse]

We've bought a 1 year PrintFriendly subscription. Also, I've discovered that it's going to be next to impossible to get our current adaptive setup to print out desktop view on 8.5" x 11" page. From what I've tested, the print dimensions utilize MQ sizes and the "tablet" size (for example) prints out onto page because that's what fits. I don't think there's an elegant workaround.

I still need to change my MQs to @media all and or just @media.

For now, PrintFriendly alleviates some of the urgency in having a perfectly crafted print stylesheet asap.

[mhulse]

Closing.

92 will fix print issue and PrintFriendly gets the job done for print-optimized story pages.