Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS for printing to paper

voussoir.net

Post reply on HN
Print view View original

31–40 of 139 posts

Re: CSS for printing to paper

#31

Post by tingletech »

persnickety wrote: post #7

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…

https://pagedjs.org has a polyfill that implements https://www.w3.org/TR/css-gcpm-3/#footnotes

Re: CSS for printing to paper

#32

Post by tingletech »

webstrand wrote: post #18
kabes wrote: post #12

Earlier quoted context omitted.

Css has support for footnotes, but it's not yet supported by chrome

Can you give some more information? Is it supported by Firefox or Safari? I found https://www.w3.org/TR/css-gcpm-3/#footnotes but it seems to be completely unsupported at this time.

It's implemented in https://pagedjs.org

Re: CSS for printing to paper

#33

Post by tingletech »

lofenfew wrote: post #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.

    @media print {
      @page {
        @bottom-center { content: counter(page) }
      }
works with https://pagedjs.org

Re: CSS for printing to paper

#34

Post by atum47 »

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.

Re: CSS for printing to paper

#35

Post by spystath »

persnickety wrote: post #7

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…

You don't have to use a browser. I had very good results with Weasyprint [0]. And there's also PrinceXML [1] if you're willing to pay.

[0]: https://weasyprint.org/ [1]: https://www.princexml.com/

Re: CSS for printing to paper

#36

Post by SparkyMcUnicorn »

tingletech wrote: post #33
lofenfew wrote: post #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.

@media print { @page { @bottom-center { content: counter(page) } } works with https://pagedjs.org

And it's not just a Paged.js thing. No "hacks" necessary.

https://www.w3.org/TR/css-page-3/#page-based-counters

Re: CSS for printing to paper

#37

Post by voussoir »

lofenfew wrote: post #30
voussoir wrote: post #27

Earlier quoted context omitted.

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.

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

But I'm open to suggestions that would spare me from splitting the table after a height threshold!

Re: CSS for printing to paper

#38

Post by djbusby »

bradgessler wrote: post #17
IgorPartola wrote: post #16

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

Open the PDF in a new window and call window.print() on it.

Re: CSS for printing to paper

#39

Post by bradgessler »

djbusby wrote: post #38
bradgessler wrote: post #17

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

Open the PDF in a new window and call window.print() on it.

That doesn’t work on iOS—you get the URL in the footer at the bottom of the page.

Re: CSS for printing to paper

#40

Post by aforwardslash »

nox101 wrote: post #25
persnickety wrote: post #7

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.

I have a library that uses a headless browser to generate pdfs, and supports "manual" (js-based) triggering of event for pdf generation, enabling the use of any client-side composition you like. The implementation is somewhat specific to my template library, but the templates themselves are just a zip file with the html/css/image/js/etc files: https://zipreport.github.io/zipreport/
Post reply on HN