HN Explorer

Ask HN: HTML Print Pagination?

10 points by gorgoiler ↗ HN
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?

5 comments

[ 4.1 ms ] story [ 21.2 ms ] thread
Jiocus
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.*
masswerk
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...