WeasyPrint icon indicating copy to clipboard operation
WeasyPrint copied to clipboard

Setting counter-reset on lists breaks nested lists counters

Open masiak2 opened this issue 3 years ago • 5 comments

Hello, I'm using weasyprint version 56.0. I'm converting html to pdf which looks like:

<html lang="fr">
<head>
    <meta charset="utf-8"/>
    <style>
        body, table {
            font-family: Arial,serif;
            font-size: 11pt;
        }
        .document-title {
            padding: 12px 0;
            text-align: center;
            border: 1px solid black;
            margin-bottom: 32px;
            font-size: 15pt;
        }

        .text-right {
            text-align: right;
        }

        .text-center {
            text-align: center;
        }

        .text-bold {
            font-weight: bold;
        }

        p, li {
            text-align: justify;
        }
        ul, ol {
            padding-left: 16px;
        }

        ul li, ol li {
            margin-bottom: 16px;
            padding-left: 8px;
        }

        ul.no-li-space li, ol.no-li-space li {
            margin-bottom: 0;
        }

        ol.roman {
            counter-reset: roman;
        }

        ol.roman li {
            list-style: none;
            position: relative;
        }
        ol.roman > li:before {
            counter-increment: roman;
            content:"(" counter(roman, lower-roman)") "
        }

        ul.dashed > li:before {
            content: "–"; /* en dash */
            position: absolute;
            margin-left: -1.1em;
        }
        h1 {
            font-size: 12pt;
        }
        .color-1 {
            color: white;
        }
        .color-purple {
            color: #9900ff;
        }
        .column {
            float: left;
            display: inline-block;
            width: 40%;
            margin: 5% 5% 0;
        }

        .box-signature {
            text-align: center;
            height: 100px;
            margin-bottom: 26px;
            padding-top: 6px;
            box-sizing: border-box;
        }
        .border-top {
            border-top: 1px solid black;
        }
        .clear {
            clear: both;
        }
        .img-signature {
            width: 130px;
        }
        .page-break-before {
            page-break-before: always;
        }
    </style>
    <title></title>
</head>
<body>
<h1 class="text-center">OL with type A</h1>
<ol type="A">
    <li>
        aaa
    </li>
    <li>
        bbb
    </li>
    <li>
        ccccc
        <ol class="roman">
            <li>aaaa</li>
            <li>bbbbb</li>
        </ol>
    </li>
    <li>
        dddd
    </li>
</ol>
</body>

and the results are image Rendered html file looks like this: image It seems that type attribute is not being applied and also roman paragraphs are counted as a valid paragraph instead of sub paragraph

masiak2 avatar Jul 14 '22 15:07 masiak2

Hi!

The type attribute is not applied by default, but you can apply it with the --presentational-hints option. Using presentational hints is not encouraged, you should use CSS rules instead if possible.

liZe avatar Jul 14 '22 16:07 liZe

Hi, thanks for fast reply. --presentational-hint helped in case of type attribute but there is still an issue with bad countering when they are nested OL. image

masiak2 avatar Jul 14 '22 17:07 masiak2

but there is still an issue with bad countering when they are nested OL

Damn!

liZe avatar Jul 14 '22 17:07 liZe

This bug is really dirty. Here’s where it comes from.

The CSS specification gives an example of the default user agent stylesheet. It includes a ol, ul { counter-reset: list-item } rule that resets the automatic counter used for lists and perfectly manages nested lists.

It’s a really clean solution and it works. Almost.

The problem occurs when you set another counter-reset: xxx rule on your ol or ul tags. As a normal CSS rule, it overrides the original rule set by WeasyPrint’s stylesheet, and thus breaks nested lists.

I think that other browsers work because they don’t follow this good advice of the W3C and use a hard-wired counter in a pure 20th century style.

liZe avatar Jul 14 '22 19:07 liZe

(Note that there’s an easy workaround in your case using the list-item counter instead of roman.)

liZe avatar Jul 14 '22 21:07 liZe