Mozilla Firefox / Google Chrome / Chromium + Bootstrap - Cannot print in portrait or landscape

I wanted to make a PDF of a web page and I wanted to print it in landscape mode.

But when I opened the web browser printing dialog using Ctrl+P, there were no Orientation section available - I was forced to print in portrait mode according to the dialog. Unacceptable, I started to investigate the reason.

By remove piece by piece from the page in the inspector in the developer tools (F12) in Firefox I found the reason.


Bootstrap 4.3.1 - Forces users to print A3


The reason for this turned out to be a very restrictive CSS setting in Bootstrap 4.3.1. For some unknown reason Bootstrap 4.3.1 assumes you want to print every page in the A3 paper format and the browsers comply with this without allowing the user to override it. Shameful.

Source: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css

At the bottom there is a @media print section containing a @page: a3; declaration:

@media print {
  @page {
    size: a3;
  }
}


Solution 1 - Use the system printing dialog

If the web browser allows it you may click through the web browser printing dialog and go to the system printing dialog, that did in Debian 11 MATE have the classic orientation setting.

The downside with this is that it may not be handled by the browser so you may get a different file or print that what you would have got by using the web browser dialog.


Solution 2 - Remove the size CSS setting from the page locally, then print


Firefox:
If you open the developer tools (F12) you may find that the usual inspector tools does not show the media queries (@media). I found that they instead were listed under the Style editor {}.

1. Open the developer tools (F12)
2. Click Style editor {}
3. Click on the cog in the left panel listing the files located in the top right corner
4. Uncheck all but Show @media page fields
5. Find bootstrap.min.css in the left panel and click on it
6. Click somewhere in the code in the right panel
7. Press Ctrl+F
8. Search for @page
9. Edit the size: a3; by clicking on a3 and then delete it, followed by Enter

You may have to repeat step 5-9 for other files in the list because there can be more than one @page section with malicious size declarations.

This is a personal note. Last updated: 2022-01-06 17:31:51.



LinkedIn
Klebe.se

Don't forget to pay my friend a visit too. Joakim