A Page You Can Hold: Giving ChrisJM a Print Stylesheet

Last month a mate of mine printed off one of my posts at the library and handed it to me across a pub table. I'd like to say I was touched. Mostly I was embarrassed. The navigation was there. The cookie banner was there. My face was stretched across half of page one, and the actual words didn't start until page three. It looked less like an article and more like a ransom note assembled by a website.

That's on me. I'd spent ages on the screen version — the hover states, the little transitions, the way the header settles when you scroll — and about four seconds thinking about what happens when somebody presses Ctrl+P. Which is daft, really. If you run a personal site, paper is one of the oldest ways someone can say: I want to keep this.

The ugly first draft

My first print stylesheet was four lines long and mostly consisted of me hiding things I found annoying. Header, gone. Nav, gone. Footer, gone. Sidebar, gone. Newsletter box, gone. I even hid the skip link, which was a mistake — it turns out a printout can still benefit from a bit of structure.

Then I printed a test page and discovered a new set of problems. The body text was still sized for a monitor, so it came out enormous and ran to five pages. Links were blue and underlined but had no URLs, so a printed page full of 'here' and 'this post' was useless. My hand-made SVG logo turned into a grey smudge. A blockquote split itself across two pages like it had been sawn in half. And the hero image — a lovely, moody photo on screen — ate a quarter of a colour cartridge in one go.

I sat there with a cup of tea and a pile of bad A4 and thought: right, this is a manners problem disguised as a CSS problem.

What actually survived the printer

The words. The title. The date. The headings. A little line under the title with my name on it. That was about it. Everything else either vanished or turned into mush. The printer didn't care about my brand colours or my carefully chosen sans-serif. It cared about contrast, margins and how much ink I was asking it to fire at a page.

So I got deliberate. I set the body text to a serif at around 11.5pt, with a line height that doesn't make you feel like you're reading a ladder. I gave the page proper margins — 18mm, then tested it on my cheap home printer and found out it still clipped the right edge, so I went to 20mm. I hid the navigation, the footer, the sidebar, the forms, the buttons and anything with 'newsletter' in the class name. I kept the title, the date and the words.

Links were the interesting bit. On screen, a link is a door. On paper, it's a dead end unless you print the address. So I added a rule that appends the URL after external links in a smaller, quieter type. It looks a bit like a footnote, which is fine. Footnotes are honest. I also added a line at the end of every printed post with the canonical URL, so a stray page in a folder still has a home to go back to.

I added page-break rules so headings don't get orphaned at the bottom of a page and blockquotes don't get sliced in half. I capped image height so a photo can't swallow a whole sheet. I told the printer not to bother with background colours. And I stopped pretending that @page margin boxes are reliably supported, because on my printer they aren't, so the URL line lives in the document instead.

The ink-cost reality check

Here's the bit nobody tells you when they write a print stylesheet: a full-colour A4 page on a cheap home printer can cost somewhere between 10p and 15p in ink, and a page with a big photo can easily be 30p or more. My first test print was six pages with three images. That's not a fortune, but it's a decent chunk of a cartridge for something I was going to shove in a drawer.

So I made a rule: one image per printed post, maximum. No gradients, no drop shadows, no big dark backgrounds. If a post needs a diagram, it gets a diagram. If it needs a moody photo, it gets one moody photo. The rest is words on paper, which is what print is good at.

I also learned that printer margins are liars. My printer claims it can do 6mm. It cannot. Fifteen millimetres looked fine on screen and came out with the last letter of every line missing. Test on the actual machine, not in the browser preview.

What every personal site should let you put on paper

A short list, because this is the sort of thing I wish I'd found when I started:

1. The words, at a readable size, with a line length that doesn't require a ruler.
2. The title, author and date — so a printed page has provenance and doesn't look like it fell off the back of a van.
3. The canonical URL somewhere on the page, either in the header or at the end.
4. Links that survive as text, not just blue underlines.
5. Images that don't eat a cartridge per page.
6. No navigation, no cookie banners, no 'related posts' guff.
7. Page breaks that don't split a sentence or leave a heading stranded.
8. A quiet acknowledgement that printing is allowed — not a big button, just a print-friendly stylesheet that works.

The manners bit

Print CSS is not glamorous. Nobody claps. It doesn't get you on Hacker News. But it's a small signal that you expect someone might want to keep what you wrote. A zine-minded collaborator. A mate at the library. A future version of yourself with no Wi-Fi and a folder of printouts. It's the difference between a website that performs and a website that's hospitable.

My print.css is now about forty lines. It's not perfect. Code blocks still wrap badly and my blockquotes look like they've been through a washing machine. But last week I printed a post, stapled it, and put it in the shed. It looked like something someone wrote. That's enough.