Menu icon Foundation
Printing paper copies of site built on Foundation

Whenever I use a browsers 'Print' function to (you guessed it...) print a page built with Foundation, the layout always switches to the small grid and all of the elements on page change to be full width. Is there a way to change this behaviour so that the page prints more closely to how it is displayed on screen?

I've checked through the css rules of the generated app.css but I can't see any rules in the print section that would set everything to 100% width.

I'm currently using F4.3, but will be switching to F5 shortly.

Any help appreciated, thanks.

printpaperprinting

Whenever I use a browsers 'Print' function to (you guessed it...) print a page built with Foundation, the layout always switches to the small grid and all of the elements on page change to be full width. Is there a way to change this behaviour so that the page prints more closely to how it is displayed on screen?

I've checked through the css rules of the generated app.css but I can't see any rules in the print section that would set everything to 100% width.

I'm currently using F4.3, but will be switching to F5 shortly.

Any help appreciated, thanks.


Rafi Benkual gave the most helpful answer for this post
Rafi Benkual over 5 years ago

This is expected behavior.

Here is a detailed explanation that was written previously:

I noticed that all of your documented media queries specify "only screen" and was wondering why. If the print optimized rules (html5boilerplate: hiding backgrounds, shadows, window chrome, etc) are in a dedicated set of rules only for print, could print could be combined with screen (instead of screen only) for the small, medium and large to provide multi column support by default when printing? I'm hearing a lot of concern from our developers about why we can't provide multi column support for printing by just adding "print" to the default media queries rather than expecting customers to add dedicated print media queries and print classes to every element. If this is a bad idea I may need to educate them on why combining screen and print is bad.

While adding in print styles as a default may seem like a good idea, it does present some challenges. The biggest challenge is needing to keep the print-only stylesheet up to date with styles that "undo" styles that may not look good in a print-based layout. That could potentially make our print styles significantly larger and also make it more difficult for us to maintain. It's far simpler to progressively add in particular functionality to the print styles instead of enabling everything by default.

In terms of adding in support for maintaining columns when printing there is also an issue due to the multiple grid systems that may be in play. If someone has a reasonably complex layout we would need to be very specific about which grid layout to pay attention to when printing. Consider the following code snippet:


<div class="row">
  <div class="large-4 small-6 columns">
    ...
  </div>
  <div class="large-8 small-6 columns">
    ...
  </div>
</div>

When going to print this layout would be pay attention to the large or small grid? In that case it might make sense for you to simply override the default behavior for a particular grid system on print. For example you could force the large grid to be print friendly by adding in the following code to your project (note: I haven't tried battle tested this code, but hopefully it gets the idea across):
'''
// This would make the large grid function like a print grid
@media print {
@for $i from 1 through $total-columns {
.large-#{$i} {
width: gridCalc($i, $total-columns);
}
}
}
'''

BTW, the prototypes we did with Foundation 3.2 are printing multi column layouts just fine whereas the Foundation 4 prototypes force everything to single column. Is that expected?

Yes, the stacking behavior you're seeing from Foundation 3.2 and Foundation 4 is expected behavior.

Hope that clears things up!

Rafi Benkual over 5 years ago

This is expected behavior.

Here is a detailed explanation that was written previously:

I noticed that all of your documented media queries specify "only screen" and was wondering why. If the print optimized rules (html5boilerplate: hiding backgrounds, shadows, window chrome, etc) are in a dedicated set of rules only for print, could print could be combined with screen (instead of screen only) for the small, medium and large to provide multi column support by default when printing? I'm hearing a lot of concern from our developers about why we can't provide multi column support for printing by just adding "print" to the default media queries rather than expecting customers to add dedicated print media queries and print classes to every element. If this is a bad idea I may need to educate them on why combining screen and print is bad.

While adding in print styles as a default may seem like a good idea, it does present some challenges. The biggest challenge is needing to keep the print-only stylesheet up to date with styles that "undo" styles that may not look good in a print-based layout. That could potentially make our print styles significantly larger and also make it more difficult for us to maintain. It's far simpler to progressively add in particular functionality to the print styles instead of enabling everything by default.

In terms of adding in support for maintaining columns when printing there is also an issue due to the multiple grid systems that may be in play. If someone has a reasonably complex layout we would need to be very specific about which grid layout to pay attention to when printing. Consider the following code snippet:


<div class="row">
  <div class="large-4 small-6 columns">
    ...
  </div>
  <div class="large-8 small-6 columns">
    ...
  </div>
</div>

When going to print this layout would be pay attention to the large or small grid? In that case it might make sense for you to simply override the default behavior for a particular grid system on print. For example you could force the large grid to be print friendly by adding in the following code to your project (note: I haven't tried battle tested this code, but hopefully it gets the idea across):
'''
// This would make the large grid function like a print grid
@media print {
@for $i from 1 through $total-columns {
.large-#{$i} {
width: gridCalc($i, $total-columns);
}
}
}
'''

BTW, the prototypes we did with Foundation 3.2 are printing multi column layouts just fine whereas the Foundation 4 prototypes force everything to single column. Is that expected?

Yes, the stacking behavior you're seeing from Foundation 3.2 and Foundation 4 is expected behavior.

Hope that clears things up!

Bo Sjosten over 5 years ago

I can't get the above method to work, because when I try to print from the browser (chrome) to PDF, the PDF printer reports the page resolution as "small", so everything stays one column.

To try this out, try to print the Foundation Docs Visibility page, and you can see that the page is reported as small.

Any help would be appreciated.

/Bo

Vincent Morel over 4 years ago
Marnen Laibow-Koser over 4 years ago

Rafi:

I appreciate the .large-#{$i} trick as given by your developers, but it won't work quite as given for my use case. I'm not using the presentation classes, but rather just using @include grid-column(...) on my semantic classes. In a situation like this, how would I get columns to print as shown on the screen?

Marnen Laibow-Koser over 4 years ago

Hmm...do I have to change my mixins to something like this?

.sexy-class {
  @include grid-column(3);

  @media print {
    @include grid-column(3);
  }
}

Marnen Laibow-Koser over 4 years ago

Ah, it looks like the grid-column mixin alone is sufficient...once I remembered to include my stylesheet as media="all". :P

TranNetherton 7 months ago

Printing site pages is a useful feature when you are developing a site. When you are not defined with the structure or design of the site, you can print it on paper, draw your printed pages and redo the site so that it will become so good as it is possible. Paper works help with the understanding of the topic altogether. That is why teachers ask us writing papers on various topics. This page will remind you that custom term paper can be bought cheaply. Does it make sense to buy a custom term paper? Of course! These papers are perfect. And these papers will help to understand the topic of history, chemistry, or something else. The goal is the same as with the printing of the webpage of the site.