Web printing issues
More times then not when I try to web print an article with multiple pages I am missing a page. For instance, the link I have below should be 5 pages. The print window only shows 4 pages and only prints the 4 pages. I have no problem printing the 5 pages in MS Edge. My OS in W10 Home 64bit.
Gekose oplossing
Hi hws52, Firefox has some print bugs with different style rules. Blocks of content with those rules work fine on screen, but they are not "paginated" correctly. I suspect that is coming into play here.
When I view the page in Preview, I see several problems:
(1) The content starts at the top of the second page and runs off the bottom of that page. This is the "unable to paginate" problem, and the question is whether there is an easy fix. Sometimes yes, often it's not easy.
(2) The fixed position header bar overlays the top of every page, covering the text there.
Investigating #1, it is caused by setting the main content section to have a display style of inline-block which Firefox tries to keep together as an unbreakable unit.
If this page was important enough, you could invest some time to tweak its style rules. But if it prints easily in another browser, that definitely is faster.
As a demonstration, this script will knock out problems #1 and #2 so the page prints with all of its content. That doesn't mean it's pretty; the page obviously wasn't optimized for printing. Here's how to try it:
Open Firefox's Web Console in the lower part of the tab using either:
- "3-bar" menu button > Web Developer > Web Console
- (menu bar) Tools > Web Developer > Web Console
- (Windows) Ctrl+Shift+k
Then paste the following code in the line next to the caret (») -- it will expand to allow multiple lines:
var r = '@media print { ' +
'div.block-container {display:block !important} ' +
'header.main-navigation > nav {position:static !important} ' +
'}';
var s = document.createElement('style');
s.appendChild(document.createTextNode(r));
document.body.appendChild(s);
Press Enter to submit/run it. Your first time, Firefox should warn you not to run code from strangers and have you take steps to demonstrate that you understand. After satisfying Firefox that you know it's risky, you can run the script.
Then when you preview, all the content should be displayed.
Hopefully someday Firefox will do all that automatically since web designers do not seem to care.
Lees dié antwoord in konteks 👍 0All Replies (2)
Alot depends on how they format the page. Some are formatted to be printed better in different browsers as oppose to others.
Gekose oplossing
Hi hws52, Firefox has some print bugs with different style rules. Blocks of content with those rules work fine on screen, but they are not "paginated" correctly. I suspect that is coming into play here.
When I view the page in Preview, I see several problems:
(1) The content starts at the top of the second page and runs off the bottom of that page. This is the "unable to paginate" problem, and the question is whether there is an easy fix. Sometimes yes, often it's not easy.
(2) The fixed position header bar overlays the top of every page, covering the text there.
Investigating #1, it is caused by setting the main content section to have a display style of inline-block which Firefox tries to keep together as an unbreakable unit.
If this page was important enough, you could invest some time to tweak its style rules. But if it prints easily in another browser, that definitely is faster.
As a demonstration, this script will knock out problems #1 and #2 so the page prints with all of its content. That doesn't mean it's pretty; the page obviously wasn't optimized for printing. Here's how to try it:
Open Firefox's Web Console in the lower part of the tab using either:
- "3-bar" menu button > Web Developer > Web Console
- (menu bar) Tools > Web Developer > Web Console
- (Windows) Ctrl+Shift+k
Then paste the following code in the line next to the caret (») -- it will expand to allow multiple lines:
var r = '@media print { ' +
'div.block-container {display:block !important} ' +
'header.main-navigation > nav {position:static !important} ' +
'}';
var s = document.createElement('style');
s.appendChild(document.createTextNode(r));
document.body.appendChild(s);
Press Enter to submit/run it. Your first time, Firefox should warn you not to run code from strangers and have you take steps to demonstrate that you understand. After satisfying Firefox that you know it's risky, you can run the script.
Then when you preview, all the content should be displayed.
Hopefully someday Firefox will do all that automatically since web designers do not seem to care.