Bootstrap 3 vs Bootstrap 4 and Save as PDF on ChromeThursday, April 30th, 2020

Articles, CSS, Quick Tips

The bootstrap frameworks are a great way to build a responsive website with lots of features at your finger tips. However when it came to printing – especially the “Save as PDF” using the Chrome browser for both Windows and Mac – at the time of this article (Chrome version 81.0.4044.129) we noticed there is a discrepancy when printing between Bootstrap 3 and Bootstrap 4.

When printing / saving as PDF of a Bootstrap 3 page on Chrome the print preview dialogue looks as follows:

Bootstrap3 print as pdf

Notice the Scale option is available. Now for many this may not even be a problem but for our use case we required the scale option to be able to print the page to a certain size and across a finite number of pages.

The same Print preview screen when printing / saving as PDF of a Bootstrap 4 page shows the following:

Bootstrap4 print as pdf

Here we are missing a number of options that were previously available.

  1. Layout
  2. Paper Size
  3. Scale – this is the one we are interested in.

It goes without saying that when you are creating web pages intended to be printed, it is essential to use a print stylesheet to ensure font sizes, images and other elements appear as necessary. A great article for this process can be found over at Sitepoint – CSS Printer Friendly Pages.

In addition to adding a custom print stylesheet, consider adding the following snippet to enable the missing options in the print dialogue:

@page {
    size: auto;
}

Bootstrap4 print as pdf - page style

The Scale option is now available, however the layout of the website has changed hence the print stylesheet is important to ensure you get the desired output.

What is the @page rule?

The @page CSS at-rule is used to modify some CSS properties when printing a document. You can’t change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

size Specifies the target size and orientation of the page box’s containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.

Read more about the @page rules and attributes on the MDN Web docs.

It’s a small tip but hopefully it helps someone out there. Feel free to add any comments of your findings or alternative recommendations below.

Like it? Share it!

Tagged with:




Leave a Comment

You can use these HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>