break-after: avoid on headings not preventing widowed headers at page bottom

Viewed 4

When exporting to paginated PDF, using a custom CSS, headings that fall near the bottom of a page are not kept with the following content, resulting in orphaned/widowed headings — a heading appears as the last line on a page with its body text starting on the next page. This was observed across all heading levels.

Here is an example CSS snippet:

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
    page-break-before: avoid;
    break-before: avoid;
  }

Expected behavior is that a heading near the bottom of a page should move to the top of the next page, keeping it attached to the first element of its content.

Is this a limitation of the rendering engine, or are there other ways to get the desired behavior via CSS?

3 Answers

Please let me know what version of Marked you're using.

Version 2.6.46 (1071) — the latest version installed by SetApp.

Marked 2's PDF method just relies on the default print system, basically a fancy "Print to PDF". So if your CSS works the way you expect in Safari, then it's probably that Marked is using the older version of WebKit (it has to for its functionality).

I rewrote the PDF export for v3, so hopefully you'll see better results there.