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

71–80 of 139 posts

Re: CSS for printing to paper

#71

Post by micw »

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…

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

Re: CSS for printing to paper

#72

Post by Lammy »

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.

Re: CSS for printing to paper

#73

Post by capitainenemo »

micw wrote: post #71
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…

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…

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.

Re: CSS for printing to paper

#74

Post by capitainenemo »

herpdyderp wrote: post #3

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.

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.

Re: CSS for printing to paper

#75

Post by sandreas »

Lammy wrote: post #72

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

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/He...

Re: CSS for printing to paper

#76

Post by voussoir »

Lammy wrote: post #72

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

Wow, great use of the attr function, thank you!

Re: CSS for printing to paper

#77

Post by Lammy »

sandreas wrote: post #75
Lammy wrote: post #72

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

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/He...

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.

Re: CSS for printing to paper

#78

Post by sandreas »

Lammy wrote: post #77
sandreas wrote: post #75

Earlier quoted context omitted.

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/He...

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.

Thanks :-)

Re: CSS for printing to paper

#79

Post by dylan604 »

strogonoff wrote: post #69
dylan604 wrote: post #65

Earlier quoted context omitted.

exactly. that sounds like a pretty good description of hell to me. i much prefer highlighting the text, alt/option-left/right to adjust the kerning in real time. this type of description of using CSS for DTP reminds me of using tables for layout before CSS. it was a bullshit solution waiting for something better. only, in this case, DTP software is already there and better. so why would someone do this to themselves?

I imagine to avoid paying expensive license fees, to stick with OSS out of principle, and/or to implement various fun integrations.

oh to be young and a dreamer. now, i just want to get work done with the most efficient tool for the job. that kind of hell is for the young
Post reply on HN