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

Wow, today I learned (via this) about:<p><pre><code> page-break-before: page-break-after:</code></pre> Did not know these were in CSS3 !<p>It&#x27;s always worth poking around in others peoples code...

Where are word breaks (word splitting if not fit for page), justify alignment? Variable spaces between letters?<p>Is this possible with CSS? I&#x27;m trying to typeset a long text on the web and I&#x27;m not happy about how it looks compared to LaTeX and PDF. (it&#x27;s straight out awful)

This just gave me an idea.<p>It might be useful to do some heuristics and see if a page has a good &quot;print layout&quot; and activate that for a reader mode in the browser via a plugin.

Is there any relation to <a href="https:&#x2F;&#x2F;github.com&#x2F;matejlatin&#x2F;Gutenberg" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;matejlatin&#x2F;Gutenberg</a>?

It makes a pretty good layout even on screen:<p><a href="http:&#x2F;&#x2F;jsbin.com&#x2F;relaranujo&#x2F;2" rel="nofollow">http:&#x2F;&#x2F;jsbin.com&#x2F;relaranujo&#x2F;2</a>

That&#x27;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&#x27;m going to add this to the print preview mode in Collate!<p><a href="http:&#x2F;&#x2F;collatenotes.com" rel="nofollow">http:&#x2F;&#x2F;collatenotes.com</a>

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.<p><a href="https:&#x2F;&#x2F;www.smashingmagazine.com&#x2F;2015&#x2F;01&#x2F;designing-for-print-with-css&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.smashingmagazine.com&#x2F;2015&#x2F;01&#x2F;designing-for-print...</a>

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

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

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&#x27;m only getting a blank page with lines: <a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;MoGnf" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;MoGnf</a>

Not a great name choice.

Nice!<p>Since the submitted appears to be the author, can we have &quot;Show HN&quot; added to the title?