Skip to content
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

Print tweaks #25164

Merged
merged 3 commits into from Jan 4, 2018
Merged

Print tweaks #25164

merged 3 commits into from Jan 4, 2018

Conversation

mdo
Copy link
Member

@mdo mdo commented Jan 2, 2018

Adds two new variables for printing—page size and min-width for the <body> and .container. Using the docs homepage as my example, this printed the most similar in macOS Chrome and Safari. I'll check in on Windows browsers before merging.

While working on this, a few things came to light:

  • Safari doesn't respect @page's size, hence the min-widths.
  • Chrome is super finicky with @page. Adding margin or !important broke the size property.

I'm expecting even more issues across other browsers as I get into them.

Hopefully fixes #23864 and fixes #23992.

/cc @tigermarques @michaelkrieger

This should address some inconsistencies between browsers when printing. It applies a min-width to the body so that the content better resembles what your might see on your screen. I've made it a variable for easy customizing, too.
@mdo mdo added this to Inbox in v4.0 stable via automation Jan 2, 2018
@mdo mdo moved this from Inbox to Needs review in v4.0 stable Jan 2, 2018
@jgsmarques
Copy link

Hi,

Great news! You mention that this should make Chrome and Safari look similar. The problem I had was with Chrome vs IE. Is it likely that this issue will be fixed too?

Thank you!

@mdo
Copy link
Member Author

mdo commented Jan 3, 2018

Just verified this improves things in IE11 and Edge. It's not 100%, but it's an improvement for sure.

@mdo mdo merged commit 20765b5 into v4-dev Jan 4, 2018
v4.0 stable automation moved this from Needs review to Shipped Jan 4, 2018
@mdo mdo deleted the print-tweak branch January 4, 2018 00:01
@mdo mdo mentioned this pull request Jan 4, 2018
@nafg
Copy link

nafg commented Mar 13, 2018

This broke my invoice page

@nafg
Copy link

nafg commented Mar 13, 2018

To clarify, it's supposed to be a smaller paper, so I had width: 5.5in on the .container. Now it gets disregarded because of the min-width.

@browner12
Copy link
Contributor

I'll add here that this caused Chrome's print dialog to remove the "Orientation" option for me.

@coorasse
Copy link
Contributor

coorasse commented May 9, 2019

Chrome margins are wrong. why is this set to a3 and not auto by default? I really appreciate to have this variable now, but the default should simply be auto. we fix IE and break Chrome? 😕

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v4.0 stable
  
Shipped
Development

Successfully merging this pull request may close these issues.

None yet

5 participants