Show HN: Gutenberg – Modern CSS framework to print the web correctly | Hacker News Reader

Show HN: Gutenberg – Modern CSS framework to print the web correctly

github.com

305 pointsBafS59 comments

Wow, today I learned (via this) about:

  page-break-before:
  page-break-after:

Did not know these were in CSS3 !

It's always worth poking around in others peoples code...

I don't think this is CSS3, it has been arround for ages ( you will be using this when convert html pages to pdf also ;) )

IE 4.0 supports it...

Yep. Before that we used to wrap things in table cells to simulate page-break-avoid. This mostly worked. "Orphan" control was impossible at the time. I think most of the browsers do an ok job. Price ml does it all. Including things like toc generation and forcing sections to start on the front of a piece of paper or have a gutter in the "inside" of the page.

I recall using those in 2002 or somewhere around that time. :)

And yet almost every time I try to print a page, it thinks it's ok to just split an image over two pages. It baffles me that this is the default.

When I've seen this it has been browser specific, though I can't remember which way around (in fact it might be sometimes one that does and sometimes the same one that doesn't...) so if you get odd printing results with Chrome try in FF (or vice versa, or add Edge into the mix if on Windows, or ...).

Printing can be quite a faf from web pages.

Yes, CSS3 has a new module CSS Paged Media Module [0]. This should eventually replace XSL-FO for formatting for print. What I don't understand is who finds these useful anymore? except big enterprises like telecoms with dying legacy requirements. Those requirements will get totally replaced by web... Maybe there is still a niche for archiving with PDF/A

*Maybe publishers that don't want to be locked in with a single formatting tool (indesign)

[0]https://www.w3.org/TR/css3-page/

The problem with those, the last time i checked, was that most html to pdf solutions don't support them. The only one I could find was Prince ( https://www.princexml.com/ ) , which is commercial and rather pricey.

What about Chrome? File -> Print -> Save as PDF. Works fine with these print properties as far as I can tell.

I'm pretty sure that wkhtmltopdf supported these too, last time I used it, though it's been quite a while now.

dompdf supports this.

PhantomJS supports it too (either through `html-pdf` or manually).

I was looking into PhantomJS, this must be added since then. Great!

Checkout https://docraptor.com/ - it's great - is commercial but affordable.

This looks interesting. Thanks, we are going to try it out.

Docraptor is just the SaaS version of PrinceXML, the underlying software is the same. Much more affordable for small jobs though!

DocRaptor is based on PrinceXML, but also includes a much more advanced JavaScript engine

webkittopdf supported them just fine. And so does phantomjs when printing pdfs IIRC.

It's too bad webkittopdf is macOS only.

There is a wkhtml thing on Linux, but I use Phantom for this

Also on windows.

http://wkhtmltopdf.org/downloads.html

Webkittopdf (or however it's called) is cross platform, based on the Qt port of Webkit.

weasyprint supports it

Printfriendly PDF API supports it. https://www.printfriendly.com/api

I am using wkhtmltopdf for turning HTML orders to PDF for my company, I have no page break problems and printing is working like charm.

There's a lot of nice things you can do in CSS for printing. I worked on a project to make web articles printable. The last version focused more on doing the printing via the browser using CSS for creating columns. Here's a video demo: https://www.youtube.com/watch?v=854Csokl3QA and some notes in our blog: http://blog.fivefilters.org/post/75603097111/pdf-newspaper-2...

The software itself is free to try at http://fivefilters.org/pdf-newspaper/

What is it useful for? I saw someone on medium saying they would pay for software that turns his posts into a book but more than that?

A better reading experience. If you like to print articles to read offline, you can either rely on the publisher's own print stylesheet, or use an application like ours.

It uses the same formatting for all articles and adds columns. It's not a CSS framework like Gutenberg, the one posted here, which is intended for publishers to make their own content more printer friendly. PDF Newspaper tries to extract the relevant article content from any given page and then apply its own standard formatting on that and make it printable with our own printer stylesheet.

Yes, columnar reading is something special. Reminds me of ACM communication magazine. Though this must be a very small niche with web being so convenient - just click any link and read it...

Columns are tricky.

Once I tried to convert a paper in ACM style into HTML [0]. It seems to work today. A few years ago, Chrome broke columns in printing mode.

What I still cannot do is the copyright notice, which for ACM style must be at the bottom of the first column (see example [1]). This would require something like absolute positioning relative to a printed page.

[0] http://pp.ipd.kit.edu/~zwinkau/acm_html/test.html [1] http://pp.ipd.kit.edu/uploads/publikationen/buchwald10cases....

I didn't find a way to fix something at the bottom of each printed page with CSS either. Not sure if there's a solution today. I looked into it last in 2014.

And yes, Chrome had removed multi-column printing. It's supported again now. There's a bug report last updated in March 2016: https://bugs.chromium.org/p/chromium/issues/detail?id=99358

Where are word breaks (word splitting if not fit for page), justify alignment? Variable spaces between letters?

Is this possible with CSS? I'm trying to typeset a long text on the web and I'm not happy about how it looks compared to LaTeX and PDF. (it's straight out awful)

The CSS text module has some support for various text manipulations (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text) but it's obviously not quite as extensive as LaTeX or InDesign or whatever.

Unfortunately, `hyphens: auto;` is still not supported on Chrome Windows. I still recommend using it, as it brings nicer layout to the ones you can see it (http://caniuse.com/#search=hyphens) and does not break the layout for others.

CSS Text 4 drafts might bring massive improvements for text handling and will give more fine grained controls over hyphenation, such as `hyphenate-limit-lines` (https://drafts.csswg.org/css-text-4/#hyphenate-line-limits), but obviously this is nothing that will make it to stable browsers in the near future. Still, the changes that might come for CSS with this draft would bring it a lot closer to LaTeX or InDesign.

I find it sad that what has been holding this back for years is "how will we download dictionaries":

https://bugs.chromium.org/p/chromium/issues/detail?id=605840

Especially considering LaTeX had this right for decades - and it is one of the major issues for good and pleasant readability... sigh.

I don't even understand their logic here:

> Linux and Windows don't have built-in dictionaries.

Every Linux distribution I've ever been on has had a dictionary. I'm not sure what package it's in, but the point is that packages exist, and can be depended on (or, although I dislike this, vendored in).

(Is it perhaps that they need a dictionary with the syllabic breakdown of the word? IDK if the normal dictionaries will give you that, or if it can be computed or heuristically determined?)

(Edit: e.g., on Ubuntu, the "text" category includes a number of dictionaries in various languages … http://packages.ubuntu.com/xenial/text/ )

Normally /usr/share/dict/words

Def on my Mac and CentOS boxes.

Package is words.noarch for the latter.

The justified alignment looks sub-par in places, like in the middle of the first paragraph of the example pages. Flush left alignment normally is the better option, if you don't have a hyphenation engine.

Browser inserted Soft-Hyphens could fix this, but since they are language dependent browser support is spotty: https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Sugges...

By itself most browsers can break soft-hyphens pretty reliable, but they have to be generated first: See https://github.com/mnater/Hyphenator or https://github.com/bramstein/hypher

It really baffles me that some formatting engines require that soft-hyphens be pre-inserted. For eBooks, particularly. Apparently Kindle supports hyphenation only if the book has explicit soft-hyphens. Google Books doesn't seem to support it at all. Meanwhile, FBReader does a perfect job of hyphenating arbitrary ePubs. TeX has done it right since what, 1983?

Yes, hyphenation is language-specific, but if your application is laying out blocks of text, a set of hyphenation tables is a basic part of language support.

This just gave me an idea.

It might be useful to do some heuristics and see if a page has a good "print layout" and activate that for a reader mode in the browser via a plugin.

Is there any relation to https://github.com/matejlatin/Gutenberg?

It makes a pretty good layout even on screen:

http://jsbin.com/relaranujo/2

That's nice. I find that printing and reviewing my own blog articles helps a lot in catching mistakes etc. I will see if I can integrate that into my website.

Hey this is great. I'm going to add this to the print preview mode in Collate!

http://collatenotes.com

If you could implement headers and footers into this using paged media and provide examples that would be golden. I could be missing where that was done.

https://www.smashingmagazine.com/2015/01/designing-for-print...

A LICENSE file, please? (Though package.json does declare MIT; a LICENSE file should also allow GitHub to pick it up.)

If this is a concern, you should be asking in the right place. https://github.com/BafS/Gutenberg/issues/new

Good point! (Someone beat me to it, and the author has already fixed it, too.)

Awesome idea. I wonder if this could be generalized to a chrome extension, to override styles on Wikipedia or whatever.

Please!!!! Unprintable web pages abound. They make my blood boil.

I've never understood why prominent websites don't always provide a print media stylesheet along with their normal styles. Hopefully frameworks like this will become more common as pages come to be viewed through increasingly diverse media (although I'm not sure "print" is on the up-and-up...)

This is nice, though I was hoping to find a framework for print-based layout when I saw this. I have projects that utilize the printer as an output and I struggle to find the proper way to lay out the content effectively. I have had hopes for flexbox, but it seems to fail in various parts of the pipeline.

When trying to print the modern style, I'm only getting a blank page with lines: https://imgur.com/a/MoGnf

Same here.

Just hit Esc and try printing again. I had the same issue myself.

It is because the fonts are not loaded. The print mode handles it in this way, I will see how I can fix that, thanks!

Not a great name choice.

Nice!

Since the submitted appears to be the author, can we have "Show HN" added to the title?

Reply on news.ycombinator.com