&. |

Warning: I wrote this blog in 2021. That is a long time ago, especially on the internet. My opinions may have changed since then. Technological progress may have made this information completely obsolete. Proceed with caution.

Over the last couple of weeks I have been making some tweaks to Mini Calendar. In doing so, I decided to try printing it across a few different browsers, and saw that it prints at an inconsistent size. I was a little surprised by this because I use real-world units (centimeters) in my CSS because I’m targeting a 2D-printed artifact on good old-fashioned dead-tree paper.

I did some digging by creating a test page that basically prints a ruler in CSS in four flavors- inline divs that are 1mm wide, inline divs that are 1cm wide, table with cells that are 1mm wide, and table with cells that are 1cm wide. What I found is:

• Chrome prints correctly except when having very small table cells (i.e. the table with one-millimeter-wide cells). In this case, the cells are printed too wide.
  • Oddly, all the rulers are the same size when rendered on screen, but not when printed.
• Edge behaves exactly like Chrome. (As I would expect)
• Safari on Mac seems to consistently print everything defined in centimeters about 6% larger than it should be. So in all versions (table or div) the 15 cm wide ruler is actually just shy of 16 cm when printed
• Firefox is the only browser I tested that gets everything just right.

I went to a lot of effort analyzing this, and you can see more detailed results along with screenshots on GitHub. I may submit a ticket to Safari and Chrome, which I’m sure they will never address.

For now, my solution for Mini Calendar was to update it to generate the calendar using divs (more specifically, a modern CSS grid) instead of a table. This was long overdue, but also very frustrating. There are things that were obvious to the designers of <table> nearly 30 years ago which are still require ugly hacks to do in modern CSS. The primary example of this is the lack of anything analogous to border-collapse.

It will look pretty much as intended (which is to say, it will just barely fit on a sheet of 8.5x11 paper, and also A4 which is slightly taller) when printed from Chrome or Firefox. But Safari will make it too big and you’ll have to adjust the print settings to get it to fit on one page. Oh well.