lists are not aligned properly when exported to PDF with mkdocs-material as theme

[ThibaudBrrd]

Problem

It seem that mkdocs-with-pdf don't indent lists when mkdocs-material theme is used.

Configuration

mkdocs.yml (without mkdocs-material) :

site_name: PDF List Indentation Test

plugins:
  - with-pdf

mkdocs.yml (with mkdocs-material) :

site_name: PDF List Indentation Test

theme:
    name: material

plugins:
  - with-pdf

Source

docs/index.md :

# PDF List Indentation Test

Test for indentation of list in PDF generated by mkdocs-with-pdf plugin

## Unordered List

- First level
    * Second level
        + Third level

## Ordered List

1. First level
    1. Second level
        1. Third level

## Mixed List

1. First level
    * Second level
        1. Third level

Result

document.pdf (without mkdocs-material)

document.pdf (with mkdocs-material)

Comment

As you can see the unordered list is not indented on each level and the next list are indented in the wrong direction and still not visually indented on each level even when the marker is indented.

[ThibaudBrrd]

After searching and testing solutions, I found that the problem may originate from WeasyPrint. Apparently, during my test with WeasyPrint version 56, I didn't encounter the issue of unindented lists with mkdocs-material. However, the problem occurs with other versions such as WeasyPrint 58 or WeasyPrint 52.

After testing solutions, I have found a fix for the problem. Here is my modification:

.md-typeset > ul {
  margin-left: 0rem !important;
}
.md-typeset ul li,
.md-typeset ol li {
  margin-left: 1.5rem !important;
}

I placed it on top of themes/material.scss file just before @media print. Not sure if it's the right file to place it, but it works.

During my search, I also added the solution from issue #94.

[averaart]

After searching and testing solutions, I found that the problem may originate from WeasyPrint. Apparently, during my test with WeasyPrint version 56, I didn't encounter the issue of unindented lists with mkdocs-material. However, the problem occurs with other versions such as WeasyPrint 58 or WeasyPrint 52.

After testing solutions, I have found a fix for the problem. Here is my modification:

.md-typeset > ul {
  margin-left: 0rem !important;
}
.md-typeset ul li,
.md-typeset ol li {
  margin-left: 1.5rem !important;
}

I placed it on top of themes/material.scss file just before @media print. Not sure if it's the right file to place it, but it works.

During my search, I also added the solution from issue #94.

Thanks!

I ended up placing this in ./templates/style.scss, which according to the documentation should be picked up to be applied over whatever theme styling you've selected.

This allowed me to keep the fix in my own codebase and not rely on changes to files from this repo.