li marker position issue when a superscript is present.

kesara commented 1 month ago

The marker position for li differs when sup (superscript) is present. There are no such issues with sub (subscript).

Example screenshots:

Test HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>li marker position test</title>
  </head>
  <body>
    <h1><code>li</code> marker position test</h1>
    <h4>List <code>ul</code> 0</h4>
    <ul>
      <li>This list has an ordinary line.</li>
    </ul>
    <h4>List <code>ul</code> 1</h4>
    <ul>
      <li>This list has a <sup>superscript</sup>.</li>
    </ul>
    <h4>List <code>ul</code> 2</h4>
    <ul>
      <li>This list has a <sub>subscript</sub>.</li>
    </ul>
    <h4>List <code>ul</code> 3</h4>
    <ul>
      <li>This list has an ordinary line.</li>
      <li>This list has a <sup>superscript</sup>.</li>
      <li>This list has a <sub>subscript</sub>.</li>
      <li>This list has another ordinary line.</li>
    </ul>
    <h4>List <code>ol</code> 0</h4>
    <ol>
      <li>This list has an ordinary line.</li>
    </ol>
    <h4>List <code>ol</code> 1</h4>
    <ol>
      <li>This list has a <sup>superscript</sup>.</li>
    </ol>
    <h4>List <code>ol</code> 2</h4>
    <ol>
      <li>This list has a <sub>subscript</sub>.</li>
    </ol>
    <h4>List <code>ol</code> 3</h4>
    <ol>
      <li>This list has an ordinary line.</li>
      <li>This list has a <sup>superscript</sup>.</li>
      <li>This list has a <sub>subscript</sub>.</li>
      <li>This list has another ordinary line.</li>
    </ol>
  </body>
</html>

Sample PDF generated with WeasyPrint 62.3: li.pdf

kesara commented 1 month ago

This is a non-issue when the sup is not present in the first line. Screenshot:

liZe commented 1 month ago

Thanks a lot for the bug report and the examples.

liZe commented 1 month ago

This bug appears because in WeasyPrint, markers are absolutely positioned boxes: vertically they are positioned to be on the left of the content of the li box, and horizontally to be aligned with the top of the content box of the li box.

Both positions are wrong in some cases. Horizontally, it’s explained in #1557, padding breaks the assumption. And vertically, well … you’ve just found the bug.

Subscript doesn’t break the rendering because we still want to put the marker at the top of the li box in this case.

The clean solution would be to position markers manually, not using some dirty hidden CSS rules. We can actually do what we want, as "CSS does not specify the precise location of the marker box or its position in the painting order", but we should try to manually do what other browsers do.

A workaround is to add line-height: 0 to superscript text, it works well with rather high line-height values. It should be the default in my opinion, otherwise lines with superscript are taller than other lines. But that’s not what other browsers do, so we’re stuck with this.

kesara commented 1 month ago

@liZe Thanks for the explanation and workaround.

Kozea / WeasyPrint

li marker position issue when a superscript is present. #2253