Grid stacks when printing in IE 11 or Chrome 34

[iversoncreative]

When printing in Safari 7 and Firefox 25 the grid carries over to the print style, but in Chrome 34 and IE 11 everything stacks when printed. Any insights here?

[cvrebert]

I think it's just that the browser actually considers the paper page (after accounting for margins) to be less than 768px wide, thus our extra-small / mobile grid styles apply, hence the stacking.
Here's a PDF printout (US Letter page size) of the Bootstrap docs in Chrome 31 (latest stable) on OS X, with some specifically-sized divs added:

Notice how the right edge of the 768px-wide box goes beyond the page margin implied by the <table> and <pre> borders (also roughly indicated by the red box I added in Preview.app to aid comparison).

[cvrebert]

Although, running the unit conversions and other math:

• Non-mobile grid minimum viewport width = 768px / (96 px/inch) = 8 inches * (2.54 cm/inch) = 20.32 cm
• Horizontal print page margin = 0.5 cm
• US Letter horizontal width = 8.5 inches * (2.54 cm/inch) = 21.59 cm
• Horizontal area of US Letter page within horizontal margins = 21.59 cm - (2 * 0.5 cm) = 20.59 cm
• 20.32 cm < 20.59 cm
  • delta = 2.7mm = 0.27 cm / (2.54 cm/inch) ≈ 0.10629 inches * (96 px/inch) ≈ 10.2px

So theoretically it seems like it should use the Small (non-stacked) grid, but I'm probably missing something that's eating those last 10px. At any rate, it's pretty close.

[cvrebert]

With regard to international ISO standard paper sizes:

• A4 page width = 21cm

[gordanj]

Can anything be done to avoid the stacking?

[cvrebert]

@gordanj Either:

• Use the XS/extra-small grid (which never wraps); or
• Make the SM/small grid's minimum viewport width smaller (possibly only for print media via appropriate Media Queries) so that un-stacking is activated in this circumstance

[iversoncreative]

Thanks, @cvrebert! I appreciate your attention to this.

Using the XS/extra-small grid seems like a bad idea, though. A printed page is an inherently different size and format than a small viewport.

I like the idea of changing the media query only for the print styles to be a smaller breakpoint.

If anyone gets a working version of that approach please share it.

I'll try to explore it myself as well, but the Bootstrap Customizer wasn't working for me this morning.

[gordanj]

I found the following section and changed it from 768px to 585px which is the highest it could be before it stacks. If someone has a better suggestion, please share.

@media (min-width: 768px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
}

CHANGE TO:

@media (min-width: 585px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
}

[iversoncreative]

How does one correctly combine media queries? Targeting only print and changing the small grid viewport breakpoint? I cannot seem to get it working.

[mdo]

Are we expecting a bug fix for something here, something added to the docs, or something else?

[cvrebert]

Regardless of whether a browser bug/quirk is causing US Letter paper to seems XS-sized, we're still "broken" with respect to A4 paper (which is narrower and thus unambiguously XS).

IMHO, the proper fix would seem to be to adjust the screen size breakpoints such that the within-margins portion of a sheet of A4 paper is considered larger than XS, (i.e. non-mobile / non-stacking). This would match the intuition that a typical sheet of printer paper should be larger than a mobile device.

Since that's backward-incompatible and thus would have to wait for v4, we should probably document this pitfall for now. Though it would still be nice to figure out why we're not fitting on US Letter even though the math says we should.

[iversoncreative]

#12250 Adjusting page margins in the print media query didn't do much for me in this case.

[cvrebert]

My revised conclusion after testing a bit more is that this could get complicated enough that we may want to deem this as being outside the scope of the project.

[cvrebert]

Environment:

• Mac OS X 10.7.5
• Chrome 32.0.1700.77
• Firefox 26.0
• US Letter paper size
• "printed" to PDF
• Bootstrap 7938134 with the print media margins portion of the CSS removed
• Webpage: https://gist.github.com/cvrebert/8553225

Investigation results:

• Chrome, using Chrome's own print dialog, (no scale setting available), "Margins: None"
  • Reported viewport width: [610px, 615px) / [6.3in, 6.4in)
  • PDF was edge-to-edge; no margins
• Chrome, "Print using system dialog", "Scale: 100%", (no margin settings available)
  • Reported viewport width: [555px, 560px) / [5.8in, 5.9in)
  • PDF had seemingly-uniform (1cm?) margin on all sides
• Firefox, unchecked the "Ignore Scaling and Shrink To Fit Page Width" option, (no other scale-related settings available), (no margin settings available)
  • Reported viewport width >=770px / >= 8.5in
  • PDF had seemingly-uniform margin on all sides
  • PDF's margin was larger than Chrome's

[cvrebert]

Possibly relevant Chromium issue: https://code.google.com/p/chromium/issues/detail?id=273306

[mdo]

Yeah printing is a pile of problems. I'd say we punt on trying to do anything for this.

[cvrebert]

Sounds good. I'll add a note to the docs.

[mdo]

My man.

[mdo]

Addressed in #12345.

[cvrebert]

X-Ref: foundation/foundation-sites#3010

[Shane32]

IE 9+ actually works very nicely. Simply use the @page min-width to force IE's default "scale to fit" mode to scale the printed output down a little so it fits on the page. And the user can scale it smaller and/or switch to landscape mode in the preview window to produce a MD or LG format as well. Unfortunately it doesn't help Chrome. Here's my CSS, which also forces the container to fill the width of the paper:

@page {
  min-width: 768px;
}
@media print {
  body {
    margin: 0;
    padding 0 !important;
    min-width: 768px;
  }
  .container {
    width: auto;
    min-width: 750px;
  }
}

[mejackreed]

I just wanted to share our solution here (using bootstrap-sass). Modifying the print specific breakpoints was not working so we used this workaround.

Within our print specific stylesheets where we wanted elements to not stack (media=print), we selected these elements and extended the relevant xs class. This provided the functionality we were looking for.

Within our print.css.scss rendering

selector .col-md-4 {
  @extend .col-xs-4;
}
selector .col-md-8 {
  @extend .col-xs-8;
}

Feel free to checkout the pr here:
sul-dlss/SearchWorks#729