From 20765b50258e6d28071ec5da26067294f2714d9e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 3 Jan 2018 16:01:03 -0800 Subject: [PATCH] Print tweaks (#25164) * 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. * Don't underline buttons when printing * Add basic print styles for page and body size to create a semi-consistent print experience across browsers --- scss/_print.scss | 20 +++++++++++++++++--- scss/_variables.scss | 5 +++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/scss/_print.scss b/scss/_print.scss index 6505d3e947..5e2ce3a8aa 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 @@ -82,6 +83,19 @@ // Bootstrap specific changes start + // 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 !important; + } + .container { + min-width: $print-body-min-width !important; + } + // Bootstrap components .navbar { display: none; diff --git a/scss/_variables.scss b/scss/_variables.scss index 2438c115e7..31149a5e49 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -882,3 +882,8 @@ $kbd-bg: $gray-900 !default; $pre-color: $gray-900 !default; $pre-scrollable-max-height: 340px !default; + + +// Printing +$print-page-size: a3 !default; +$print-body-min-width: map-get($grid-breakpoints, "lg") !default;