What is the correct way to do the CSS to avoid page breaks?

Question

I’m trying to use wkhtmltopdf to turn this page into a (somewhat) nice-looking PDF document:

http://z2codes.franklinlegal.net/franklin/DocViewer.jsp?showset=lubbockset&z2collection=lubbock&docid=405#405

I’m using the following code so far:

a[name^="0"] p, a[name^="1"] p, a[name^="2"] p, a[name^="3"] p, a[name^="4"] p, a[name^="5"] p, a[name^="6"] p, a[name^="7"] p, a[name^="8"] p, a[name^="9"] p {
  display: block;
  page-break-inside: avoid;
}

a[name^="0"], a[name^="1"], a[name^="2"], a[name^="3"], a[name^="4"], a[name^="5"], a[name^="6"], a[name^="7"], a[name^="8"], a[name^="9"] {
  display: block;
  page-break-inside: avoid;
}

h5.Heading4:not(:first-child) {
  page-break-before: always;
}

img {
  visible: hidden;
}

This mostly correct, and I’m getting better results than at first. But the page breaks are still not all correct. The problem trees look like this

<a>
    <div>Section Header</div>
    <p>some big paragraph of crappy city ordinances</p>
</a>

Now, I’ve got the CSS where it will avoid breaking a paragraph where possible (there are a few more-than-one-page paragraphs, but the rest are fine). However, it will still occasionally put a section header at the bottom of a page, then move the paragraph to the next — and if it does this, it should also move the section header with it, rather than splitting them.

Is this a solvable problem in CSS3?

[edit]

<A NAME="328" />
    <DIV CLASS='Heading7'><span onClick="top.showBookmarkDialog('328');"><img src="http://z2codes.franklinlegal.net/franklin/worldlink.jpg" border="0"> &nbsp;</span>Sec. 17.&nbsp; &nbsp; &nbsp;Improvements of sidewalks and curbs.</DIV>
    <P><Font Face="Times New Roman">Said City shall have the power to provide for the construction, improvement or repair of any sidewalk or curb by penal ordinance and to declare defective sidewalks or curbs public nuisances.</FONT>
    </P>
</A>

This was requested, not sure how helpful it will be.

Christian · Answer 1 · 2015-07-10T02:38:44.960

3

The section header isn't inside the paragraph; it's inside the anchor. Adding page-break-inside: avoid; to the paragraph only prevents the content within the paragraph from being split up. It doesn't apply to siblings of the paragraph.

Therefore, if you don't want the section header and paragraph to split, you need to add page-break-inside: avoid; to the parent (aka, the anchor), not the paragraph.

a {
  page-break-inside: avoid;
}

edited Jul 10 '15 at 02:38

answered Jul 10 '15 at 02:21

Christian

19,605
3
54
70

Didn’t he kind of already do this with the second CSS selector `a[name^="0"], a[name^="1"], … { display: block; page-break-inside: avoid; }`? – Sebastian Simon Jul 10 '15 at 02:22
@Xufox No, because none of those selectors match the HTML he provided. See here: https://jsfiddle.net/uLz9fby0/ – Christian Jul 10 '15 at 02:24
I know, but at least he attempted it. – Sebastian Simon Jul 10 '15 at 02:27
1

@Xufox I'm not sure what point you're trying to make. Read his post, he has attempted to solve the problem by splitting the paragraph. My answer explains that he needs to split the anchor, not the paragraph. Also, please refrain from making absolutely irrelevant edits to posts. Changing single quotes from `'` to `’` makes **absolutely no difference to the readability of the post**. This is my answer, not yours. If you want to use `’`, do it in your own answers. These kinds of changes help no one. – Christian Jul 10 '15 at 02:33
They do match the html... I provided a simplified example. There was no reason to make it as complicated as the source, which I provided with the link. I'll edit this in though, but I don't know why that should matter. I have the selectors correct. – John O Jul 10 '15 at 02:46
@JohnO, thanks for that. Simplifying the code is helpful, but you should also ensure that the key parts are retained - with the specific example you gave, your CSS selectors don't match anything in the HTML. Why would I assume the real site is any different? The question should be self-contained and reproducible so as to help other people, if your HTML structure matters, then make sure you include it in your question. – Christian Jul 10 '15 at 02:52

score 1 · Answer 2 · edited Jul 10 '15 at 02:29

1

Simplify your CSS selectors. Your current styles do not apply to the link blocks:

p, a {
  display: block;
  page-break-inside: avoid;
}

Actually the selector for p is redundant, as they are inside the a tags.

edited Jul 10 '15 at 02:29

Sebastian Simon

18,263
7
55
75

answered Jul 10 '15 at 02:25

Samuel Liew

76,741
107
159
260

What is the correct way to do the CSS to avoid page breaks?

2 Answers2

Linked