9 ms·

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

305 points by BafS 10y ago

deleted 10y ago
[deleted]
majewsky 10y ago
Nice! Since the submitted appears to be the author, can we have "Show HN" added to the title?
Jaruzel 10y ago
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...
- NicoJuicy 10y ago
  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 ;) )
  - adrianN 10y ago
    IE 4.0 supports it...
    - amichal 10y ago
      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.
  - babuskov 10y ago
    I recall using those in 2002 or somewhere around that time. :)
  - vanderZwan 10y ago
    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.
    - dspillett 10y ago
      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.
  - danvdragos 10y ago
    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/ https://www.w3.org/TR/css3-page/
- Roritharr 10y ago
  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.
  - _phazor 10y ago
    What about Chrome? File -> Print -> Save as PDF. Works fine with these print properties as far as I can tell.
  - matthewmacleod 10y ago
    I'm pretty sure that wkhtmltopdf supported these too, last time I used it, though it's been quite a while now.
  - JoelSanchez 10y ago
    dompdf supports this.
  - haar 10y ago
    PhantomJS supports it too (either through `html-pdf` or manually).
    - Roritharr 10y ago
      I was looking into PhantomJS, this must be added since then. Great!
  - addedlovely 10y ago
    Checkout https://docraptor.com/ https://docraptor.com/ - it's great - is commercial but affordable.
    - TimMeade 10y ago
      This looks interesting. Thanks, we are going to try it out.
    - 10y ago
- k1m 10y ago
  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 https://www.youtube.com/watch?v=854Csokl3QA and some notes in our blog: http://blog.fivefilters.org/post/75603097111/pdf-newspaper-2-5 http://blog.fivefilters.org/post/75603097111/pdf-newspaper-2... The software itself is free to try at http://fivefilters.org/pdf-newspaper/ http://fivefilters.org/pdf-newspaper/
  - danvdragos 10y ago
    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?
    - k1m 10y ago
      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.
      - danvdragos 10y ago
        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...
    - deleted 10y ago
      [deleted]
  - qznc 10y ago
    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 http://pp.ipd.kit.edu/~zwinkau/acm_html/test.html [1] http://pp.ipd.kit.edu/uploads/publikationen/buchwald10cases.pdf http://pp.ipd.kit.edu/uploads/publikationen/buchwald10cases....
laurent123456 10y ago
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
- vntok 10y ago
  Same here.
- keshab 10y ago
  Just hit Esc and try printing again. I had the same issue myself.
- BafS 10y ago
  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!
hoschicz 10y ago
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)
- matthewmacleod 10y ago
  The CSS text module has some support for various text manipulations (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text 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.
- mcbetz 10y ago
  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 10y ago
    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 10y ago
      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/ )
joshwcomeau 10y ago
Awesome idea. I wonder if this could be generalized to a chrome extension, to override styles on Wikipedia or whatever.
- dbcurtis 10y ago
  Please!!!! Unprintable web pages abound. They make my blood boil.
  - dwringer 10y ago
    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...)
Klathmon 10y ago
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.
blorenz 10y ago
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.
hermiti 10y ago
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-with-css/ https://www.smashingmagazine.com/2015/01/designing-for-print...
jehna1 10y ago
It makes a pretty good layout even on screen: http://jsbin.com/relaranujo/2 http://jsbin.com/relaranujo/2
jwilk 10y ago
Not a great name choice.
deathanatos 10y ago
A LICENSE file, please? (Though package.json does declare MIT; a LICENSE file should also allow GitHub to pick it up.)
- sakawa 10y ago
  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 10y ago
    Good point! (Someone beat me to it, and the author has already fixed it, too.)
teekno 10y ago
Is there any relation to https://github.com/matejlatin/Gutenberg https://github.com/matejlatin/Gutenberg?
patleeman 10y ago
Hey this is great. I'm going to add this to the print preview mode in Collate! http://collatenotes.com http://collatenotes.com
wkoszek 10y ago
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.

305 points by BafS 10y ago

deleted 10y ago

[deleted]

majewsky 10y ago

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

Jaruzel 10y ago

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

NicoJuicy 10y ago
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 ;) )
- adrianN 10y ago
  IE 4.0 supports it...
  - amichal 10y ago
    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.
- babuskov 10y ago
  I recall using those in 2002 or somewhere around that time. :)
- vanderZwan 10y ago
  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.
  - dspillett 10y ago
    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.
- danvdragos 10y ago
  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/ https://www.w3.org/TR/css3-page/
Roritharr 10y ago
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.
- _phazor 10y ago
  What about Chrome? File -> Print -> Save as PDF. Works fine with these print properties as far as I can tell.
- matthewmacleod 10y ago
  I'm pretty sure that wkhtmltopdf supported these too, last time I used it, though it's been quite a while now.
- JoelSanchez 10y ago
  dompdf supports this.
- haar 10y ago
  PhantomJS supports it too (either through `html-pdf` or manually).
  - Roritharr 10y ago
    I was looking into PhantomJS, this must be added since then. Great!
- addedlovely 10y ago
  Checkout https://docraptor.com/ https://docraptor.com/ - it's great - is commercial but affordable.
  - TimMeade 10y ago
    This looks interesting. Thanks, we are going to try it out.
  - 10y ago
k1m 10y ago
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 https://www.youtube.com/watch?v=854Csokl3QA and some notes in our blog: http://blog.fivefilters.org/post/75603097111/pdf-newspaper-2-5 http://blog.fivefilters.org/post/75603097111/pdf-newspaper-2... The software itself is free to try at http://fivefilters.org/pdf-newspaper/ http://fivefilters.org/pdf-newspaper/
- danvdragos 10y ago
  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?
  - k1m 10y ago
    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.
    - danvdragos 10y ago
      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...
  - deleted 10y ago
    [deleted]
- qznc 10y ago
  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 http://pp.ipd.kit.edu/~zwinkau/acm_html/test.html [1] http://pp.ipd.kit.edu/uploads/publikationen/buchwald10cases.pdf http://pp.ipd.kit.edu/uploads/publikationen/buchwald10cases....

laurent123456 10y ago

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

vntok 10y ago
Same here.
keshab 10y ago
Just hit Esc and try printing again. I had the same issue myself.
BafS 10y ago
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!

hoschicz 10y ago

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)

matthewmacleod 10y ago
The CSS text module has some support for various text manipulations (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text 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.
mcbetz 10y ago
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 10y ago
  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 10y ago
    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/ )

joshwcomeau 10y ago

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

dbcurtis 10y ago
Please!!!! Unprintable web pages abound. They make my blood boil.
- dwringer 10y ago
  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...)

Klathmon 10y ago

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.

blorenz 10y ago

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.

hermiti 10y ago

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

jehna1 10y ago

It makes a pretty good layout even on screen: http://jsbin.com/relaranujo/2 http://jsbin.com/relaranujo/2

jwilk 10y ago

Not a great name choice.

deathanatos 10y ago

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

sakawa 10y ago
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 10y ago
  Good point! (Someone beat me to it, and the author has already fixed it, too.)

teekno 10y ago

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

patleeman 10y ago

Hey this is great. I'm going to add this to the print preview mode in Collate! http://collatenotes.com http://collatenotes.com

wkoszek 10y ago

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.