Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Setting counter-reset on lists breaks nested lists counters #1685

Open
masiak2 opened this issue Jul 14, 2022 · 5 comments
Open

Setting counter-reset on lists breaks nested lists counters #1685

masiak2 opened this issue Jul 14, 2022 · 5 comments
Labels
bug Existing features not working as expected

Comments

@masiak2
Copy link

masiak2 commented Jul 14, 2022

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
@liZe
Copy link
Member

liZe commented Jul 14, 2022

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 liZe closed this as completed Jul 14, 2022
@masiak2
Copy link
Author

masiak2 commented Jul 14, 2022

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

@liZe liZe reopened this Jul 14, 2022
@liZe
Copy link
Member

liZe commented Jul 14, 2022

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

Damn!

@masiak2 masiak2 changed the title Ordered list (<ol>) type attribute not applied Ordered list (<ol>) bad countering when there is nested ol Jul 14, 2022
@liZe
Copy link
Member

liZe commented Jul 14, 2022

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 liZe changed the title Ordered list (<ol>) bad countering when there is nested ol Setting counter-reset on lists breaks nested lists counters Jul 14, 2022
@liZe liZe added the bug Existing features not working as expected label Jul 14, 2022
@liZe
Copy link
Member

liZe commented Jul 14, 2022

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

liZe added a commit that referenced this issue Jul 18, 2022
@liZe
Add failing test for broken nested counters
5c91673 
Related to #1685.
@cdelnooz cdelnooz mentioned this issue Oct 18, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @masiak2