Websites Should Be Printable

Websites shouldn’t set code { background-color: #1e1e1e; } without setting a color! In light mode (which is what most people will experience), inline code will be black-on-almost-black. I don’t see how the author could have missed that.

---

On the suggestions and some details of the page itself:

• onlyPrint: the sample usage is only to make up for removing some things with noPrint. I’d say approximately never warranted. Remember also that not all consumers will be using the stylesheets (e.g. most text-mode browsers, content scrapers), and duplicating information isn’t great.

• noPrint: use with great caution; you are breaking expectations when you do this. I don’t say there aren’t reasons to do this effect (my favourite example: webmail client, cut the chrome and leave only the message) but it should be carefully targeted and I think making it a class leads in the wrong direction. <header class="noPrint">? No, just write <header> and header { display: none } within your @media print if you really want to do this.

• Adjusting font sizes for print: if you think it’s too big printed, maybe you made it too big for screen. (OK, 1.25rem making 20px isn’t outrageous, though it’s not good for small screens). Consider changing the defaults less, and using @media screen when you do.

• The code blocks: honestly this is probably more important than the entire rest of it, and it’s been absolutely flunked: people don’t want to print 80% of a page solid black! Make sure your code blocks aren’t that. Honestly, make it dark-on-light even on light screens. Yes, this imposes some design restrictions on the highlighter. It needs to not be one that writes <span style="color: #CBA6F7;">. Though if you want to stick with such a one for whatever reason… [style="color: #CBA6F7;"] { color: rebeccapurple !important; } works, and I won’t even judge you for it. Well, not much.

• They want to come out as one chunk and not break over page borders, and if anyone has a solution to that I'd be greatly appreciative.

  code { display: inline-block } did that. You should probably remove it. Its side-effects were mostly bad even on inline code (messing up layout because the added padding becomes part of the line height).

• Blue links: no. Do not change that. Terrible idea. Remember also that printing is not necessarily monochrome. Make sure it’s still plenty obvious they’re links. There’s no reason to suppress them.

The first rule of ARIA is: don’t use ARIA.

The first rule of print stylesheets should be a similar brand of “don’t use print stylesheets”. Most ways of doing things will produce at least tolerable results without them, and it’s very easy to cause trouble with them.

I just did a print-preview of my website and noticed that all the links are busted. I don't like that.
Are there any good solutions to this? Off the top of my head I can think of:

1. Simply always have the full url showing next to the link. Ugly. 2. Have the full url there in text, but hidden by css when not in print-mode. Messy, and might break on some viewers. 3. Have a [1] footnote thingy next to every link and a list of links at the bottom of the page. Simple enough.

Actually, it's really simple and I've already added it to my homepage:

@media print 
{
  a[href]:after
  {
    content: " [" attr(href) "] ";
  }
}

I... don't even have a printer. It'd be cool if they rendered well on e-readers, I guess?

I found by sticking to native HTML instead of dynamic DOM elements I luckily got this by accident. I run a hobby recipe site structured that way and the ability to print recipes on paper is invaluable because now one (such as my ten year old) doesn't need a screen in the kitchen to follow directions.