I had no idea you could specify size in inches with css
There are way more length units than you'd expect!
CSS for printing to paper
81–90 of 139 posts
Re: CSS for printing to paper
#82The 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.
Re: CSS for printing to paper
#83Earlier quoted context omitted.
I have this in my SaaS, as well. I built an Electron app that ushers the jobs from the cloud to the thermal printer. It all works until there is a failed job and the queue backs up. I haven't quite figured out how to monitor the queue remotely yet.
I’m probably going to run the app inside of Electron and print from there, so it will be easier in my case for the users to monitor the queue.
If so, then you have a full browser to generate your pdfs on. An approach I have used (more or less):
- have a print.html template page
- use iframe to render and load the page
- either on the print page, or from top frame, call window.print
You can use the aforementioned js libraries to generate footers and such, and use any print css. You can test the print layout in your dev tools, no need to wait for browser preview.
Note that browsers will try to render thead and tfooter elements on every page their parent table spans, that can be very useful.
At work we have a playwright container with express js waiting for incoming requests to load the print.html page and save it as pdf. We're also using volumes so that all data exchange happens in disk and not being passed around in http requests.
PDFs that took maybe 30 seconds with weasy print, now take 5 seconds.
Re: CSS for printing to paper
#84Nice, I had no idea that CSS had elements to allow printing to paper! Thanks
Re: CSS for printing to paper
#85I would love to see some svg thrown into this. Let's kill pdf!
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?
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.
Re: CSS for printing to paper
#86Cut marks! Cut marks and fold marks for n-up 2 sided are very helpful.
Re: CSS for printing to paper
#87Earlier quoted context omitted.
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.
> 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.
Maybe you can use pdf.js from mozilla to render the pdf in the browser and trigger the print function from your js?
Re: CSS for printing to paper
#88Earlier quoted context omitted.
> 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.
Maybe you can use pdf.js from mozilla to render the pdf in the browser and trigger the print function from your js?
I’ve tried that and it didn’t work. It actually didn’t work as well as throwing a PDF at it.
Re: CSS for printing to paper
#89Having 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.
Re: CSS for printing to paper
#90I 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;
}
}