4 ms·

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 t

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.
- niutech 3y ago
  How does it compare with https://github.com/litehtml/litehtml https://github.com/litehtml/litehtml?
nox101 3y ago
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.
- aforwardslash 3y ago
  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/ https://zipreport.github.io/zipreport/
- StayTrue 3y ago
  There is onbeforeprint.
tingletech 3y ago
https://pagedjs.org https://pagedjs.org has a polyfill that implements https://www.w3.org/TR/css-gcpm-3/#footnotes https://www.w3.org/TR/css-gcpm-3/#footnotes
- bloopernova 3y ago
  I wish HN supported footnotes and citations in comments. It would be pretty cool.
spystath 3y ago
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/ https://weasyprint.org/ [1]: https://www.princexml.com/ https://www.princexml.com/
- MilStdJunkie 3y ago
  Weasy is tight. Unfortunately, my org banned Python across the board, else that would have been my choice.
  - wtracy 3y ago
    I feel like there's a story here.
    - MilStdJunkie 3y ago
      Nothing all that exciting, I'm afraid. The new director of InfoSec must have watched a Cable News Show about supply chain attacks, or something, so suddenly anything with package management - pip, npm, gem, etc - was banned from the official Windows policy. Since his flunkies didn't want to get nailed, they just went ahead and flushed any associated environments/runtimes too. It wasn't super consistent. It was, however, generally a surprise - you'd log in one Monday and whoops! Where'd my Python tooling go? Now, ok, funny thing. Engineering could just get bare metal laptops, whenever they wanted, then blow the thrice-blessed CentOS image on it, and then do whatever the hell. So what happened - and this probably sounds real predictable - they used the CentOS machines to make all sorts of nutty crap, boxed it up, and then sent it back to their "official" Windows machines, now as a locked-in-amber config that never updates, even if five years later it had like fifty zero days in it and none of the libraries were good anymore. I understand it took a new director and a LOT of meetings to explain whitelist mirrors for package managers, but I was long gone by then, even if I had a tiny hand in rolling out the demo whitelist mirror on-prem. Man, I had no idea what I was doing . . it still makes me shudder when I think of the things they were asking me to do.
- Stoo 3y ago
micw 3y ago
I have been creating print labels with plot/cut lines using css and I used browsers to covert it to PDF. The experience was terrible. While all was perfect on my 1-page proof print, both large browsers messed up the final document (with a few hundred labels on several pages). Firefox forgot to render images after a few pages. So on some labels the barcodes were not printed. Chrome looked good at the fist glance. But it turned out that the plot/cut lines (which I created via CSS borders) had been shifted by 1-2mm on _some_ pages. Result was garbage. I finally switched to https://github.com/flyingsaucerproject/flyingsaucer https://github.com/flyingsaucerproject/flyingsaucer which is a high quality HTML/CSS to PDF library. Only drawback is that it only supports CSS 2.1, so some fancy features are not supported like rotating text.
- capitainenemo 3y ago
  Huh. I just did that a few months ago without issues in Chrome and Firefox after a little tweaking. Perhaps it was related to how you centred it? The only issue I had was that in order to print it properly I needed the margins set as small as possible, and doing that operation in the chrome print preview was horribly slow (firefox was fine). And yeah, I put in cut lines too, and was printing ~50 pages. No issues with image rendering in firefox.

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.

niutech 3y ago
How does it compare with https://github.com/litehtml/litehtml https://github.com/litehtml/litehtml?

nox101 3y ago

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.

aforwardslash 3y ago
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/ https://zipreport.github.io/zipreport/
StayTrue 3y ago
There is onbeforeprint.

tingletech 3y ago

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

bloopernova 3y ago
I wish HN supported footnotes and citations in comments. It would be pretty cool.

spystath 3y ago

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/ https://weasyprint.org/ [1]: https://www.princexml.com/ https://www.princexml.com/

MilStdJunkie 3y ago
Weasy is tight. Unfortunately, my org banned Python across the board, else that would have been my choice.
- wtracy 3y ago
  I feel like there's a story here.
  - MilStdJunkie 3y ago
    Nothing all that exciting, I'm afraid. The new director of InfoSec must have watched a Cable News Show about supply chain attacks, or something, so suddenly anything with package management - pip, npm, gem, etc - was banned from the official Windows policy. Since his flunkies didn't want to get nailed, they just went ahead and flushed any associated environments/runtimes too. It wasn't super consistent. It was, however, generally a surprise - you'd log in one Monday and whoops! Where'd my Python tooling go? Now, ok, funny thing. Engineering could just get bare metal laptops, whenever they wanted, then blow the thrice-blessed CentOS image on it, and then do whatever the hell. So what happened - and this probably sounds real predictable - they used the CentOS machines to make all sorts of nutty crap, boxed it up, and then sent it back to their "official" Windows machines, now as a locked-in-amber config that never updates, even if five years later it had like fifty zero days in it and none of the libraries were good anymore. I understand it took a new director and a LOT of meetings to explain whitelist mirrors for package managers, but I was long gone by then, even if I had a tiny hand in rolling out the demo whitelist mirror on-prem. Man, I had no idea what I was doing . . it still makes me shudder when I think of the things they were asking me to do.
Stoo 3y ago

micw 3y ago

I have been creating print labels with plot/cut lines using css and I used browsers to covert it to PDF. The experience was terrible. While all was perfect on my 1-page proof print, both large browsers messed up the final document (with a few hundred labels on several pages). Firefox forgot to render images after a few pages. So on some labels the barcodes were not printed. Chrome looked good at the fist glance. But it turned out that the plot/cut lines (which I created via CSS borders) had been shifted by 1-2mm on _some_ pages. Result was garbage. I finally switched to https://github.com/flyingsaucerproject/flyingsaucer https://github.com/flyingsaucerproject/flyingsaucer which is a high quality HTML/CSS to PDF library. Only drawback is that it only supports CSS 2.1, so some fancy features are not supported like rotating text.

capitainenemo 3y ago
Huh. I just did that a few months ago without issues in Chrome and Firefox after a little tweaking. Perhaps it was related to how you centred it? The only issue I had was that in order to print it properly I needed the margins set as small as possible, and doing that operation in the chrome print preview was horribly slow (firefox was fine). And yeah, I put in cut lines too, and was printing ~50 pages. No issues with image rendering in firefox.