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

61–70 of 139 posts

Re: CSS for printing to paper

#61

Post by strogonoff »

dylan604 wrote: post #59
strogonoff wrote: post #41

Earlier quoted context omitted.

I wonder how the finer issues of typesetting are handled with print CSS compared to dedicated typesetting software nowadays. CSS is very compelling, but then based on my personal experience as print media designer the likes of InDesign are full of various special tricks (and language-specific, too) for alleviating white space corridors, handling hanging punctuation, hyphenation, etc. that the enterprise-level softwar…

The lack of manual kerning to avoid rivers of white space is something that I wouldn't even begin to know how to tackle in CSS. Maybe I'm just too muscle memory familiar with the tools in DTP vs CSS for Web, that I'm just not familiar with the proper CSS for it. The wysiwyg of DTP apps is like pure training wheels or a warm fuzzy blanket in getting work done

A large amount of   and spans with letter-spacing or font-kerning can help, but no one’s going to do that (unless you go for an extremely fixed layout or engage JavaScript, which I would consider in poor taste for these purposes).

I concur on the warm fuzzy blanket of DTP software, personally.

Re: CSS for printing to paper

#62

Post by Semaphor »

We use HTML & CSS to create invoices and some eBooks, one resource I love is print-css.rocks [0] which has a comparison of tools available (for us Weasyprint [1] is good enough) and also several tutorials of how to accomplish tasks.

[0] https://print-css.rocks/

[1]: https://weasyprint.org/

Re: CSS for printing to paper

#63

Post by NewJazz »

Semaphor wrote: post #62

We use HTML & CSS to create invoices and some eBooks, one resource I love is print-css.rocks [0] which has a comparison of tools available (for us Weasyprint [1] is good enough) and also several tutorials of how to accomplish tasks. [0] https://print-css.rocks/ [1]: https://weasyprint.org/

Hey I also use weasyprint to generate invoices! Small world.

Re: CSS for printing to paper

#64

Post by strogonoff »

sings wrote: post #54
strogonoff wrote: post #41

Earlier quoted context omitted.

I wonder how the finer issues of typesetting are handled with print CSS compared to dedicated typesetting software nowadays. CSS is very compelling, but then based on my personal experience as print media designer the likes of InDesign are full of various special tricks (and language-specific, too) for alleviating white space corridors, handling hanging punctuation, hyphenation, etc. that the enterprise-level softwar…

It is limited and depends on the browser used to print the document. The most glaring missing feature is CMYK colour. I’ve just set up our publications to use PagedJS, and with a fair amount of hacking I was able to set up a baseline grid. Hyphenation depends on the browser implementation, which is OK for English in recent Chromium. The new text-wrap property has also been helpful. Hanging punctuation is only support…

I agree that InDesign generally is clunky (the same reason it has a lot of typesetting black magic: business model where you make money by satisfying requests of perfectionist designers and their managers). However, in the past, while I was still doing relevant work, I had mild success abstracting some of it out by defining a template and populating it with data imported from JSON.

Now I’m not using ID much, and struggling with generating PDFs from HTML, so I really appreciated the example you gave. Great work!

Re: CSS for printing to paper

#65

Post by dylan604 »

strogonoff wrote: post #61
dylan604 wrote: post #59

Earlier quoted context omitted.

The lack of manual kerning to avoid rivers of white space is something that I wouldn't even begin to know how to tackle in CSS. Maybe I'm just too muscle memory familiar with the tools in DTP vs CSS for Web, that I'm just not familiar with the proper CSS for it. The wysiwyg of DTP apps is like pure training wheels or a warm fuzzy blanket in getting work done

A large amount of   and spans with letter-spacing or font-kerning can help, but no one’s going to do that (unless you go for an extremely fixed layout or engage JavaScript, which I would consider in poor taste for these purposes). I concur on the warm fuzzy blanket of DTP software, personally.

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?

Re: CSS for printing to paper

#66

Post by delhanty »

strogonoff wrote: post #41
didgeoridoo wrote: post #8

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 wonder how the finer issues of typesetting are handled with print CSS compared to dedicated typesetting software nowadays. CSS is very compelling, but then based on my personal experience as print media designer the likes of InDesign are full of various special tricks (and language-specific, too) for alleviating white space corridors, handling hanging punctuation, hyphenation, etc. that the enterprise-level softwar…

> but then based on my personal experience as print media designer the likes of InDesign are full of various special tricks (and language-specific, too)

That seems to concur with an informative article by AtaDistance from 2019 that I read the other day [0]:

> ...

> The result was InDesign 1.0 J which shipped in early 2001. InDesign J was the first, and only, major software application developed outside of Japan that followed the Japanese Industrial Standard (JIS) X4051 typesetting and composition specification (the kumihan “bible”) and traditional Japanese print production methods.

> I have covered some basics of Japanese layout before, but a review is helpful for first time readers. I’ll use a mix of my material and McCully’s presentation to explain.

> ...

> Western created DTP layout is graphics-driven and calculated by margins and font baselines. The western baseline typography model and font metrics is how PostScript and OpenType fonts, and all layout engines evolved. Adobe was well acquainted with the shortcomings of their own font technology and InDesign J got around the problems by adding proprietary Kanji virtual body font metrics and Japanese line break algorithms. None of this exists as an open standard that benefits everybody.

> That is fine for InDesign and print production, but web layout and typography via CSS is an entirely different world. There are 3 huge obstacles for good vertical Japanese typography on the web:

> * No font metrics for virtual body/em-box glyph space placement: everything has to be accomplished with baseline metrics

> * No reliable space control

> * No reliable line breaks

[0] https://atadistance.net/2019/04/26/the-state-of-css-japanese...

Re: CSS for printing to paper

#67

Post by ars »

You can add some code into CSS that will tell you if someone printed your webpage (or at least print-previewed). Make a tracking background image that only loads in the print version of the css.

Re: CSS for printing to paper

#68

Post by strogonoff »

delhanty wrote: post #66
strogonoff wrote: post #41

Earlier quoted context omitted.

I wonder how the finer issues of typesetting are handled with print CSS compared to dedicated typesetting software nowadays. CSS is very compelling, but then based on my personal experience as print media designer the likes of InDesign are full of various special tricks (and language-specific, too) for alleviating white space corridors, handling hanging punctuation, hyphenation, etc. that the enterprise-level softwar…

> but then based on my personal experience as print media designer the likes of InDesign are full of various special tricks (and language-specific, too) That seems to concur with an informative article by AtaDistance from 2019 that I read the other day [0]: > ... > The result was InDesign 1.0 J which shipped in early 2001. InDesign J was the first, and only, major software application developed outside of Japan that…

This brings me back to when I did a gig typesetting a Japanese language book (short, maybe couple dozens of pages) once. I don’t even speak Japanese all that well, the guy basically looked for someone with IDJ (which I had coincidentally) and basic skill to operate it. The software handles most of the magic. As a designer, I won’t pretend I didn’t feel a little used.

Re: CSS for printing to paper

#69

Post by strogonoff »

dylan604 wrote: post #65
strogonoff wrote: post #61

Earlier quoted context omitted.

A large amount of   and spans with letter-spacing or font-kerning can help, but no one’s going to do that (unless you go for an extremely fixed layout or engage JavaScript, which I would consider in poor taste for these purposes). I concur on the warm fuzzy blanket of DTP software, personally.

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.

Re: CSS for printing to paper

#70

Post by tingletech »

SparkyMcUnicorn wrote: post #36
tingletech wrote: post #33

Earlier quoted context omitted.

@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

paged.js is a polyfill that implements this. I'm not aware of any browser that support this.

Why do you call paged.js a "hack"?

Post reply on HN