I played a bit with the positioning of the ::marker of list items, but with unsatisfactory results.

I wanted to define the positioning of ::marker in the x- and y-axis, but failed to do so.

While searching the web I stumbled over this video from Kevin Powell, which works fine in modern browsers, but not in PrinceXML (see files attached: moved the list to the left of surrounding paragraphs, moved the ::marker much tighter to it's list item).

How do I position the ::marker in PrinceXML correctly?

Thanks, Tobias

1. test--HTML-output-in-Firefox-Mac.png‎ 318.9 kB
2. test.html‎ 2.7 kB
3. test.pdf‎ 57.0 kB

The Prince user agent style sheet (style/html.css) indents lists by setting a non-zero margin but browsers set a non-zero padding. You might want to start by moving the indentation from the margin to the padding:

ol, ul {
    margin-left: 0;
    padding-left: 40pt;
}

Additionally, in Prince, the gap between the marker and list item is implemented by a non-zero padding on the ::marker pseudo element, i.e.

li::marker {
    padding-right: 8pt;
}

Per current CSS specs, the ::marker pseudo element does not support padding properties, and setting padding on ::marker pseudo elements has no effect in browsers. Therefore, you might want to zero out the padding on markers to bring Prince closer to browser output.

@wangp Thank you very much! Great!

I can find all these information in the style/html.css? Interesting ...

I’ll give this a try.

Edit: This works perfectly! Thank you very much!!

BTW: style/html.css shows the following code:

li::marker {
    padding-right: 8pt;
    text-align: right
}

So there is also a text-align: right.

Edited 15 Nov 2024 by twantzen