Should CSS "orphan" operate at line or block level?

Question

I'm rendering HTML documents to PDF. Previously I was using Wkhtmltopdf, but it looks like Dompdf offers better support for page breaks, so I expect I will switch to that.

I'd like to apply some orphan control to my document, so I need to have a solid understanding of what orphans actually does. From W3C (source):

The orphans property specifies the minimum number of lines in a block container that must be left at the bottom of a page.

The example that is consistently offered around the web is this:

p { orphans: 3; }

This means that if there isn't space for three lines of paragraph text, a break is forced to the next page. I am rendering a document containing a lot of unordered lists, so for me it would be:

li { orphans: 2; }

However, I'd also ideally like to break an unordered list so that a bullet item block is not orphaned or widowed on its own. It would be nice to be able to do this:

ul { orphans: 2; }

That would ideally ensure that no item block could appear above or below a page break on its own. However browser/renderer support for this is patchy, and W3C above use the word "line" rather than "block". Thus, I imagine the above would just affect paragraph line control within list items, and would not affect whole list item blocks. If that is the case, is there a CSS way to do this?

Answer 1

As mentioned by liZe on the WeasyPrint issue tracker:

Orphans / Widows only work for line-boxes, not for block-like boxes.

Fortunately, you can define rules like:

li:last-child {
  break-before: avoid;
}
li:first-child {
  break-after: avoid;
}