pages aren't responsive when printing

[Clijsters]

How to reproduce this bug

1. Create a multi column page (see codepen link at the end)
2. Print the page

What should happen (IMHO)

As the complete page layout is responsive, the printed page should fit to the pages width like it would do on a small/medium device.

What happened instead

The columns don't use the full page width. They lay side-by-side like on the Desktop breakpoint.

Nearly all media queries also affect print. See _breakpoint.scss:160. I think this came from #9250 and a misunderstanding of media query operators.

I'm not sure if this is really a bug or wanted behavior.

Browser(s) and Device(s) tested on

• Google Chrome 59.0.3071.86
• Mozilla Firefox 53.0.3

Foundation Version(s) you are using

6.3.1

Test case link

• CodePen
  (The code is just copied from my own use case, so don't worry about the overhead)

[kball]

Hi @Clijsters - I don't think that we have a way to know at render time the size of the pages being done for print. However, when you set up your site you can specify how you want it to render for print by specifying the $print-breakpoint... printing should then lay things out as if it were for that breakpoint.

[Clijsters]

You do'nt have to know the print width at render time; a construct like

 @media print and #{$str}, screen and #{$str} {

should also do the trick, but it seems to be a thing by design in foundation.
Thanks for clarifying.

[kball]

That's an interesting point and idea... we should consider updating print functionality. I'm not sure it makes sense to automatically support all of the breakpoints - you don't always want print to work the same as web - but perhaps allow you to specify a list of breakpoints?

[kball]

cc @anselmdk, @ncoden, and @andycochran - what do you think about making the print styling breakpoints even more flexible?

[anselmdk]

I'm pretty happy with the way printing works since we did the print refactoring. @Clijsters I usually tend to adjust page-specific styling afterwards. Maybe I'm not completely understanding your problem? Could you send a screenshot of what you're experiencing, and one of what you'd expect?

[andycochran]

This is interesting. But it won't most designers would want a their layouts to print at a specified breakpoint, not one that is device-specific? Paper is typically a specific size (e.g. A4/Letter), not fluid like screen size. Perhaps in v7 we could consider some sort of printing module that is configurable.