7 ms·

CSS for printing to paper

615 points by Tomte 3y ago

n3storm 3y ago
I would love to see some svg thrown into this. Let's kill pdf!
- mcdonje 3y ago
  So... Epub?
  - Turing_Machine 3y ago
    EPUB is great for its use case, but is not particularly good at handling printing. Not even EPUB3 does a good job for print, IMO.
- h2odragon 3y ago
  .ps.gz forevah!
- wiredfool 3y ago
  Or, lets try to get SVG graphs to render properly in print-to-pdf?
- Antrikshy 3y ago
  I’ve never understood what everyone’s issue with PDF is. It’s like digital, printed paper. Part of the reason is pretty much ubiquitous compatibility. If it needs to be edited, just don’t print it on digital paper. Does the format have other issues?
  - herewulf 3y ago
    Here are a couple ideas: 1. Dividing some amount of text into pages on a computer screen is unnecessary and annoying. 2. Adobe has a stranglehold on the format and is constantly dicking around with it. Lately I encountered a fillable PDF that Acrobat Reader refused to fill. I could fill it with Firefox but after saving it was no longer a fillable form for any Acrobat user. What's the point of a fillable form that disallows filling it out?! 3. Adobe increasingly supports JavaScript for form validation, etc. I can only imagine what a nightmare mess that is. If we're going to shoehorn in a browser, might as well just use a browser.
    - zokier 3y ago
      PDF is really a family of formats. There is the "good" (=sane) PDF, PDF/A-2, and then bunch of less good stuff (all the rest). PDF/A-2 doesn't have any interactive stuff, like forms or JS, and is a ISO standard that is not going to change under your feet. Because it is such mature and limited format, most readers should have no problem with PDF/A-2 files.
herpdyderp 3y ago
I recently had to figure out a good chunk of this (on my own, I wish I had this resource then) for a one-off project. The biggest thing I learned was to give up all hope of cross-browser printing: just use Chrome. Every browser treats almost every property differently or flat out ignores them, but I found that Chrome had the highest score in doing what I wanted.
- gazook89 3y ago
  There are two sites that share a common history that provide a tool for TTRPG players to create homebrew documents, GM Binder and Homebrewery, that both only target Chrome for this reason. It’s great if we can support all browsers and don’t want the site to break in any browser, but we advise users that Chrome is the target almost just so we know authors and readers are on the same page.
- capitainenemo 3y ago
  The area chrome has consistently failed horribly for me in is in tables spanning multiple pages. Firefox and the old IE engine were far more reliable at this. Chrome has improved a little in this regard lately, but will still routinely spill thead on top of tbody content when there is a page split.
a1o 3y ago
I almost never do real printing (to paper), but this looks really easy to get something working. Also the cheatsheet at the end of the article is a super useful summary of the css rules used. Great article to save in case I face having to build something that prints in the future.
persnickety 3y ago
Browser support for printing CSS is spotty. Worse: some features, like footnotes on every page, don't have any equivalent in CSS I know of. Is there any easy to use/hack HTML layouting engine where I could experiment with custom CSS attributes and bridge that gap? Would anything from Servo be suitable? Modifying an entire browser with its bloat is too much effort. There is no JS or cookies on paper (they can be in paper if you wrap them).
- kabes 3y ago
  Css has support for footnotes, but it's not yet supported by chrome
  - webstrand 3y ago
    Can you give some more information? Is it supported by Firefox or Safari? I found https://www.w3.org/TR/css-gcpm-3/#footnotes https://www.w3.org/TR/css-gcpm-3/#footnotes but it seems to be completely unsupported at this time.
    - tingletech 3y ago
      It's implemented in https://pagedjs.org https://pagedjs.org
- nicoburns 3y ago
  > Is there any easy to use/hack HTML layouting engine where I could experiment with custom CSS attributes and bridge that gap? Would anything from Servo be suitable? Servo could be used for this. You'd want to add support for parsing the CSS properties themselves to the style crate in https://github.com/servo/stylo https://github.com/servo/stylo and then the layout implementation to the layout2020 crate in https://github.com/servo/servo https://github.com/servo/servo. You do effectively get a whole browser though. I'm currently working on building a lighter weight / hackable layout engine based on a combination of https://github.com/servo/stylo https://github.com/servo/stylo (for css parsing and selector resolution), https://github.com/DioxusLabs/taffy https://github.com/DioxusLabs/taffy (for box-level layout) and https://github.com/pop-os/cosmic-text https://github.com/pop-os/cosmic-text (for flow/inline layout). I expect to have something decent in around 6 months Neither of these setups currently have any support for pagination though.
didgeoridoo 3y ago
I just laid out a book using Pagedjs.org. Although there were a few bugs in the preview experience, the final output was perfect, and probably took me a quarter the time it would have in InDesign (which I’m fairly competent in). The real power is in being able to hook up all the templating, CMS APIs, and whatever else you want into your content pipeline. It’s Just HyperText™. I’d go so far to say that if you’re equally comfortable in HTML/CSS and InDesign, Pagedjs is a superior choice for long form layout.
- yawnxyz 3y ago
  I’ve designed and printed many conference abstract books with PagedJS! Love that thing
- strogonoff 3y ago
  I wonder how the finer issues of typesetting are handled with print CSS compared to dedicated typesetting software nowadays. CSS is very compelling, but then based on my personal experience as print media designer the likes of InDesign are full of various special tricks (and language-specific, too) for alleviating white space corridors, handling hanging punctuation, hyphenation, etc. that the enterprise-level software tends to accumulate (due to the business model if nothing else).
  - sings 3y ago
    It is limited and depends on the browser used to print the document. The most glaring missing feature is CMYK colour. I’ve just set up our publications to use PagedJS, and with a fair amount of hacking I was able to set up a baseline grid. Hyphenation depends on the browser implementation, which is OK for English in recent Chromium. The new text-wrap property has also been helpful. Hanging punctuation is only supported in Safari if I remember correctly. But being able to produce nice looking PDFs from a markdown document, with automated endnotes and table of contents, is a much nicer process than going through InDesign, and I also say this as someone equally comfortable with both. And the result is good enough for our purposes. Here is an example: https://www.lowyinstitute.org/sites/default/files/2024-03/LAVEIL-Papua-New-Guineas-fiscal-decentralisation.pdf https://www.lowyinstitute.org/sites/default/files/2024-03/LA...
fifilura 3y ago
I can't help but feel like this is going full circle. CSS started with print media in mind since this was what was available at the time. Many of these features have been there since the inception. Just that browser support has been lagging. How do you break a table inside a float? Etc.
account-5 3y ago
I'm pretty sure I've used https://github.com/cognitom/paper-css https://github.com/cognitom/paper-css before for generating pdfs via the browser.
- schappim 3y ago
  I was just coming here to say the same thing about. It has been pretty good for document generation when combined with AWS Lambdas + headless Chrome or wkhtmltopdf (if you don't need modern CSS functionality).
bradgessler 3y ago
Browser support for printing is so bad that I'm going to have to create a native app for https://www.thingybase.com https://www.thingybase.com to have a streamlined workflow of printing labels to a thermal label printer. It works now, but first you have to download a PDF and print that. Google Docs does this too when you hit "Print". I've tried hacks like load the PDF in an iframe and use some JavaScript to print that, but then I get footers with the URL of the webpage, which doesn't work for my purposes. If you work on Chrome/Blink, Safari/Webkit, or Firefox/Mozilla please please please at least get the hacks working! A CSS standard would be great, but really I'd be happy if I could call a function like `windows.print("/document.pdf")` and have it print the PDF without all the footer/headers stuff.
- IgorPartola 3y ago
  I’ve worked with thermal printers and they are actually quite capable. They have drawing primitives that allow you to lay out basic graphics and the one I was working with even had basic font support. A native driver is definitely the way to go with these.
  - bradgessler 3y ago
    > A native driver is definitely the way to go with these. Not if you need to support a bunch of different printers. For me PDF is the way to go, but browsers can't print a PDF via a "Print" button within the HTML, so instead I have to build apps that download the PDF and print it directly through operating system APIs.
    - djbusby 3y ago
      Open the PDF in a new window and call window.print() on it.
      - bradgessler 3y ago
        That doesn’t work on iOS—you get the URL in the footer at the bottom of the page.
lofenfew 3y ago
It's interesting that he skips over any fancy css tricks to get headers and footers and goes straight to generating from js. One advantage of this is that you can add page numbers and such to each header, which is totally impossible with css hacks. But if you're fine going without that, it seems like there are methods that produce mostly acceptable results with less effort than the javascript solution he proposes.
- voussoir 3y ago
  I'm sure there are smarter ways to do some of the things I'm doing. Could you let me know what fancy tricks you're referring to, perhaps ::before and ::after with content properties? These generator pages already rely on javascript to put our database data onto the page, whether by URL parameters or API calls, so once I'm in that mode, yeah I'm generating everything with article.innerHTML = '...' to get a bulk template on the page, and a series of createElement/append to make smaller elements like table rows.
  - lofenfew 3y ago
    I just did a quick search, so I don't claim to be an expert. The two main methods seem to be thead/tfoot and position:fixed. I didn't mean to imply that this are smarter/better, but they might be easier in certain conditions.
    - voussoir 3y ago
      Oh, I see, thanks. I did figure out that thead automatically repeats across pages, but I also had to repeat other stuff outside the table, like letterhead. I also made this sample file that shows thead repeating, but since it's a single continuous table it doesn't preview very well and spills out of the 8.5x11 article element. I'm not sure how I would take advantage of the browser's automatic thead/tfoot repeat while also accurately previewing the result in the browser, especially with more elements below the table. https://voussoir.net/writing/css_for_printing/sample_longtable.html https://voussoir.net/writing/css_for_printing/sample_longtab... But I'm open to suggestions that would spare me from splitting the table after a height threshold!
newhotelowner 3y ago
CSS/html is way faster to build a lot of things for printing. It's very flexible to make changes. Not huge files like Photoshop or indesign. Printing to PDF gets you vector output. Just last week, I built a print ad for a local visitor bureau placement. Pretty much anything I need for a high-quality print job, I use html/css.
- thegeomaster 3y ago
  If that's all you know, it can be a reasonable alternative. But for most professional print use-cases it's woefully inadequate. Starting from the awkward box model for layout, down to the very bare-bones typography support.
Yesman85 3y ago
It's great really, we switched all our doc generation from questpdf to puppeteersharp. You can simply feed it a static HTML and css and it print perfectly. Takes so much less time messing with it.
atum47 3y ago
Back in 2015 i was the solo developer for a "social network" to offer jobs and hire people. I used this CSS technique so the profile of the job seeker could be printed by the companies as a curriculum (our niche was factory workers, so everyone involved still used paper rather than digital formats). Before that i made a online editor to create certificates for workshops and courses, again used the same technique. Both projects are kinda dead now, but it was nice getting everything done using only vanilla JS and CSS. Very powerful stuff.
niederman 3y ago
Just typeset a webnovel for print so I could read it physically using Pandoc, CSS, and Prince and honestly the experience was really nice. Way better than any other option I'm aware of.
qwerty456127 3y ago
I've always (like in over a decade) knew CSS as by far the easiest way to print from any app I would build. Just output some concise HTML+CSS and a reasonably pretty printable document is ready. Perhaps learning PostScript or TeX could give me more but I found these prohibitively hard as long as I want to print something custom and not the template everyone uses. Meanwhile writing printer-optimized CSS typesetting just took me some minutes although I never had to dedicate any time to study it seriously (some w3schools was enough).
foota 3y ago
I tried to do this a number of years ago. My advice? Give up and use a generated PDF.
Brajeshwar 3y ago
One might be interested in looking at the Gutenberg CSS Print Framework. It hasn't failed me in all the years that I have used, recommended, and included in most needs. https://github.com/BafS/Gutenberg https://github.com/BafS/Gutenberg
hanniabu 3y ago
I had no idea you could specify size in inches with css
- voussoir 3y ago
  There are way more length units than you'd expect! https://developer.mozilla.org/en-US/docs/Web/CSS/length https://developer.mozilla.org/en-US/docs/Web/CSS/length
Semaphor 3y ago
We use HTML & CSS to create invoices and some eBooks, one resource I love is print-css.rocks [0] which has a comparison of tools available (for us Weasyprint [1] is good enough) and also several tutorials of how to accomplish tasks. [0] https://print-css.rocks/ https://print-css.rocks/ [1]: https://weasyprint.org/ https://weasyprint.org/
- NewJazz 3y ago
  Hey I also use weasyprint to generate invoices! Small world.
ars 3y ago
You can add some code into CSS that will tell you if someone printed your webpage (or at least print-previewed). Make a tracking background image that only loads in the print version of the css.
Lammy 3y ago
A few of my favorite print styles, from my personal site: h2,h3,h4,h5,h6,h7,h8 {break-after: avoid-page;} img, svg, table, canvas {break-inside: avoid;} a::after {content: " (" attr(href) ")";} Explanation: - Avoid printing section headers at the bottom of one page with the section content left headerless at the top of the next page. - Prefer printing graphics and figures on whole pages instead of split across pages. - Print out the URL of every hyperlink instead of having links only as useless underlined text.
- sandreas 3y ago
  Awesome, thank you. I don't think that h7 and h8 exist?! Are you sure this is necessary? And why no h1? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements https://developer.mozilla.org/en-US/docs/Web/HTML/Element/He...
  - Lammy 3y ago
    Not sure how those got in there and git-blame is not helpful. Maybe just me typing out as many as I could imagine? :v No h1 because there is only ever one of those and it's at the top of the first page.
    - sandreas 3y ago
      Thanks :-)
      - kill_nate_kill 3y ago
        While they're not valid, I believe the browser will still respect non standard headings. The browser will treat them like non semantic elements (similar to a div), but you can kind of make it legit with a couple different aria attributes. I would recommend staying within the standard heading sizes though.
- voussoir 3y ago
  Wow, great use of the attr function, thank you!
slim 3y ago
Also if you print from Firefox and get full pages missing (!!) or empty, it's not a mistake you made, it's a +15 years firefox bug
moontear 3y ago
The code seems very opinionated, at least it is pretty focused on US needs. I don’t want someone to tell me what paper I should use (size: Letter portrait). Frankly I don’t own letter-sized paper. Also all sizes are in inches, which I don’t calculate in and wouldn’t know whether still sensible margins when printing on a different paper size.
- FearNotDaniel 3y ago
  > You should use Letter or A4 as appropriate for your relationship with the metric system. That's pretty clearly stated near the top of the article. As a European, if I wrote a similar post I would do it all in metric and trust that my US readers were smart enough to substitute the units of their choice without whining about it. The concepts would not change, and a quick google would tell you that an inch is approx 25mm, which is enough for you to understand what's going on.
- voussoir 3y ago
  I have been making these generators for my workplace, so the project scope is very narrow. You can follow the idea with any dimensions you need. If you want to use these techniques on a global site, I think you could use multiple @page styles and switch between them with a dropdown like I did with portrait/landscape. Although A4 and letter are very close in size.
zubairq 3y ago
Nice, I had no idea that CSS had elements to allow printing to paper! Thanks
ggm 3y ago
Cut marks! Cut marks and fold marks for n-up 2 sided are very helpful.
moritonal 3y ago
Having been doing this for a few years, the answer currently requires JS. A certain amount of CSS is needed, but JS is required for the following realistic features. Table of contents, reflowing content across pages, templated footer, randomly selected background elements on pages. This let's the Ctrl-P version locally match up with a headless Chromium render, allowing for much easier testing.
jillesvangurp 3y ago
I recently setup a label printer where the labels get printed from a full page app to a Brother label printer that takes rolls of 62mm wide and 30 meters long. The printer cuts after each page break. It's a regular usb printer but with a funny page size. Also, Brother's website for finding the mac drivers is a bit of a maze of misdirection that tries to get you to install their extremely shitty application. In the end I found a 3rd party website with a working printer driver for this thing. After a bit of tinkering, I was able to print 6.2x12.4cm labels with a QR code. Really fun to watch it spit out these stickers. Each sticker has a unique QR code with the printed code in text form below it. Some gotchas: - you have to use margin 0 to hide the ugly browser headers that get added in the margin otherwise. - Firefox has no print preview. This makes testing a bit hard. I used Chrome for testing this in the end. - To print, you replace the dom tree with your print page, invoke print, and then copy back the app's root node from javascript. This is ugly as it shows the print page below your print dialog while that is open. I've not found a better way to do this. I guess I can do some non page layout that shows while that happens. Hacky but it works. - I've yet to make this work in landscape mode where the page is vertical 62x31 layout to print small stickers. @page { margin: 0mm; size: 124mm 62mm; size: portrait; .sticker { padding: 4mm; page-break-after: always; } } The rest is just usual html layout. I used a simple flex row with two elements. Print quality is surprisingly good. Cost per sticker is around 0.3 cents per sticker. Amazing value.
- euroderf 3y ago
  > Brother's website for finding the mac drivers is a bit of a maze of misdirection that tries to get you to install their extremely shitty application. That seems surprising, considering how no-muss no-fuss their hardware & cartridges are. (As compared to, say, H-P.)
  - jillesvangurp 3y ago
    I think it's just regular incompetence for hardware companies not really being on top of their software game.
    - 3y ago
dudefeliciano 3y ago
related "How to write a book with CSS" talk by Hakon Wium, the OG CSS developer: https://www.wearedevelopers.com/en/videos/172/how-to-write-a-book-with-css https://www.wearedevelopers.com/en/videos/172/how-to-write-a... (no need to log in, just inspect the login overlay and remove it and the video will play)
scoofy 3y ago
I've worked with this extensively on my site golfcourse.wiki, because I've build a tool that generates printable course books with CSS. I originally was going to generate PDFs, but my backend is in python, and all the PDF generators have some issues with SVG images, especially with gradients. The site is a wiki, so SVG seemed like the best way to map courses while allowing them to easily be edited down the road. Since CSS and SVG work hand in hand, I decided to start working on that, and it's actually turned out okay. If you want to see it in action, you can pop over and look at any of the courses marked with a blue or red flag on the homepage, but a very good example is Pasatiempo, here: https://golfcourse.wiki/print_options/course/pasatiempo_golf_club-santa_cruz https://golfcourse.wiki/print_options/course/pasatiempo_golf...
nicbou 3y ago
It's worth noting that Safari completely ignores page margins.
bepero 3y ago
Here is also: https://github.com/vladocar/Hartija---CSS-Print-Framework https://github.com/vladocar/Hartija---CSS-Print-Framework
wiradikusuma 3y ago
I'm writing a book (https://news.ycombinator.com/item?id=38433668 https://news.ycombinator.com/item?id=38433668) and for the case study I built https://momenial.com https://momenial.com to generate certificates for webinar attendees. The certificate templates are HTML files, and I use https://github.com/cognitom/paper-css https://github.com/cognitom/paper-css to make them print-friendly.
mstijak 3y ago
My company is working on a product simplifying the creation of printable PDFs filled with tables and charts, leveraging a visual designer and API. It helps with the usual headaches like page breaking, page numbering, table of contents, etc. https://www.cx-reports.com/ https://www.cx-reports.com/ We're working closely with early adopters at this stage.
- Timwi 3y ago
  -
  - mstijak 3y ago
    Fixed. Thanks!
sam_goody 3y ago
I appreciated the read, but in practice I just link to the css file in Paper-CSS. It may not be a lot of CSS, but it is much easier for me to just include the page and have it deal with my page size than to review articles like this when I want to print. Edit: when I linked to the repo, my comment disappeared. You can find Paper-CSS by searching Github or Node for cognitom/paper-css. Would love a more experienced HN'ers tip to how to use links in comments w/o causing the comments to disappear.
hashhar 3y ago
Haha one of the examples has this text: By reading this sentence, you hereby agree to all terms and conditions presented by voussoir.net, including but not limited to terms which entitle voussoir.net to a fraction not less than forty (40) percent (%) of your monthly income from now until an as-yet undetermined time not less than thirty six (36) months from the present date.
- isp 3y ago
  One of the other examples [0] features a "random number" which might not be entirely random [1]. [0] https://voussoir.net/writing/css_for_printing/#media_print https://voussoir.net/writing/css_for_printing/#media_print [1] https://en.wikipedia.org/wiki/AACS_encryption_key_controversy https://en.wikipedia.org/wiki/AACS_encryption_key_controvers...
anotheryou 3y ago
The problem I could not solve: page numbers that start after the title. Can't access anything about page breaks via js and CSS is very limited.
- Liskni_si 3y ago
  Should be doable using paged.js - https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/91 https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/91
  - anotheryou 3y ago
    uh great! thanks
makkesk8 3y ago
Having gone down the rabbit hole of creating printable media/pages from html/css, I also discovered paged media. Generating printable pdfs using only the standard is very cumbersome but thankfully pagedjs[1] exists, which makes this a breeze. [1] https://github.com/pagedjs/pagedjs https://github.com/pagedjs/pagedjs
dirkk0 3y ago
If you want page numbers in your printed html, here is an example: https://dirkk0.neocities.org/printcss/ https://dirkk0.neocities.org/printcss/
mooreds 3y ago
I worked at a startup years ago that was all about clean printing (plus add space). Layout was a challenging technical problem in the late 2000s. RIP Format Dynamics.
eternityforest 3y ago
I use a .pagebreak class that puts a page break before stuff. Then I tell it not to break sections and articles unnecessarily , and let the browser figure it out . Not a fan of embedding specific sizes into the CSS, I often(Well, not really often as I'm only printing a few times a year) like to print A5. A4 makes it annoying to try to hold a binder in one hand and takes more space than it really needs to.

615 points by Tomte 3y ago

n3storm 3y ago

I would love to see some svg thrown into this. Let's kill pdf!

mcdonje 3y ago
So... Epub?
- Turing_Machine 3y ago
  EPUB is great for its use case, but is not particularly good at handling printing. Not even EPUB3 does a good job for print, IMO.
h2odragon 3y ago
.ps.gz forevah!
wiredfool 3y ago
Or, lets try to get SVG graphs to render properly in print-to-pdf?
Antrikshy 3y ago
I’ve never understood what everyone’s issue with PDF is. It’s like digital, printed paper. Part of the reason is pretty much ubiquitous compatibility. If it needs to be edited, just don’t print it on digital paper. Does the format have other issues?
- herewulf 3y ago
  Here are a couple ideas: 1. Dividing some amount of text into pages on a computer screen is unnecessary and annoying. 2. Adobe has a stranglehold on the format and is constantly dicking around with it. Lately I encountered a fillable PDF that Acrobat Reader refused to fill. I could fill it with Firefox but after saving it was no longer a fillable form for any Acrobat user. What's the point of a fillable form that disallows filling it out?! 3. Adobe increasingly supports JavaScript for form validation, etc. I can only imagine what a nightmare mess that is. If we're going to shoehorn in a browser, might as well just use a browser.
  - zokier 3y ago
    PDF is really a family of formats. There is the "good" (=sane) PDF, PDF/A-2, and then bunch of less good stuff (all the rest). PDF/A-2 doesn't have any interactive stuff, like forms or JS, and is a ISO standard that is not going to change under your feet. Because it is such mature and limited format, most readers should have no problem with PDF/A-2 files.

herpdyderp 3y ago

I recently had to figure out a good chunk of this (on my own, I wish I had this resource then) for a one-off project. The biggest thing I learned was to give up all hope of cross-browser printing: just use Chrome. Every browser treats almost every property differently or flat out ignores them, but I found that Chrome had the highest score in doing what I wanted.

gazook89 3y ago
There are two sites that share a common history that provide a tool for TTRPG players to create homebrew documents, GM Binder and Homebrewery, that both only target Chrome for this reason. It’s great if we can support all browsers and don’t want the site to break in any browser, but we advise users that Chrome is the target almost just so we know authors and readers are on the same page.
capitainenemo 3y ago
The area chrome has consistently failed horribly for me in is in tables spanning multiple pages. Firefox and the old IE engine were far more reliable at this. Chrome has improved a little in this regard lately, but will still routinely spill thead on top of tbody content when there is a page split.

a1o 3y ago

I almost never do real printing (to paper), but this looks really easy to get something working. Also the cheatsheet at the end of the article is a super useful summary of the css rules used. Great article to save in case I face having to build something that prints in the future.

persnickety 3y ago

Browser support for printing CSS is spotty. Worse: some features, like footnotes on every page, don't have any equivalent in CSS I know of. Is there any easy to use/hack HTML layouting engine where I could experiment with custom CSS attributes and bridge that gap? Would anything from Servo be suitable? Modifying an entire browser with its bloat is too much effort. There is no JS or cookies on paper (they can be in paper if you wrap them).

kabes 3y ago
Css has support for footnotes, but it's not yet supported by chrome
- webstrand 3y ago
  Can you give some more information? Is it supported by Firefox or Safari? I found https://www.w3.org/TR/css-gcpm-3/#footnotes https://www.w3.org/TR/css-gcpm-3/#footnotes but it seems to be completely unsupported at this time.
  - tingletech 3y ago
    It's implemented in https://pagedjs.org https://pagedjs.org
nicoburns 3y ago
> Is there any easy to use/hack HTML layouting engine where I could experiment with custom CSS attributes and bridge that gap? Would anything from Servo be suitable? Servo could be used for this. You'd want to add support for parsing the CSS properties themselves to the style crate in https://github.com/servo/stylo https://github.com/servo/stylo and then the layout implementation to the layout2020 crate in https://github.com/servo/servo https://github.com/servo/servo. You do effectively get a whole browser though. I'm currently working on building a lighter weight / hackable layout engine based on a combination of https://github.com/servo/stylo https://github.com/servo/stylo (for css parsing and selector resolution), https://github.com/DioxusLabs/taffy https://github.com/DioxusLabs/taffy (for box-level layout) and https://github.com/pop-os/cosmic-text https://github.com/pop-os/cosmic-text (for flow/inline layout). I expect to have something decent in around 6 months Neither of these setups currently have any support for pagination though.

didgeoridoo 3y ago

I just laid out a book using Pagedjs.org. Although there were a few bugs in the preview experience, the final output was perfect, and probably took me a quarter the time it would have in InDesign (which I’m fairly competent in). The real power is in being able to hook up all the templating, CMS APIs, and whatever else you want into your content pipeline. It’s Just HyperText™. I’d go so far to say that if you’re equally comfortable in HTML/CSS and InDesign, Pagedjs is a superior choice for long form layout.

yawnxyz 3y ago
I’ve designed and printed many conference abstract books with PagedJS! Love that thing
strogonoff 3y ago
I wonder how the finer issues of typesetting are handled with print CSS compared to dedicated typesetting software nowadays. CSS is very compelling, but then based on my personal experience as print media designer the likes of InDesign are full of various special tricks (and language-specific, too) for alleviating white space corridors, handling hanging punctuation, hyphenation, etc. that the enterprise-level software tends to accumulate (due to the business model if nothing else).
- sings 3y ago
  It is limited and depends on the browser used to print the document. The most glaring missing feature is CMYK colour. I’ve just set up our publications to use PagedJS, and with a fair amount of hacking I was able to set up a baseline grid. Hyphenation depends on the browser implementation, which is OK for English in recent Chromium. The new text-wrap property has also been helpful. Hanging punctuation is only supported in Safari if I remember correctly. But being able to produce nice looking PDFs from a markdown document, with automated endnotes and table of contents, is a much nicer process than going through InDesign, and I also say this as someone equally comfortable with both. And the result is good enough for our purposes. Here is an example: https://www.lowyinstitute.org/sites/default/files/2024-03/LAVEIL-Papua-New-Guineas-fiscal-decentralisation.pdf https://www.lowyinstitute.org/sites/default/files/2024-03/LA...

fifilura 3y ago

I can't help but feel like this is going full circle. CSS started with print media in mind since this was what was available at the time. Many of these features have been there since the inception. Just that browser support has been lagging. How do you break a table inside a float? Etc.

account-5 3y ago

I'm pretty sure I've used https://github.com/cognitom/paper-css https://github.com/cognitom/paper-css before for generating pdfs via the browser.

schappim 3y ago
I was just coming here to say the same thing about. It has been pretty good for document generation when combined with AWS Lambdas + headless Chrome or wkhtmltopdf (if you don't need modern CSS functionality).

bradgessler 3y ago

Browser support for printing is so bad that I'm going to have to create a native app for https://www.thingybase.com https://www.thingybase.com to have a streamlined workflow of printing labels to a thermal label printer. It works now, but first you have to download a PDF and print that. Google Docs does this too when you hit "Print". I've tried hacks like load the PDF in an iframe and use some JavaScript to print that, but then I get footers with the URL of the webpage, which doesn't work for my purposes. If you work on Chrome/Blink, Safari/Webkit, or Firefox/Mozilla please please please at least get the hacks working! A CSS standard would be great, but really I'd be happy if I could call a function like `windows.print("/document.pdf")` and have it print the PDF without all the footer/headers stuff.

IgorPartola 3y ago
I’ve worked with thermal printers and they are actually quite capable. They have drawing primitives that allow you to lay out basic graphics and the one I was working with even had basic font support. A native driver is definitely the way to go with these.
- bradgessler 3y ago
  > A native driver is definitely the way to go with these. Not if you need to support a bunch of different printers. For me PDF is the way to go, but browsers can't print a PDF via a "Print" button within the HTML, so instead I have to build apps that download the PDF and print it directly through operating system APIs.
  - djbusby 3y ago
    Open the PDF in a new window and call window.print() on it.
    - bradgessler 3y ago
      That doesn’t work on iOS—you get the URL in the footer at the bottom of the page.

lofenfew 3y ago

It's interesting that he skips over any fancy css tricks to get headers and footers and goes straight to generating from js. One advantage of this is that you can add page numbers and such to each header, which is totally impossible with css hacks. But if you're fine going without that, it seems like there are methods that produce mostly acceptable results with less effort than the javascript solution he proposes.

voussoir 3y ago
I'm sure there are smarter ways to do some of the things I'm doing. Could you let me know what fancy tricks you're referring to, perhaps ::before and ::after with content properties? These generator pages already rely on javascript to put our database data onto the page, whether by URL parameters or API calls, so once I'm in that mode, yeah I'm generating everything with article.innerHTML = '...' to get a bulk template on the page, and a series of createElement/append to make smaller elements like table rows.
- lofenfew 3y ago
  I just did a quick search, so I don't claim to be an expert. The two main methods seem to be thead/tfoot and position:fixed. I didn't mean to imply that this are smarter/better, but they might be easier in certain conditions.
  - voussoir 3y ago
    Oh, I see, thanks. I did figure out that thead automatically repeats across pages, but I also had to repeat other stuff outside the table, like letterhead. I also made this sample file that shows thead repeating, but since it's a single continuous table it doesn't preview very well and spills out of the 8.5x11 article element. I'm not sure how I would take advantage of the browser's automatic thead/tfoot repeat while also accurately previewing the result in the browser, especially with more elements below the table. https://voussoir.net/writing/css_for_printing/sample_longtable.html https://voussoir.net/writing/css_for_printing/sample_longtab... But I'm open to suggestions that would spare me from splitting the table after a height threshold!

newhotelowner 3y ago

CSS/html is way faster to build a lot of things for printing. It's very flexible to make changes. Not huge files like Photoshop or indesign. Printing to PDF gets you vector output. Just last week, I built a print ad for a local visitor bureau placement. Pretty much anything I need for a high-quality print job, I use html/css.

thegeomaster 3y ago
If that's all you know, it can be a reasonable alternative. But for most professional print use-cases it's woefully inadequate. Starting from the awkward box model for layout, down to the very bare-bones typography support.

Yesman85 3y ago

It's great really, we switched all our doc generation from questpdf to puppeteersharp. You can simply feed it a static HTML and css and it print perfectly. Takes so much less time messing with it.

atum47 3y ago

Back in 2015 i was the solo developer for a "social network" to offer jobs and hire people. I used this CSS technique so the profile of the job seeker could be printed by the companies as a curriculum (our niche was factory workers, so everyone involved still used paper rather than digital formats). Before that i made a online editor to create certificates for workshops and courses, again used the same technique. Both projects are kinda dead now, but it was nice getting everything done using only vanilla JS and CSS. Very powerful stuff.

niederman 3y ago

Just typeset a webnovel for print so I could read it physically using Pandoc, CSS, and Prince and honestly the experience was really nice. Way better than any other option I'm aware of.

qwerty456127 3y ago

I've always (like in over a decade) knew CSS as by far the easiest way to print from any app I would build. Just output some concise HTML+CSS and a reasonably pretty printable document is ready. Perhaps learning PostScript or TeX could give me more but I found these prohibitively hard as long as I want to print something custom and not the template everyone uses. Meanwhile writing printer-optimized CSS typesetting just took me some minutes although I never had to dedicate any time to study it seriously (some w3schools was enough).

foota 3y ago

I tried to do this a number of years ago. My advice? Give up and use a generated PDF.

Brajeshwar 3y ago

One might be interested in looking at the Gutenberg CSS Print Framework. It hasn't failed me in all the years that I have used, recommended, and included in most needs. https://github.com/BafS/Gutenberg https://github.com/BafS/Gutenberg

hanniabu 3y ago

I had no idea you could specify size in inches with css

voussoir 3y ago
There are way more length units than you'd expect! https://developer.mozilla.org/en-US/docs/Web/CSS/length https://developer.mozilla.org/en-US/docs/Web/CSS/length

Semaphor 3y ago

We use HTML & CSS to create invoices and some eBooks, one resource I love is print-css.rocks [0] which has a comparison of tools available (for us Weasyprint [1] is good enough) and also several tutorials of how to accomplish tasks. [0] https://print-css.rocks/ https://print-css.rocks/ [1]: https://weasyprint.org/ https://weasyprint.org/

NewJazz 3y ago
Hey I also use weasyprint to generate invoices! Small world.

ars 3y ago

You can add some code into CSS that will tell you if someone printed your webpage (or at least print-previewed). Make a tracking background image that only loads in the print version of the css.

Lammy 3y ago

A few of my favorite print styles, from my personal site: h2,h3,h4,h5,h6,h7,h8 {break-after: avoid-page;} img, svg, table, canvas {break-inside: avoid;} a::after {content: " (" attr(href) ")";} Explanation: - Avoid printing section headers at the bottom of one page with the section content left headerless at the top of the next page. - Prefer printing graphics and figures on whole pages instead of split across pages. - Print out the URL of every hyperlink instead of having links only as useless underlined text.

sandreas 3y ago
Awesome, thank you. I don't think that h7 and h8 exist?! Are you sure this is necessary? And why no h1? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements https://developer.mozilla.org/en-US/docs/Web/HTML/Element/He...
- Lammy 3y ago
  Not sure how those got in there and git-blame is not helpful. Maybe just me typing out as many as I could imagine? :v No h1 because there is only ever one of those and it's at the top of the first page.
  - sandreas 3y ago
    Thanks :-)
    - kill_nate_kill 3y ago
      While they're not valid, I believe the browser will still respect non standard headings. The browser will treat them like non semantic elements (similar to a div), but you can kind of make it legit with a couple different aria attributes. I would recommend staying within the standard heading sizes though.
voussoir 3y ago
Wow, great use of the attr function, thank you!

slim 3y ago

Also if you print from Firefox and get full pages missing (!!) or empty, it's not a mistake you made, it's a +15 years firefox bug

moontear 3y ago

The code seems very opinionated, at least it is pretty focused on US needs. I don’t want someone to tell me what paper I should use (size: Letter portrait). Frankly I don’t own letter-sized paper. Also all sizes are in inches, which I don’t calculate in and wouldn’t know whether still sensible margins when printing on a different paper size.

FearNotDaniel 3y ago
> You should use Letter or A4 as appropriate for your relationship with the metric system. That's pretty clearly stated near the top of the article. As a European, if I wrote a similar post I would do it all in metric and trust that my US readers were smart enough to substitute the units of their choice without whining about it. The concepts would not change, and a quick google would tell you that an inch is approx 25mm, which is enough for you to understand what's going on.
voussoir 3y ago
I have been making these generators for my workplace, so the project scope is very narrow. You can follow the idea with any dimensions you need. If you want to use these techniques on a global site, I think you could use multiple @page styles and switch between them with a dropdown like I did with portrait/landscape. Although A4 and letter are very close in size.

zubairq 3y ago

Nice, I had no idea that CSS had elements to allow printing to paper! Thanks

ggm 3y ago

Cut marks! Cut marks and fold marks for n-up 2 sided are very helpful.

moritonal 3y ago

Having been doing this for a few years, the answer currently requires JS. A certain amount of CSS is needed, but JS is required for the following realistic features. Table of contents, reflowing content across pages, templated footer, randomly selected background elements on pages. This let's the Ctrl-P version locally match up with a headless Chromium render, allowing for much easier testing.

jillesvangurp 3y ago

I recently setup a label printer where the labels get printed from a full page app to a Brother label printer that takes rolls of 62mm wide and 30 meters long. The printer cuts after each page break. It's a regular usb printer but with a funny page size. Also, Brother's website for finding the mac drivers is a bit of a maze of misdirection that tries to get you to install their extremely shitty application. In the end I found a 3rd party website with a working printer driver for this thing. After a bit of tinkering, I was able to print 6.2x12.4cm labels with a QR code. Really fun to watch it spit out these stickers. Each sticker has a unique QR code with the printed code in text form below it. Some gotchas: - you have to use margin 0 to hide the ugly browser headers that get added in the margin otherwise. - Firefox has no print preview. This makes testing a bit hard. I used Chrome for testing this in the end. - To print, you replace the dom tree with your print page, invoke print, and then copy back the app's root node from javascript. This is ugly as it shows the print page below your print dialog while that is open. I've not found a better way to do this. I guess I can do some non page layout that shows while that happens. Hacky but it works. - I've yet to make this work in landscape mode where the page is vertical 62x31 layout to print small stickers. @page { margin: 0mm; size: 124mm 62mm; size: portrait; .sticker { padding: 4mm; page-break-after: always; } } The rest is just usual html layout. I used a simple flex row with two elements. Print quality is surprisingly good. Cost per sticker is around 0.3 cents per sticker. Amazing value.

euroderf 3y ago
> Brother's website for finding the mac drivers is a bit of a maze of misdirection that tries to get you to install their extremely shitty application. That seems surprising, considering how no-muss no-fuss their hardware & cartridges are. (As compared to, say, H-P.)
- jillesvangurp 3y ago
  I think it's just regular incompetence for hardware companies not really being on top of their software game.
  - 3y ago

dudefeliciano 3y ago

related "How to write a book with CSS" talk by Hakon Wium, the OG CSS developer: https://www.wearedevelopers.com/en/videos/172/how-to-write-a-book-with-css https://www.wearedevelopers.com/en/videos/172/how-to-write-a... (no need to log in, just inspect the login overlay and remove it and the video will play)

scoofy 3y ago

I've worked with this extensively on my site golfcourse.wiki, because I've build a tool that generates printable course books with CSS. I originally was going to generate PDFs, but my backend is in python, and all the PDF generators have some issues with SVG images, especially with gradients. The site is a wiki, so SVG seemed like the best way to map courses while allowing them to easily be edited down the road. Since CSS and SVG work hand in hand, I decided to start working on that, and it's actually turned out okay. If you want to see it in action, you can pop over and look at any of the courses marked with a blue or red flag on the homepage, but a very good example is Pasatiempo, here: https://golfcourse.wiki/print_options/course/pasatiempo_golf_club-santa_cruz https://golfcourse.wiki/print_options/course/pasatiempo_golf...

nicbou 3y ago

It's worth noting that Safari completely ignores page margins.

bepero 3y ago

Here is also: https://github.com/vladocar/Hartija---CSS-Print-Framework https://github.com/vladocar/Hartija---CSS-Print-Framework

wiradikusuma 3y ago

I'm writing a book (https://news.ycombinator.com/item?id=38433668 https://news.ycombinator.com/item?id=38433668) and for the case study I built https://momenial.com https://momenial.com to generate certificates for webinar attendees. The certificate templates are HTML files, and I use https://github.com/cognitom/paper-css https://github.com/cognitom/paper-css to make them print-friendly.

mstijak 3y ago

My company is working on a product simplifying the creation of printable PDFs filled with tables and charts, leveraging a visual designer and API. It helps with the usual headaches like page breaking, page numbering, table of contents, etc. https://www.cx-reports.com/ https://www.cx-reports.com/ We're working closely with early adopters at this stage.

Timwi 3y ago
-
- mstijak 3y ago
  Fixed. Thanks!

sam_goody 3y ago

I appreciated the read, but in practice I just link to the css file in Paper-CSS. It may not be a lot of CSS, but it is much easier for me to just include the page and have it deal with my page size than to review articles like this when I want to print. Edit: when I linked to the repo, my comment disappeared. You can find Paper-CSS by searching Github or Node for cognitom/paper-css. Would love a more experienced HN'ers tip to how to use links in comments w/o causing the comments to disappear.

hashhar 3y ago

Haha one of the examples has this text: By reading this sentence, you hereby agree to all terms and conditions presented by voussoir.net, including but not limited to terms which entitle voussoir.net to a fraction not less than forty (40) percent (%) of your monthly income from now until an as-yet undetermined time not less than thirty six (36) months from the present date.

isp 3y ago
One of the other examples [0] features a "random number" which might not be entirely random [1]. [0] https://voussoir.net/writing/css_for_printing/#media_print https://voussoir.net/writing/css_for_printing/#media_print [1] https://en.wikipedia.org/wiki/AACS_encryption_key_controversy https://en.wikipedia.org/wiki/AACS_encryption_key_controvers...

anotheryou 3y ago

The problem I could not solve: page numbers that start after the title. Can't access anything about page breaks via js and CSS is very limited.

Liskni_si 3y ago
Should be doable using paged.js - https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/91 https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/91
- anotheryou 3y ago
  uh great! thanks

makkesk8 3y ago

Having gone down the rabbit hole of creating printable media/pages from html/css, I also discovered paged media. Generating printable pdfs using only the standard is very cumbersome but thankfully pagedjs[1] exists, which makes this a breeze. [1] https://github.com/pagedjs/pagedjs https://github.com/pagedjs/pagedjs

dirkk0 3y ago

If you want page numbers in your printed html, here is an example: https://dirkk0.neocities.org/printcss/ https://dirkk0.neocities.org/printcss/

mooreds 3y ago

I worked at a startup years ago that was all about clean printing (plus add space). Layout was a challenging technical problem in the late 2000s. RIP Format Dynamics.

eternityforest 3y ago

I use a .pagebreak class that puts a page break before stuff. Then I tell it not to break sections and articles unnecessarily , and let the browser figure it out . Not a fan of embedding specific sizes into the CSS, I often(Well, not really often as I'm only printing a few times a year) like to print A5. A4 makes it annoying to try to hold a binder in one hand and takes more space than it really needs to.