Chrome Print Styles – vertical space weirdness bugs

I recently worked on a fairly elaborate print stylesheet. Printing from the chrome browser had some patches of vertical white space not seen with other browsers. The way I tested (from a mac, windows is almost the same) was to

  • go to web page
  • top menu > print
  • either print (without changing defaults)
  • or PDF > save as PDF – I found that actually printing and saving as PDF following this method yielded identical pages. I only tested on one printer.)

This post had some suggestions that helped.

The things that helped the most were

Remove (display: none) :before and :afters. These showed up when printing from Chrome but not from other browsers. These pseudo elements (:before, ::before, :after, ::after) were taking up space. These are often used in popular frameworks such as bootstrap for clearfixes.

The other advice that helped a lot was to look at other media queries. I was looking at my browser window at normal width but the print styles were using extra small screen size rules. Other browsers were not printing with extra small screen rules. Once I made my browser skinny I could see where many of the problems were. By the way, chrome and other browsers’ developer tools have settings for inspecting for print styles.

The Box

The Box, a short story by Zoe Swenson (who is my cousin), pulls you along until the somewhat surprise ending. I say somewhat, because the ending is foreshadowed and the whole story leads to it, but in a subtle, slightly eerie way. When you get to the end it makes perfect sense but you weren’t expecting it.

The Box catches emotions and is exquisitely crafted. in I highly recommend reading it!