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 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.
My bad on your first point, thanks for letting me know. This website has been iteratively worked on, and admittedly seldomly tested in light-mode since I added support for it.
I'll take a look through your points on the print mode when I get a chance, I appreciate all the feedback! I'm not quite sure what you mean by the code blocks being entirely dark, but I'll look into it. Probably more light-mode shenanigans I didn't see coming.
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:
Two years ago we got an affordable Brother B&W laser printer, which has served us well at home the times we have used it. Those times can be counted on both hands though.
It's kind of a pity, there's a lot of work done with UPnP which makes it almost seamless to print from a mobile phone, for example. Seems like that entire stack is a bit of a technological dead end.
There's a Magic: the Gathering card that's only available on Arena (the modern digital version) that have effects along the lines of "pay some amount of mana, get a random creature that costs X". So my girlfriend hooked something up with a tiny printer and a phone app that picks a random card and sends off a printjob so you can play with it offline if everyone agrees. We've also been using it for proxies (stick the proxy in a sleeve with a real card as backing to give it the right thickness/mass).
I also have a fighting game controller with an acrylic layer that you can pop off to change the art under, as long as you can cut the holes out for the buttons (which we do have).
I think 8.5x11" printing is not terribly useful these days but for hobbyist stuff they're great!
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.
Fairly important is CSS break-after and friends, to make sure page breaks are placed as logically as possible.
An example on this post, as of writing, is the codeblock - it refuses to break inside it (in Firefox, at least,) so you get one page of four lines, a page of codeblock, and then the rest of the document.
Also, print media queries are great for hiding easter eggs. I have one on my site, you can probably guess what it is without even checking.
I use the "print" function of my browser weekly to save climbing topoguides as PDFs. I can later check them when I have no service in the mountains, and I love the fact that my favorite website (camptocamp.org) cleanly formats the output for printing to only show the most useful information.
This is the most underrated feature of this website, and the best example of "technology used right" IMO.
My attitude has been to be quite brutal and include the bare minimum content, to try and make it look like something you might have written rather than a printed website.
It's quite easy for the print style to fall out of sync on a personal site. For example, I didn't used to include banner images for movie reviews on the print stylesheet. Then I started posting photography on there, but the photography articles make no sense without images so images are back!
I had a dumb idea reading this, what if every website was actually printed into a pdf and that's what you were browsing? Several minutes later and several tokens spent, this is the result https://paperweight.meow.io/
Actually kind of fun to browse the web this way. You really get a sense for how awful some of the print stylesheets are out there.
chrismorgan | 18 hours ago
Websites shouldn’t set
code { background-color: #1e1e1e; }without setting acolor! 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 withnoPrint. 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>andheader { display: none }within your@media printif 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 screenwhen 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.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.
bputh | 14 hours ago
My bad on your first point, thanks for letting me know. This website has been iteratively worked on, and admittedly seldomly tested in light-mode since I added support for it.
I'll take a look through your points on the print mode when I get a chance, I appreciate all the feedback! I'm not quite sure what you mean by the code blocks being entirely dark, but I'll look into it. Probably more light-mode shenanigans I didn't see coming.
JulianSildenLanglo | 17 hours ago
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:
cceckman | 15 hours ago
This is a great trick, thanks!
bputh | 14 hours ago
Ah, that's awesome! I was working on similar when writing the post and didn't even think about the idea that the links wouldn't work in the PDF.
icefox | 18 hours ago
I... don't even have a printer. It'd be cool if they rendered well on e-readers, I guess?
gerikson | 17 hours ago
Two years ago we got an affordable Brother B&W laser printer, which has served us well at home the times we have used it. Those times can be counted on both hands though.
It's kind of a pity, there's a lot of work done with UPnP which makes it almost seamless to print from a mobile phone, for example. Seems like that entire stack is a bit of a technological dead end.
quasi_qua_quasi | 14 hours ago
There's a Magic: the Gathering card that's only available on Arena (the modern digital version) that have effects along the lines of "pay some amount of mana, get a random creature that costs X". So my girlfriend hooked something up with a tiny printer and a phone app that picks a random card and sends off a printjob so you can play with it offline if everyone agrees. We've also been using it for proxies (stick the proxy in a sleeve with a real card as backing to give it the right thickness/mass).
I also have a fighting game controller with an acrylic layer that you can pop off to change the art under, as long as you can cut the holes out for the buttons (which we do have).
I think 8.5x11" printing is not terribly useful these days but for hobbyist stuff they're great!
classichasclass | 8 hours ago
I picked up a used HL-2070N. It even prints in Mac OS 9!
Fun fact: it has a MicroSPARC CPU.
classichasclass | 8 hours ago
Or rendered to PDF. Sometimes saving a page is easiest by saving a PDF of it, if I don't need the individual files or code.
ryan-duve | 20 hours ago
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.
gavinmorrow | 7 hours ago
I also love using printed recipes because I don’t have to worry about getting the paper dirty, unlocking my phone, or scrolling up and down.
JulianSildenLanglo | an hour ago
It's also very convenient for quickly noting down corrections and opinions.
DustyFuzzy | 19 hours ago
Fairly important is CSS break-after and friends, to make sure page breaks are placed as logically as possible.
An example on this post, as of writing, is the codeblock - it refuses to break inside it (in Firefox, at least,) so you get one page of four lines, a page of codeblock, and then the rest of the document.
Also, print media queries are great for hiding easter eggs. I have one on my site, you can probably guess what it is without even checking.
z3bra | 10 hours ago
I use the "print" function of my browser weekly to save climbing topoguides as PDFs. I can later check them when I have no service in the mountains, and I love the fact that my favorite website (camptocamp.org) cleanly formats the output for printing to only show the most useful information.
This is the most underrated feature of this website, and the best example of "technology used right" IMO.
benoliver999 | 17 hours ago
I've done a bit of work on this, putting some links in a list at the bottom instead of inline - kind of like footnotes. Managed to do it all with my site generator rather than with JS.
My attitude has been to be quite brutal and include the bare minimum content, to try and make it look like something you might have written rather than a printed website.
It's quite easy for the print style to fall out of sync on a personal site. For example, I didn't used to include banner images for movie reviews on the print stylesheet. Then I started posting photography on there, but the photography articles make no sense without images so images are back!
vbernat | 12 hours ago
That's a good idea. For me, it's better than the CSS trick of putting the URL after the link. I have stolen the idea: https://github.com/vincentbernat/vincent.bernat.ch/commit/b3d923b820a0b14244990eec40e283e59fdbfc49.
joshbuddy | 12 hours ago
I had a dumb idea reading this, what if every website was actually printed into a pdf and that's what you were browsing? Several minutes later and several tokens spent, this is the result https://paperweight.meow.io/
Actually kind of fun to browse the web this way. You really get a sense for how awful some of the print stylesheets are out there.