4

When printing from Chrome, my page has extra space between lines - in the middle of a <p>!

Image of discrepancy between print emulation and print preview

The extra space is consistently at the same position on multiple pages, and approx. 80% of a line height.

I cannot debug it, since the CSS print emulation does not have this extra space. Also it prints fine in Firefox and Edge.

Seems similar to this question with no answer: Why am I getting extra line and/or paragraph spacing when printing, despite setting @media print styles?

Similar questions:

Based on these, I have tried adding disabling transitions, forcing line-height and unsetting orphans and widows:

@media print {
  * {
        -webkit-transition:none!important;
        -moz-transition:none!important;
        -ms-transition:none!important;
        -o-transition:none!important;
        transition:none!important
  }
  
  h1, p {
      orphans: unset;
      widows: unset;
      line-height: 1.15 !important;
  }
}

Any tips on how to find the root cause? Image of the print emulation HTML etc.

Here's a gif, showing many different fonts, line spacing, width, etc. All of them have this extra space at the same spot.

William Gibson
  • 71
  • 4
  • Chrome's print to PDF has sucked for over 2 years. Every time I try to convert my resume to pdf it leaves most of the first page blank and removes my image. Google doesn't care about quality these days unfortunately. We're living in a collapsing society. – B T Aug 09 '23 at 23:50

2 Answers2

0

just change the value of your line-height to less than 1 or use display:inline-block for p

mohammad
  • 106
  • 5
  • Thanks, but neither of these suggestions work. A line-height of <1 is not legible, and still the problem persists. With inline-block, the

    doesn't start until after the 'blank space', so this causes even more blank space. In both of these cases, the print emulation looks fine, but the print preview has these issues.

     – William Gibson Jun 03 '22 at 18:15
0

The issue is caused by the text div being 'relative'ly positioned position: relative; on the page.

You can't change to positioning 'absolute' either, since this breaks printing in Firefox (known bug)

Positioning the two text divs using a grid instead works in all browsers.

rensothearin
  • 670
  • 1
  • 5
  • 24
William Gibson
  • 71
  • 4