About Widows and Orphans

What's goin' on here?, you may think.

Don't panic, I didn't slip up. These words are technical terms from typography. They are the last line of a paragraph that appears on the next page (Widow) or the first line of a paragraph that is all alone at the bottom of the page (Orphan). For further reading, I recommend the Wikipedia article, the widow doesn't know where it comes from, the orphan doesn't know where it's going to.

Both are very unsightly and disrupt the flow of reading.

It can get even worse: the heading is at the very bottom of the page (or column) and the first paragraph comes on the next...

I wanted to avoid that on my site too and I solved it like this using CSS:

I have a line in my CSS:

p { page-break-inside: avoid; column-break-inside: avoid; }

This prevents a break within a paragraph.

However, with longer paragraphs this can unnecessarily lead to an asymmetrical page image.

This is not ideal. There are sometimes ps on my site that are relatively long, e.g. because they contain images and that could be intelligently broken up differently, but I couldn't think of a better method.

I have also defined a corresponding class (together):

.together {page-break-inside: avoid; column-break-inside: avoid; }

This allows me to encapsulate a heading and the first paragraph in a div and there is no break after the heading.