Live data from Hacker News

CSS for printing to paper

voussoir.net

21–30 of 139 posts

Re: CSS for printing to paper

#21

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

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).

Re: CSS for printing to paper

#22

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 equal…

I’ve designed and printed many conference abstract books with PagedJS! Love that thing

Re: CSS for printing to paper

#23
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.

Re: CSS for printing to paper

#24

Browser support for printing is so bad that I'm going to have to create a native app for 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 w…

I realize you're working on the software side rather than the hardware side, and you mentioned you're trying to support existing printers, but your comment reminded me of something I'd like to throw out there:

I would like to have a thermal printer that plugs into the computer via USB and appears as a mass storage device. When you drop an image file (PNG, BMP) into it, it prints it out. A config file would tell the printer what paper stock you have loaded. This way the computer does not need any special drivers, and it would be so stupidly easy to write programs that generate image files to be printed. I think more hardware should take advantage of filesystem operations as a control method.

If someday you ever think about producing a first-party thingybase printer...

Re: CSS for printing to paper

#25

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 pa…

Another issue is ideally, before printing, you'd (I'd) like a chance to re-render canvas based illustrations at resolutions and/or colors that are appropriate for printing. But AFAICT, there's no event "onprint" or something to give a chance to to do that. You can offer a print button in HTML but if the user chooses print directly from the browser you have no chance to respond.

Re: CSS for printing to paper

#26
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.

Re: CSS for printing to paper

#27

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.

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.

Re: CSS for printing to paper

#28
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.

Re: CSS for printing to paper

#29

Browser support for printing is so bad that I'm going to have to create a native app for 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 w…

I realize you're working on the software side rather than the hardware side, and you mentioned you're trying to support existing printers, but your comment reminded me of something I'd like to throw out there: I would like to have a thermal printer that plugs into the computer via USB and appears as a mass storage device. When you drop an image file (PNG, BMP) into it, it prints it out. A config file would tell the p…

Glue + screw a Pi underneath a thermal printer???!?

Re: CSS for printing to paper

#30

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.

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 templa…

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.
Post reply on HN