--- title: Websites Should Be Printable | daily.dev description: Websites can be made printable using CSS's `@media print` selectors, and it's worth the effort. The author shares the CSS snippet now used on their own site,... canonical: https://daily.dev/posts/websites-should-be-printable-tzmswr69s twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Websites Should Be Printable | daily.dev og:description: Websites can be made printable using CSS's `@media print` selectors, and it's worth the effort. The author shares the CSS snippet now used on their own site,... og:url: https://daily.dev/posts/websites-should-be-printable-tzmswr69s og:image: https://api.daily.dev/og/posts/TZmswr69S.png og:image:alt: Websites Should Be Printable og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Websites Should Be Printable **[Hacker News](https://daily.dev/sources/hn)** · 4 min read · 2 upvotes · 0 comments ## Summary Websites can be made printable using CSS's `@media print` selectors, and it's worth the effort. The author shares the CSS snippet now used on their own site, which uses `onlyPrint` and `noPrint` classes to toggle elements, sets paragraph text to 12pt and headers up to 16pt, and forces links to black to avoid gray-on-grayscale text. Code blocks remain the hardest part to style well for print. The author still hasn't solved keeping code blocks from breaking across page borders. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I style a webpage differently for printing using CSS? Use the `@media print` selector in CSS to apply styles only when a page is printed. Within that block you can set smaller font sizes (like 12pt for body text and up to 16pt for h1), hide elements with a `.noPrint { display: none; }` class, show print-only elements with `.onlyPrint { display: inline; }`, and force link colors to black with `a { color: black !important; }` since blue links look bad in grayscale. _daily.dev surfaces practical CSS techniques like this for developers polishing site details._ ### Why do my webpage's hyperlinks look bad when printed in black and white? Blue links render as an awkward gray tone on a black-and-white printed page, which looks unappealing. The fix is to override the link color specifically within a print media query, setting `a { color: black !important; }` inside `@media print` so links match the surrounding text color instead of appearing gray. _developers refining cross-medium styling can find similar CSS fixes on daily.dev._ ## Community take How the wider developer community reacted, aggregated from 2 discussions and 164 comments across hackernews, lobsters (as of 2026-10-26). **TL;DR:** Reactions are split between people who value printable pages for receipts, resumes, records, and offline reading, and others who see website printability as a low-priority or even philosophically misguided goal; separately, a few commenters share concrete CSS tricks (like exposing link URLs) while noting code blocks and page breaks remain genuinely hard to get right. **Sentiment:** 30% positive · 40% mixed · 30% skeptical **The case for** - Printable pages are valued for receipts, purchase confirmations, and record-keeping that may need to be attached to expense reports or legal filings. - Older or less tech-savvy users and people in B2B/high-stakes purchases (cars, property) often print pages to compare and annotate offline. - A CSS trick of appending the href after links in print mode was shared as a simple fix for broken links in printed/PDF output. - Printing offers a durable, device-independent, hard-to-hack record compared to digital-only storage. - Sticking to native HTML/semantic markup can make a site printable 'by accident,' which is useful in practical contexts like printed recipes. **The pushback** - Some argue the original purpose of the web was navigation/information-sharing, not print, and that print-focused tooling (LaTeX, PDF) already exists for that need. - Others view most printing as wasteful or unnecessary in modern workflows and would rather prioritize on-screen UX and accessibility. - Page-break control for elements like code blocks and multi-section layouts is described as brittle and inconsistent across browsers. - Several noted the linked article's own page didn't render well in their browser (broken print layout, unreadable low-contrast text), undercutting its message. - Forcing custom font sizes or overriding user-controlled zoom/font settings in print or mobile view was criticized as bad accessibility practice. **By community** - hackernews (heated): A long, contentious thread ranging from philosophical debates about the web's original purpose to practical disputes over whether printability is worth prioritizing, with many sharing real use cases for printing alongside pushback that it's often unnecessary. - lobsters (positive): Smaller, more technical discussion focused on practical CSS fixes (like showing link URLs) and remaining pain points like page breaks inside code blocks. **Hottest debate:** Whether printability is a core web responsibility worth real engineering effort, versus an unnecessary throwback given PDFs, LaTeX, and modern usage patterns. **Open questions** - Is there a reliable, cross-browser way to control page breaks around elements like code blocks and resume sections without brittle hacks? - Should browsers take more responsibility for consistent print rendering, given how differently the same page printed across Safari, Brave, and Chrome in one reported case? **Highlights** > 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 actually really simple and I've already added it to [my homepage:](https://andanti.no/about.html) ```css @media print { a[href]:after { content: " [" attr(href) "] "; } } ``` > — [JulianSildenLanglo on lobsters · 1 points, 2 comments](https://lobste.rs/s/olnqh2/websites_should_be_printable#c_wigxfy) > I used to work for a vehicle listing site, and over and over again when we talked to real users they would tell us how they would make spreadsheets and print out our vehicle pages (and from other sites too) so they could compare everything together on their kitchen table. We had just completed yet another other redesign and our (React) pages printed completely mangled and users hated it. We regularly got feedback about it. And yet it was so low priority that me (UX designer) and a developer had to team up and get off the record permission to spend a few days fixing it in CSS alone while our managers covered for us. When people for whom $29,000 is an enormous expense are purchasing a car, you can bet they are printing stuff and very, very carefully considering their purchase. Primary demographic was not young, tech native people. > — [nkrisc on hackernews · 1 comments](https://news.ycombinator.com/item?id=50242368) > While I'm on board with having good html structure that prints well, and I'm on board with hiding navigation elements, etc., I'm not so on board with changing the default font size or fonts in the print version. I just made a simple site that didn't set any font sizes anywhere, and a friend of mine complained that the font was too small on mobile. Do I detect a lo-res screen and increase the font size? I know a lot of sites do exactly that, but I feel it's wrong. The user controls their default font size on their platform. What if they'd already increased it, and now I'm just making it bigger? What if they'd decreased their default print font size and then I shrink it again? I think it's best to leave those to the user entirely. > — [beej71 on hackernews · 4 comments](https://news.ycombinator.com/item?id=50243866) > Hilariously, when I hit CMD-P on this specific website, I end up with 4x pages: the first is 80% blank, the 2nd page is fairly nice, the 3rd page contains just the CSS code sample as a thin strip on the left-hand side, and the last page is again mostly blank space... I also attempted something like this, but only to format my resume[1], since many employers require it to be submitted as a PDF [1]: https://www.trist.am/resume/ > — [swiftcoder on hackernews · 2 comments](https://news.ycombinator.com/item?id=50242792) > >I politely disagree. The original intent Tim Berners Lee had [1] was to create a navigable way of finding documents and information. Not printable. And I politely disagree right back. My particular problem with this has to do with purchasing. When I make a purchase at work, I need something I can attach to a purchase request as a quote. Note that this is often not a formal quote, but rather evidence of what whatever I want to buy will cost. A simple way to do this is to print a shopping cart to PDF and attach that to the PR. Some web sites do this just fine and others do it horribly. They should do better. > — [f30e3dfed1c9 on hackernews · 1 comments](https://news.ycombinator.com/item?id=50245459) **Source threads** - [hackernews](https://news.ycombinator.com/item?id=50241664) · 202 points · 155 comments - [lobsters](https://lobste.rs/s/olnqh2/websites_should_be_printable) · 39 points · 9 comments ## Similar posts on daily.dev - [Setting type like a printed page](https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y) · Creative Design Technologist · 9 upvotes · 2 comments - [I still like writing websites by hand](https://daily.dev/posts/i-still-like-writing-websites-by-hand-jxosop61t) · Chen Hui Jing · 138 upvotes · 23 comments - [Printing and Saving PDFs From Web Apps](https://daily.dev/posts/printing-and-saving-pdfs-from-web-apps-ioeuc5djf) · Vaadin · 4 upvotes · 0 comments - [CSS: Unavoidable Bad Parts](https://daily.dev/posts/css-unavoidable-bad-parts-ia9uwkcoo) · matklad · 15 upvotes · 0 comments - [What I learnt about making websites by reading two thousand web pages](https://daily.dev/posts/what-i-learnt-about-making-websites-by-reading-two-thousand-web-pages-dudd77fp0) · Lobsters · 1 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design) [View this post on daily.dev](https://daily.dev/posts/websites-should-be-printable-tzmswr69s) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Websites Should Be Printable","url":"https://daily.dev/posts/websites-should-be-printable-tzmswr69s","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/websites-should-be-printable-tzmswr69s"},"datePublished":"2026-10-26T13:42:56.241Z","dateModified":"2026-10-26T17:59:49.873Z","description":"Websites can be made printable using CSS's `@media print` selectors, and it's worth the effort. The author shares the CSS snippet now used on their own site,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/85c589a1c5eba43af4f7baf0a1f18823?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/85c589a1c5eba43af4f7baf0a1f18823?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Hacker News","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Hacker News","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/hn","url":"https://daily.dev/sources/hn"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/websites-should-be-printable-tzmswr69s","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,ui-design","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hacker News","item":"https://daily.dev/sources/hn"},{"@type":"ListItem","position":3,"name":"Websites Should Be Printable"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/websites-should-be-printable-tzmswr69s#faq","mainEntity":[{"@type":"Question","name":"How do I style a webpage differently for printing using CSS?","acceptedAnswer":{"@type":"Answer","text":"Use the `@media print` selector in CSS to apply styles only when a page is printed. Within that block you can set smaller font sizes (like 12pt for body text and up to 16pt for h1), hide elements with a `.noPrint { display: none; }` class, show print-only elements with `.onlyPrint { display: inline; }`, and force link colors to black with `a { color: black !important; }` since blue links look bad in grayscale. daily.dev surfaces practical CSS techniques like this for developers polishing site details."}},{"@type":"Question","name":"Why do my webpage's hyperlinks look bad when printed in black and white?","acceptedAnswer":{"@type":"Answer","text":"Blue links render as an awkward gray tone on a black-and-white printed page, which looks unappealing. The fix is to override the link color specifically within a print media query, setting `a { color: black !important; }` inside `@media print` so links match the surrounding text color instead of appearing gray. developers refining cross-medium styling can find similar CSS fixes on daily.dev."}}]} ```