Position of list marker is wrong after a page break #1058

craigbass76 · 2020-02-11T17:31:21Z

I'm not sure what the problem is here. When an ordered list is going over a page break, the text is bumped up a bit. See list item #4.

I was trying to manually put a page break in there, but then this item#4 kept becoming a new Item#1.

craigbass76 · 2020-02-19T21:40:25Z

Is there a workaround for the time being?

craigbass76 · 2020-02-24T15:04:45Z

If it helps, it looks like this only happens with the list item in question is more than a line long.

No, scratch that. I got my hopes up...

GiovanniSalmeri · 2020-07-26T18:39:32Z

Some problem here. I have produced a minimal example: the problem seems to occur (both with ordered and unordered lists) when the item contains a paragraph:

<li><p>List item</p></li>

but not if the item cointains only text:

<li>List item</li>

Perhaps this will help to hunt down the bug?

NicHub · 2020-11-10T21:13:56Z

I got the same problem. If an <ol> or an <ul> contains <li><p>...</p></li> elements, then the bullet or the number is not aligned on the first list item after a page break.

I wonder if it is related to this behavior which looks like a bug: On a document without custom CSS, the first page top margin is bigger than all other top margins in the document and the difference is the height of one line.

Anyway, here is a (quite convoluted) workaround. It seems to work even with nested lists. I usually use it to replace bullets with the characters I want in <ul>. This CSS removes the actual number or bullet and replaces it with a counter or a character.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>OL UL BUG</title>
    <style>
        ol,
        ul {
            counter-reset: list-item-counter;
            list-style-type: none;
        }

        ol li p,
        ul li p {
            counter-increment: list-item-counter;
            text-indent: -2.0rem; /* must be equal to -width (see below) */
        }

        ol li p::before,
        ul li p::before {
            display: inline-block;
            left: -0.16rem;
            margin: 0;
            padding: 0;
            position: relative;
            text-align: right;
            width: 2.0rem;
        }

        ol li p::before {
            content: counter(list-item-counter)".";
        }

        ul li p::before {
            content: "•";
        }

    </style>
</head>

<body>
    <ol>
        <!--
            Copy-paste this line 50 × so that the list takes more than one page.
            Generate the PDF with and without the CSS above to see the difference.
         -->
        <li><p>Lorem</p></li>
    </ol>
</body>

</html>

fabiobatalha · 2023-03-27T20:03:36Z

Hello @liZe

I have just tested it with WeasyPrint 58.1 , the behaviour is still the same for me.

grewn0uille · 2023-03-27T20:13:48Z

Hello @fabiobatalha,

Could you please share the related HTML/CSS files?

fabiobatalha · 2023-03-27T20:27:28Z

Hello @grewn0uille

The example!

sample.zip

liZe · 2023-03-28T12:48:54Z

Hi @fabiobatalha

Your bug is different from this issue, it’s not related to page breaks at all.

The bullet’s position is "wrong" because you have a different line height for li (18px) and li p (1.2em). The marker is aligned according the li box’ line height, but the text of the paragraph is not (because it’s a block, not an inline text).

Even if the rendering is not optimal in this specific case, I’m not sure that the real position is defined by the specifications, so may not technically be a bug. You can easily change the line height of the marker if you want to use different line-heights for your li tags and their content. Something like ::marker { line-height: 1 } will give you what you want.

If you think that this problem is a real bug (ie there’s something about the vertical alignment of markers in the specifications), you can open a new issue. Otherwise, we can consider that this is an implementation detail, and setting the marker’s line height is the way to go.

fabiobatalha · 2023-03-28T13:30:31Z

Hi @liZe

Thanks for the response. I will try to fix it in the css following your highlights.

My point of view of a "bug" is more related to the "Wysiwyg" aspect of the conversion from HTML to PDF, once in the HTML preview the bullets are well placed.

liZe · 2023-03-28T13:36:12Z

My point of view of a "bug" is more related to the "Wysiwyg" aspect of the conversion from HTML to PDF, once in the HTML preview the bullets are well placed.

I agree, web browsers seem to behave the same "correct" way, so it’s possibly a real bug. Even if you can get what you want with CSS, you can open a new issue with your example attached, we’ll find the time to read the specifications in the future to find what’s the correct behavior.

bonnebulle · 2023-05-20T07:40:46Z

Hello
For me the bad positioning was more about inside elements
I fix it with ol > li > p { display: block; }

::marker { line-height: 1 }

@font-face

Version 59.0 ------------ Released on 2023-05-11. This version also includes the changes from unstable b1 version listed below. Bug fixes: * `#1864 <https://github.com/Kozea/WeasyPrint/issues/1864>`_: Handle overflow for svg and symbol tags in SVG images * `#1867 <https://github.com/Kozea/WeasyPrint/pull/1867>`_: Remove duplicate compression of attachments * `d0ad5c1 <https://github.com/Kozea/WeasyPrint/commit/d0ad5c1>`_: Override use tag children instead of drawing their references * `93df1a5 <https://github.com/Kozea/WeasyPrint/commit/93df1a5>`_: Don’t resize the same image twice when the --dpi option is set * `#1874 <https://github.com/Kozea/WeasyPrint/pull/1874>`_: Drawn underline and overline behind text Version 59.0b1 -------------- Released on 2023-04-14. **This version is experimental, don't use it in production. If you find bugs, please report them!** Command-line API: * The ``--optimize-size`` option and its short equivalent ``-O`` have been deprecated. To activate or deactivate different size optimizations, you can now use: * ``--uncompressed-pdf``, * ``--optimize-images``, * ``--full-fonts``, * ``--hinting``, * ``--dpi <resolution>``, and * ``--jpeg-quality <quality>``. * A new ``--cache-folder <folder>`` option has been added to store temporary data in the given folder on the disk instead of keeping them in memory. Python API: * Global rendering options are now given in ``**options`` instead of dedicated parameters, with slightly different names. It means that the signature of the ``HTML.render()``, ``HTML.write_pdf()`` and ``Document.write_pdf()`` has changed. Here are the steps to port your Python code to v59.0: 1. Use named parameters for these functions, not positioned parameters. 2. Rename some the parameters: * ``image_cache`` becomes ``cache`` (see below), * ``identifier`` becomes ``pdf_identifier``, * ``variant`` becomes ``pdf_variant``, * ``version`` becomes ``pdf_version``, * ``forms`` becomes ``pdf_forms``. * The ``optimize_size`` parameter of ``HTML.render()``, ``HTML.write_pdf()`` and ``Document()`` has been removed and will be ignored. You can now use the ``uncompressed_pdf``, ``full_fonts``, ``hinting``, ``dpi`` and ``jpeg_quality`` parameters that are included in ``**options``. * The ``cache`` parameter can be included in ``**options`` to replace ``image_cache``. If it is a dictionary, this dictionary will be used to store temporary data in memory, and can be even shared between multiple documents. If it’s a folder Path or string, WeasyPrint stores temporary data in the given temporary folder on disk instead of keeping them in memory. New features: * `#1853 <https://github.com/Kozea/WeasyPrint/pull/1853>`_, `#1854 <https://github.com/Kozea/WeasyPrint/issues/1854>`_: Reduce PDF size, with financial support from Code & Co. * `#1824 <https://github.com/Kozea/WeasyPrint/issues/1824>`_, `#1829 <https://github.com/Kozea/WeasyPrint/pull/1829>`_: Reduce memory use for images * `#1858 <https://github.com/Kozea/WeasyPrint/issues/1858>`_: Add an option to keep hinting information in embedded fonts Bug fixes: * `#1855 <https://github.com/Kozea/WeasyPrint/issues/1855>`_: Fix position of emojis in justified text * `#1852 <https://github.com/Kozea/WeasyPrint/issues/1852>`_: Don’t crash when line can be split before trailing spaces * `#1843 <https://github.com/Kozea/WeasyPrint/issues/1843>`_: Fix syntax of dates in metadata * `#1827 <https://github.com/Kozea/WeasyPrint/issues/1827>`_, `#1832 <https://github.com/Kozea/WeasyPrint/pull/1832>`_: Fix word-spacing problems with nested tags Documentation: * `#1841 <https://github.com/Kozea/WeasyPrint/issues/1841>`_: Add a paragraph about unsupported calc() function Version 58.1 ------------ Released on 2023-03-07. Bug fixes: * `#1815 <https://github.com/Kozea/WeasyPrint/issues/1815>`_: Fix bookmarks coordinates * `#1822 <https://github.com/Kozea/WeasyPrint/issues/1822>`_, `#1823 <https://github.com/Kozea/WeasyPrint/pull/1823>`_: Fix vertical positioning for absolute replaced elements Documentation: * `#1814 <https://github.com/Kozea/WeasyPrint/pull/1814>`_: Fix broken link pointing to samples Version 58.0 ------------ Released on 2023-02-17. This version also includes the changes from unstable b1 version listed below. Bug fixes: * `#1807 <https://github.com/Kozea/WeasyPrint/issues/1807>`_: Don’t crash when out-of-flow box is split in out-of-flow parent * `#1806 <https://github.com/Kozea/WeasyPrint/issues/1806>`_: Don’t crash when fixed elements aren’t displayed yet in aborted line * `#1809 <https://github.com/Kozea/WeasyPrint/issues/1809>`_: Fix background drawing for out-of-the-page transformed boxes Version 58.0b1 -------------- Released on 2023-02-03. **This version is experimental, don't use it in production. If you find bugs, please report them!** New features: * `#61 <https://github.com/Kozea/WeasyPrint/issues/61>`_, `#1796 <https://github.com/Kozea/WeasyPrint/pull/1796>`_: Support PDF forms, with financial support from Personalkollen * `#1173 <https://github.com/Kozea/WeasyPrint/issues/1173>`_: Add style for form fields Bug fixes: * `#1777 <https://github.com/Kozea/WeasyPrint/issues/1777>`_: Detect JPEG/MPO images as normal JPEG files * `#1771 <https://github.com/Kozea/WeasyPrint/pull/1771>`_: Improve SVG gradients Version 57.2 ------------ Released on 2022-12-23. Bug fixes: * `0f2e377 <https://github.com/Kozea/WeasyPrint/commit/0f2e377>`_: Print annotations with PDF/A * `0e9426f <https://github.com/Kozea/WeasyPrint/commit/0e9426f>`_: Hide annotations with PDF/UA * `#1764 <https://github.com/Kozea/WeasyPrint/issues/1764>`_: Use reference instead of stream for annotation appearance stream * `#1783 <https://github.com/Kozea/WeasyPrint/pull/1783>`_: Fix multiple font weights for @font-face declarations Version 57.1 ------------ Released on 2022-11-04. Dependencies: * `#1754 <https://github.com/Kozea/WeasyPrint/pull/1754>`_: Pillow 9.1.0 is now needed Bug fixes: * `#1756 <https://github.com/Kozea/WeasyPrint/pull/1756>`_: Fix rem font size for SVG images * `#1755 <https://github.com/Kozea/WeasyPrint/issues/1755>`_: Keep format when transposing images * `#1753 <https://github.com/Kozea/WeasyPrint/issues/1753>`_: Don’t use deprecated ``read_text`` function when ``files`` is available * `#1741 <https://github.com/Kozea/WeasyPrint/issues/1741>`_: Generate better manpage * `#1747 <https://github.com/Kozea/WeasyPrint/issues/1747>`_: Correctly set target counters in pages’ absolute elements * `#1748 <https://github.com/Kozea/WeasyPrint/issues/1748>`_: Always set font size when font is changed in line * `2b05137 <https://github.com/Kozea/WeasyPrint/commit/2b05137>`_: Fix stability of font identifiers Documentation: * `#1750 <https://github.com/Kozea/WeasyPrint/pull/1750>`_: Fix documentation spelling Version 57.0 ------------ Released on 2022-10-18. This version also includes the changes from unstable b1 version listed below. New features: * `a4fc7a1 <https://github.com/Kozea/WeasyPrint/commit/a4fc7a1>`_: Support image-orientation Bug fixes: * `#1739 <https://github.com/Kozea/WeasyPrint/issues/1739>`_: Set baseline on all flex containers * `#1740 <https://github.com/Kozea/WeasyPrint/issues/1740>`_: Don’t crash when currentColor is set on root svg tag * `#1718 <https://github.com/Kozea/WeasyPrint/issues/1718>`_: Don’t crash with empty bitmap glyphs * `#1736 <https://github.com/Kozea/WeasyPrint/issues/1736>`_: Always use the font’s vector variant when possible * `eef8b4d <https://github.com/Kozea/WeasyPrint/commit/eef8b4d>`_: Always set color and state before drawing * `#1662 <https://github.com/Kozea/WeasyPrint/issues/1662>`_: Use a stable key to store stream fonts * `#1733 <https://github.com/Kozea/WeasyPrint/issues/1733>`_: Don’t remove attachments when adding internal anchors * `3c4fa50 <https://github.com/Kozea/WeasyPrint/commit/3c4fa50>`_, `c215697 <https://github.com/Kozea/WeasyPrint/commit/c215697>`_, `d275dac <https://github.com/Kozea/WeasyPrint/commit/d275dac>`_, `b04bfff <https://github.com/Kozea/WeasyPrint/commit/b04bfff>`_: Fix many bugs related to PDF/UA structure Performance: * `dfccf1b <https://github.com/Kozea/WeasyPrint/commit/dfccf1b>`_: Use faces as fonts dictionary keys * `0dc12b6 <https://github.com/Kozea/WeasyPrint/commit/0dc12b6>`_: Cache add_font to avoid calling get_face too often * `75e17bf <https://github.com/Kozea/WeasyPrint/commit/75e17bf>`_: Don’t call process_whitespace twice on many children * `498d3e1 <https://github.com/Kozea/WeasyPrint/commit/498d3e1>`_: Optimize __missing__ functions Documentation: * `863b3d6 <https://github.com/Kozea/WeasyPrint/commit/863b3d6>`_: Update documentation of installation on macOS with Homebrew Version 57.0b1 -------------- Released on 2022-09-22. **This version is experimental, don't use it in production. If you find bugs, please report them!** New features: * `#1704 <https://github.com/Kozea/WeasyPrint/pull/1704>`_: Support PDF/UA, with financial support from Novareto * `#1454 <https://github.com/Kozea/WeasyPrint/issues/1454>`_: Support variable fonts Bug fixes: * `#1058 <https://github.com/Kozea/WeasyPrint/issues/1058>`_: Fix bullet position after page break, with financial support from OpenZeppelin * `#1707 <https://github.com/Kozea/WeasyPrint/issues/1707>`_: Fix footnote positioning in multicolumn layout, with financial support from Code & Co. * `#1722 <https://github.com/Kozea/WeasyPrint/issues/1722>`_: Handle skew transformation with only one parameter * `#1715 <https://github.com/Kozea/WeasyPrint/issues/1715>`_: Don’t crash when images are truncated * `#1697 <https://github.com/Kozea/WeasyPrint/issues/1697>`_: Don’t crash when attr() is used in text-decoration-color * `#1695 <https://github.com/Kozea/WeasyPrint/pull/1695>`_: Include language information in PDF metadata * `#1612 <https://github.com/Kozea/WeasyPrint/issues/1612>`_: Don’t lowercase letters when capitalizing text * `#1700 <https://github.com/Kozea/WeasyPrint/issues/1700>`_: Fix crash when rendering footnote with repagination * `#1667 <https://github.com/Kozea/WeasyPrint/issues/1667>`_: Follow EXIF metadata for image rotation * `#1669 <https://github.com/Kozea/WeasyPrint/issues/1669>`_: Take care of floats when remvoving placeholders * `#1638 <https://github.com/Kozea/WeasyPrint/issues/1638>`_: Use the original box when breaking waiting children

liZe added the bug Existing features not working as expected label Feb 11, 2020

GiovanniSalmeri mentioned this issue Aug 20, 2020

bullets and numbers misaligned in a page break. #1188

Closed

liZe mentioned this issue Dec 26, 2021

pdf rendering: first bullet point at wrong position #1529

Closed

liZe changed the title ~~Ordered lists <ol> over a page break~~ Position of list marker is wrong after a page break Dec 26, 2021

liZe mentioned this issue May 21, 2022

Wrong top and bottom offsets for absolute-positioned boxes inside of inline elements #1649

Open

grewn0uille added the sponsored Issues sponsored to be resolved faster label Sep 16, 2022

grewn0uille added this to the 57.0 milestone Sep 16, 2022

liZe closed this as completed in 6fb4c08 Sep 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Position of list marker is wrong after a page break #1058

Position of list marker is wrong after a page break #1058

craigbass76 commented Feb 11, 2020

craigbass76 commented Feb 19, 2020

craigbass76 commented Feb 24, 2020 •

edited

Loading

GiovanniSalmeri commented Jul 26, 2020

NicHub commented Nov 10, 2020 •

edited

Loading

fabiobatalha commented Mar 27, 2023

grewn0uille commented Mar 27, 2023

fabiobatalha commented Mar 27, 2023

liZe commented Mar 28, 2023

fabiobatalha commented Mar 28, 2023

liZe commented Mar 28, 2023

bonnebulle commented May 20, 2023

Position of list marker is wrong after a page break #1058

Position of list marker is wrong after a page break #1058

Comments

craigbass76 commented Feb 11, 2020

craigbass76 commented Feb 19, 2020

craigbass76 commented Feb 24, 2020 • edited Loading

GiovanniSalmeri commented Jul 26, 2020

NicHub commented Nov 10, 2020 • edited Loading

fabiobatalha commented Mar 27, 2023

grewn0uille commented Mar 27, 2023

fabiobatalha commented Mar 27, 2023

liZe commented Mar 28, 2023

fabiobatalha commented Mar 28, 2023

liZe commented Mar 28, 2023

bonnebulle commented May 20, 2023

craigbass76 commented Feb 24, 2020 •

edited

Loading

NicHub commented Nov 10, 2020 •

edited

Loading