New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
6 participants
@iversoncreative

iversoncreative commented Jan 3, 2014

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 3, 2014

Member

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).

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 3, 2014

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 5, 2014

Member

With regard to international ISO standard paper sizes:

  • A4 page width = 21cm
Member

cvrebert commented Jan 5, 2014

With regard to international ISO standard paper sizes:

  • A4 page width = 21cm
@gordanj

This comment has been minimized.

Show comment
Hide comment
@gordanj

gordanj Jan 5, 2014

Can anything be done to avoid the stacking?

gordanj commented Jan 5, 2014

Can anything be done to avoid the stacking?

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 5, 2014

Member

@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
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

This comment has been minimized.

Show comment
Hide comment
@iversoncreative

iversoncreative Jan 6, 2014

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.

iversoncreative commented Jan 6, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gordanj

gordanj 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;
}

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

This comment has been minimized.

Show comment
Hide comment
@iversoncreative

iversoncreative Jan 10, 2014

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

iversoncreative commented Jan 10, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jan 13, 2014

Member

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

Member

mdo commented Jan 13, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 13, 2014

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.

Member

cvrebert commented Jan 13, 2014

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

This comment has been minimized.

Show comment
Hide comment
@iversoncreative

iversoncreative Jan 21, 2014

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

iversoncreative commented Jan 21, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 22, 2014

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.

Member

cvrebert commented Jan 22, 2014

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 22, 2014

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
Member

cvrebert commented Jan 22, 2014

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert
Member

cvrebert commented Jan 22, 2014

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jan 22, 2014

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 22, 2014

Member

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

Member

cvrebert commented Jan 22, 2014

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jan 22, 2014

Member

My man.

Member

mdo commented Jan 22, 2014

My man.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jan 23, 2014

Member

Addressed in #12345.

Member

mdo commented Jan 23, 2014

Addressed in #12345.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert
Member

cvrebert commented Apr 15, 2014

@Shane32

This comment has been minimized.

Show comment
Hide comment
@Shane32

Shane32 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;
  }
}

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

This comment has been minimized.

Show comment
Hide comment
@mejackreed

mejackreed Aug 14, 2014

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

mejackreed commented Aug 14, 2014

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

@twbs twbs 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.