Grid stacks when printing in IE 11 or Chrome 34 #12078

Closed
iversoncreative opened this Issue Jan 3, 2014 · 21 comments

Projects

None yet

6 participants

@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
Member
cvrebert commented Jan 3, 2014

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:
shot
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
Member
cvrebert commented Jan 3, 2014

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
Member
cvrebert commented Jan 5, 2014

With regard to international ISO standard paper sizes:

  • A4 page width = 21cm
@gordanj
gordanj commented Jan 5, 2014

Can anything be done to avoid the stacking?

@cvrebert
Member
cvrebert commented Jan 5, 2014

@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
gordanj commented Jan 6, 2014

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
Member
mdo commented Jan 13, 2014

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

@cvrebert
Member

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
Member

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
Member

Environment:

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
Member
@mdo
Member
mdo commented Jan 22, 2014

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

@cvrebert
Member

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

@mdo
Member
mdo commented Jan 22, 2014

My man.

@cvrebert cvrebert added a commit that referenced this issue Jan 22, 2014
@cvrebert cvrebert add docs note to address #12078 8d3f814
@cvrebert cvrebert added a commit that referenced this issue Jan 23, 2014
@cvrebert cvrebert add docs note to address #12078 6d08763
@mdo
Member
mdo commented Jan 23, 2014

Addressed in #12345.

@mdo mdo closed this Jan 23, 2014
@Shane32
Shane32 commented Apr 25, 2014

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

@mdo mdo locked and limited conversation to collaborators Aug 23, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.