Make your website more printable with @print CSS

I just added some CSS rules to my Hugo theme to make my blog more printable. Why and how does this work?

Have you ever tried to print out your website? This often does not look optimal. Because even elements that are not very useful on a printout (menus etc.) are printed. Firefox allows to display the print view in the inspector (Ctrl + Shift + C) and of course there is also a print preview in most browsers.

Since I also offer a dark mode on my blog (when the user has set his system to dark), I have to make sure that the printout is displayed as in light mode. Firefox automatically did this correctly, but with Chromium this was not the case. Also, the print CSS uses font-family as serif, as I read at some point that fonts with serifs are easier to read on paper. Last but not least, some elements (such as the post-actions for reading aloud, sharing, etc.) are hidden, as they are rather unnecessary on the printout. Also the menus in the header and footer.

The rules for the print view can be defined via a media query, similar to the rules for light and dark mode:

@media print {
html {
--background: #fff;
--primary: #000;
color: #000
}

body {
font-family: serif;
max-width: inherit;
}

nav,
#post-actions,
#related,
#interactions
{
display: none;
}
}

Interactions & Comments