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.

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

Nested ordered lists cause incorrectly affect the parent ordered list's numbering #1743

Closed
MH-ZShearer opened this issue Oct 14, 2022 · 5 comments
Labels
CSS Questions about how to do something with CSS

Comments

@MH-ZShearer
Copy link

WeasyPrint Version: 56.1
OS: Windows 10 21H2 (19044.2130)
Python: 3.10.5

With the following HTML, WeasyPrint doesn't generate the expected output

<ol type="a">
    <li>(a.) Item 1</li>
    <li>(b.) Item 2</li>
    <ol type="1">
      <li>(1.) Item 2.1</li>
      <li>(2.) Item 2.2</li>
      <li>(3.) Item 2.3</li>
    </ol>
    <li>(c.) Item 3</li>
    <li>(d.) Item 4</li>
</ol>

Browser output:
image

WeasyPrint output:
image

This also happens to showcase that nested ordered lists aren't handled correctly either. Changing type="a" to type="1" (default), creates the same output.

@MH-ZShearer
Copy link
Author

I found out that passing --presentation-hints fixes the issue of ordered lists only using numbers. However, Item 3 and Item 4 end up being d. and e. respectively.

image

@MH-ZShearer MH-ZShearer changed the title Ordered list types aren't interpreted correctly Nested ordered lists cause incorrectly affect the parent ordered list's numbering Oct 14, 2022
@liZe liZe added the CSS Questions about how to do something with CSS label Oct 15, 2022
@liZe
Copy link
Member

liZe commented Oct 15, 2022

Hi!

ol and ul elements only allow li elements as children, embedding ol in ol is not valid HTML.

You can use this instead:

<ol type="a">
    <li>(a.) Item 1</li>
    <li>(b.) Item 2
      <ol type="1">
        <li>(1.) Item 2.1</li>
        <li>(2.) Item 2.2</li>
        <li>(3.) Item 2.3</li>
      </ol>
    </li>
    <li>(c.) Item 3</li>
    <li>(d.) Item 4</li>
</ol>

@MH-ZShearer
Copy link
Author

Huh, I swore that is what I tried first. I suppose it was before I found out about --presentational-hints and it was an attempt to fix my ignorance.

Is there a reason that presentational hints aren't enabled by default? Reading the documentation left me with more questions than what it actually answered. Are there downsides to enabling it?

@liZe
Copy link
Member

liZe commented Oct 15, 2022

Huh, I swore that is what I tried first. I suppose it was before I found out about --presentational-hints and it was an attempt to fix my ignorance.

😀️

Is there a reason that presentational hints aren't enabled by default? Reading the documentation left me with more questions than what it actually answered. Are there downsides to enabling it?

The main reason is that it’s slow.

As most of these features are more or less deprecated in HTML, users generally prefer to use the corresponding CSS properties. For lists, for example, a lot of things can be handled using the CSS Lists and Counters module’s properties.

@MH-ZShearer
Copy link
Author

That makes sense. Unfortunately, our use case is converting markdown files to PDFs with Pandoc and WeasyPrint. We had a specification in our contract that required a single ordered list to contain letters with a nested ordered list inside so using CSS to target such a specific thing (that was generic to all of our documentation) didn't feel right.

I expected that --presentation-hints was more the "true" representation of the webpage, however, I can definitely understand the performance impact of having it as the default.

Thank you for the assistance and information!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Questions about how to do something with CSS
Projects
None yet
Development

No branches or pull requests

2 participants