Ask HN: HTML Print Pagination? | Hacker News Reader

Ask HN: HTML Print Pagination?

10 pointsgorgoiler5 comments

I am so impressed with how far we have come with HTML and CSS over the years. But printing still leaves orphaned headers at the bottom of pages and splits paragraphs so that 1% of my paragraph is on a page by itself.

<p> and <h*> are the bread and butter of semantic text on the web. Is there still no way of heuristically placing them on the printed page, in a way that looks typographically reasonable?

View on HN

There are the CSS properties page-break-before and page-break-after.

    @media print {
        h1,h2,h3,h4,h5,h6 {
            page-break-before: always;
        }
    }

I use the following*, which can be inserted wherever needed;

    <div style="page-break-after: always;"></div>

or mostly equivalent,

    div.page-break {
        page-break-after: always;
    }

then

    <div class=page-break></div>

Edit: *This works in markdown to pdf exports using pandoc. Other implementations may behave differerently.*

I think, universal pagination will always be a problem, because of varying paper formats, etc. However, there's the `break-` suite of CSS rules (`break-before`, `break-inside`, `break-after`, formerly `page-break-before`, etc) to handle the worst cases, like cutting through images, lists, or vital portions of text. But these rules are more about what is to be avoided and not so much about how it should be done.

A somewhat mundane reason for the examples, you provided, and for these rules seldom seen in action may be that with websites, there's rarely substantial care invested in print layouts, anymore. (This used to be slightly different, when executives still used to interact with the Internet on a print-out-only basis and pages came with extensive, dedicated print style-sheets. Meaning, print was how your customers were probably experiencing their new website, as were their peers, so it was important. There are also possible, additional problems related to reflow and varying resources, esp. with JS-generated content.) In a way, "mobile first" also meant "print definitely last", since it's yet another layout to maintain.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/break-befor..., https://developer.mozilla.org/en-US/docs/Web/CSS/break-after, https://developer.mozilla.org/en-US/docs/Web/CSS/break-insid...

I spent some time breaking down the elements needed for a clean print CSS style sheet on my blog a few years back, plenty of CSS snippets to copy paste:

http://www.undr.com/understatement/2020/the_one_where_we_beg...

It's not mentioned in his intro post, but I would expect Russell Beattie's proposal for an HTML-based document format to tackle this at some point.

https://www.russellbeattie.com/notes/posts/we-need-an-html-d...

Typesetting is in fact quite difficult, and avoiding orphans and splits is one of the harder things. See https://www-cs-faculty.stanford.edu/~knuth/abcde.html

Reply on news.ycombinator.com