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

diff --git a/scss/_print.scss b/scss/_print.scss
index 6505d3e947de74111405dd2e0865e9e9660fd88e..5e2ce3a8aafc9091040092d96d2b891291c611ef 100644 (file)
--- 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 2438c115e73a6af27cf80625b4a939881ff52026..31149a5e496c404a0db81d60103b8208eed7a978 100644 (file)
--- 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;