
Show HN: Gutenberg – Modern CSS framework to print the web correctly - BafS
https://github.com/BafS/Gutenberg
======
Jaruzel
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...

~~~
Roritharr
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/](https://www.princexml.com/) ) , which is
commercial and rather pricey.

~~~
addedlovely
Checkout [https://docraptor.com/](https://docraptor.com/) \- it's great - is
commercial but affordable.

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

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

------
hoschicz
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)

~~~
mcbetz
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](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](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.

~~~
e12e
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](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.

~~~
deathanatos
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/](http://packages.ubuntu.com/xenial/text/)
)

~~~
lotsofcows
Normally /usr/share/dict/words

Def on my Mac and CentOS boxes.

Package is words.noarch for the latter.

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

------
teekno
Is there any relation to
[https://github.com/matejlatin/Gutenberg](https://github.com/matejlatin/Gutenberg)?

------
jehna1
It makes a pretty good layout even on screen:

[http://jsbin.com/relaranujo/2](http://jsbin.com/relaranujo/2)

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

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

[http://collatenotes.com](http://collatenotes.com)

------
hermiti
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...](https://www.smashingmagazine.com/2015/01/designing-for-print-with-
css/)

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

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

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

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

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

~~~
dwringer
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...)

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

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

~~~
BafS
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!

------
jwilk
Not a great name choice.

------
majewsky
Nice!

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

