Web sites Should Be Printable

Brennen Puth | 2026-10-24

I learn quite a lot of printed papers nowadays. While I get pleasure from studying on a laptop computer as a lot as the following man, marking up a printed doc engages me higher. Also, there’s one thing about sitting with a whiteboard and a printed doc that makes me rightly really feel like I’m doing one thing vital. So I’ve been excited about greatest permit others to get pleasure from this medium for content material that I write.

Luckily for me, printed paperwork had been a significant focus of net design some time in the past. You can print any webpage you want, by hitting CTRL-P and hoping your printer driver decides to cooperate at the moment.
I examined this by myself webpage, foolishly pondering I might have a good print job with none effort.

It wasn’t nice, though you may not less than see all of the content material. The textual content was too massive by about 2 ranges, the header appears terrible when printed, and my hyperlinks look awfully grey in black-and-white. Totally unacceptable.

Making Things Printable

Luckily, the online neighborhood has had this aforementioned concentrate on printing paperwork from HTML pages. CSS has selectors to permit styling particularly printed content material, and they are often helpful. Here’s my print-related snippet for this web page now:

.onlyPrint {
  show: none;
}

@media print {
  .noPrint {
    show: none;
  }

  .onlyPrint {
    show: inline;
  }

  p,
  ol {
    font-size: 12pt;
  }

  h3, h4 {
    font-size: 13pt;
  }

  h2 {
    font-size: 14pt;
  }

  h1 {
    font-size: 16pt;
  }

  .giallo {
    border: 3px strong black;
  }

  .giallo-l {
    font-size: 11pt;
  }

  a {
    coloration: black !vital;
  }
}

You can see the results of this snippet by hitting CTRL-P or the print button on this web page. Here’s the capabilities this does for me, so as:

1. onlyPrint could be added as a category to permit components which solely present up within the printed doc. Right now, meaning tagging a small creator attribution to the subtitle.
2. noPrint is used to take away one thing from the printed web site. I put it on the header, as a result of it appears actually very ugly in printed format.
3. Adjusting font sizes for print is essential. The variable-scale textual content which I take advantage of on my web site appears terrible on a printed web page. 12pt is a reasonably effectively accepted dimension, so I figured it’s going to do. A barely bigger dimension for the headers is smart as effectively.
4. The giallo tweaks are for codeblocks. Honestly, codeblocks are nonetheless the ugliest half even after some tweaking. They need to come out as one chunk and never break over web page borders, and if anybody has an answer to that I’d be drastically appreciative.
5. Blue hyperlinks, as a lot as I like them on the positioning, look terrible in grayscale. Turning them the identical coloration as different textual content is ok.
   Feel free to tug any code you want from the CSS, I’m not protecting of it. I might personally like to expertise extra webpages that take into consideration how printing works.

Why You Should Do This

After trying to optimize my web site on this manner, I’m sympathetic for many who would not prioritize printing. Hiding and exhibiting all the appropriate issues in print took me a good chunk of my morning. My web site is not very complicated. I additionally doubt how many individuals usually print webpages out. I is likely to be the one one.

Still, if all of your web site consists of is textual content, permitting folks to expertise the textual content of their favourite medium isn’t a foul factor. The digital medium permits quite a lot of flexibility. The street to good software program is paved with kindnesses from software program engineers to their customers. One day, maybe somebody shall discover this kindness and smile, even when only for a fleeting second. And that will probably be value it.