CSS: How to force page break when printing?

DEVONthink
1

Hi, I’d like to force part of this website to go on the next PDF page when printing.

Using this CSS …

@media print {
	#fs-frame-2 > main > article > div.flexer > div > section:nth-child(1) > ul > li { background-color: #ADD8E6 !important;
		break-after: always;
	}
	#Cast-Crew { background-color: red !important;
		break-before: always;
	}
}

… I get this result

1
11154×1319 161 KB

The red part should go to the next page, but I can’t figure out how to do it

2

Which browser are you using?

3

DEVONthink. Already tried the old page-break-after but couldn’t make it work.

4

It works ok in Firefox. DT probably uses Safari’s Webkit. And it seems that FF is the only browser which currently supports break-after: always: CSS property: break-after: Supported in Paged Media: `always` | Can I use... Support tables for HTML5, CSS3, etc . Probably the same with `break-before: always’. Print media support in browsers is a mess – they might be concentrating on hipper stuff like 3D AI modified transformations or whatever.

Regardless: Trying to print with your settings from Safari gives the same result (or rather non result) as in DT. So, it’s Webkit-related, and you’d have to print from FF.

1 Like
5

Thanks. Can’t believe what a mess this is.

  • There’s Safari which doesn’t apply page-break-after although this (old?) Apple doc Supported CSS Properties says it’s supported.

  • There’s Firefox which supports page-break-after (or break-after?) but doesn’t support AppleScript. The first request was made 18 years ago.

And there also seems to be an old bug which Apple doesn’t care about: PDFs simply split right in the middle of an element (e.g. a header) if there’s enough content before it. Never noticed it, but now that I’m aware it really sucks.

(Anyway turns out I was looking in the wrong direction: it’s a little bit more reliable to extract the person names from the HTML source via regex instead of processing the plain text via NaturalLanguage. No idea how I managed to overlook that there’s a table like structure below the “Cast & Crew” header. Regex isn’t the best way to get the names, I know, but it’ll do it… Really need to learn HTML someday)