From d12a61f8ee0cde00576b0fbaa12bccd76de7111f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Dec 2017 22:55:04 -0800 Subject: [PATCH 1/3] Add min-width to body when printing 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. --- scss/_print.scss | 5 +++++ scss/_variables.scss | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/scss/_print.scss b/scss/_print.scss index 6505d3e947de..03ec0bb406c3 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -82,6 +82,11 @@ // Bootstrap specific changes start + // Specify a min-width to make printing more consistent across browsers + body { + min-width: $print-body-min-width; + } + // Bootstrap components .navbar { display: none; diff --git a/scss/_variables.scss b/scss/_variables.scss index 1d4f44b96c21..951c918d3657 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -880,3 +880,7 @@ $kbd-bg: $gray-900 !default; $pre-color: $gray-900 !default; $pre-scrollable-max-height: 340px !default; + + +// Printing +$print-body-min-width: map-get($grid-breakpoints, "lg") !default; From 4e9fb0698bcb8d8017a2835124c932431cf332fd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Jan 2018 19:47:43 -0800 Subject: [PATCH 2/3] Don't underline buttons when printing --- scss/_print.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/scss/_print.scss b/scss/_print.scss index 03ec0bb406c3..05bfd6ea8259 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -20,9 +20,10 @@ box-shadow: none !important; } - a, - a:visited { - text-decoration: underline; + a { + &:not(.btn) { + text-decoration: underline; + } } // Bootstrap specific; comment the following selector out From 9fa23d33d8e76a69545c9db9e67107a48f68d28d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Jan 2018 20:02:07 -0800 Subject: [PATCH 3/3] Add basic print styles for page and body size to create a semi-consistent print experience across browsers --- scss/_print.scss | 12 ++++++++++-- scss/_variables.scss | 1 + 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/scss/_print.scss b/scss/_print.scss index 05bfd6ea8259..5e2ce3a8aafc 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -83,9 +83,17 @@ // Bootstrap specific changes start - // Specify a min-width to make printing more consistent across browsers + // Specify a size and min-width to make printing closer across browsers. + // We don't set margin here because it breaks `size` in Chrome. We also + // don't use `!important` on `size` as it breaks in Chrome. + @page { + size: $print-page-size; + } body { - min-width: $print-body-min-width; + min-width: $print-body-min-width !important; + } + .container { + min-width: $print-body-min-width !important; } // Bootstrap components diff --git a/scss/_variables.scss b/scss/_variables.scss index 951c918d3657..9472a67275bf 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -883,4 +883,5 @@ $pre-scrollable-max-height: 340px !default; // Printing +$print-page-size: a3 !default; $print-body-min-width: map-get($grid-breakpoints, "lg") !default;