I'm trying to get bigger list markers for square, disc and circle. I'm also trying to find a solution which works in browsers. Since they don't support li:marker yet, I followed the usual approach with li:before and float:left. In browsers this works fine, but in PrinceXML there are cases where the list item is split between page breaks, that is, the marker is the last element at the bottom of a page and the text content of the list item is on the next page.

No matter if I use block, table-cell, inherit, or list-item (which I think is correct) for li:before, the behaviour is always the same. The only solution I've found is to add page-break-after:avoid to li:before. Is this normal or the expected behaviour in a render environment with pages?

If I leave out display:list-item in li:before and if there are block elements like <p> inside the list element it looks like PrinceXML issues a "line break" after the list marker. This isn't seen in browsers, so it seems that display:list-item is mandatory for PrinceXML in such cases?

1. ListBullet_with_display_list-item.pdf‎ 47.6 kB
2. ListBullet_without_display_listi-tem.pdf‎ 47.6 kB
3. Test.html‎ 5.3 kB

A html-elements children and its pseudo-elements before and after are seperate by nature. Also a p-Tag is display:block by default, so a page-break between them is just normal. To fix that you have to tell the parent element not to be broken:

li {
    page-break-inside: avoid;
}

As an alternative you can also use absolute positioning instead of floats or css-tables, which also supports proper hanging indents, as described here

1. Test.pdf‎ 47.5 kB

Edited 6 Apr 2015 by skycaptain

Thanks for the tip, I wasn't aware of this!

The problem with li {page-break-inside: avoid;} is that it always puts the whole list element to the next page, which isn't ideal for longer list elements so I'd prefer your solution from the gist or li:before {page-break-after: avoid}. Anyway, thanks again .