jbms / sphinx-immaterial

Adaptation of the popular mkdocs-material material design theme to the sphinx documentation system
https://jbms.github.io/sphinx-immaterial/
Other
177 stars 28 forks source link

Extra whitespace for rendered footnotes/citations #312

Closed N-Wouda closed 3 months ago

N-Wouda commented 5 months ago

Hello! I'm not sure if this is an issue, or works as desired. In any case, sections with explicit markup (for e.g. footnotes, citations) render with an additional newline between the label and the note. This can be seen in the documentation:

image

I half hoped these to render as in the docutils examples, with the label and note on the same line:

image

Other than this super minor thing I'm very happy using sphinx-immaterial - big kudos for such great work!

2bndy5 commented 5 months ago

Good catch. I would expect no new line between footnote back link and footnote content. This might be expected behavior for footnotes that are referenced more than once.

2bndy5 commented 5 months ago

Looking at the generated HTML output,

docutils uses a table structure

```html


[5] A numerical footnote. Note there's no colon after the ].
```

mkdocs-material uses a div->ol structure

```html


  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa. 

```

sphinx-immaterial uses a aside->aside structure

```html

```

Personally, I'd prefer the footnotes be generated as they are in mkdoc-material, but I haven't looked at sphinx-immaterial source code yet.

N-Wouda commented 5 months ago

The mkdoc-material notes look beautiful!

2bndy5 commented 5 months ago

I think we need to override the visit_footnote() and depart_footnote() from docutils' HTML writer. Sphinx doesn't seem to reimplement those methods.


    def visit_footnote(self, node):
        # No native HTML element: use <aside> with ARIA role
        # (html4css1 uses tables).
        # Wrap groups of footnotes for easier styling.
        label_style = self.settings.footnote_references  # brackets/superscript
        if not isinstance(node.previous_sibling(), type(node)):
            self.body.append(f'<aside class="footnote-list {label_style}">\n')
        self.body.append(self.starttag(node, 'aside',
                                       classes=[node.tagname, label_style],
                                       role="doc-footnote"))

    def depart_footnote(self, node):
        self.body.append('</aside>\n')
        if not isinstance(node.next_node(descend=False, siblings=True),
                          type(node)):
            self.body.append('</aside>\n')
2bndy5 commented 5 months ago

I did some local testing and adapted the aforementioned visit/depart methods to generate mkdocs-material's div->ol->li structure. However, the blank line persisted, so I think we need to look at CSS inherited from upstream.

jbms commented 5 months ago

I did some local testing and adapted the aforementioned visit/depart methods to generate mkdocs-material's div->ol->li structure. However, the blank line persisted, so I think we need to look at CSS inherited from upstream.

The aside element seems like a more appropriate element, but that may indeed make it more difficult to keep the styling identical.

As far as the blank line, there is some css from the basic theme that deals with it:

https://github.com/sphinx-doc/sphinx/blob/fa290049515c38e68edda7e8c17be69b8793bb84/sphinx/themes/basic/static/basic.css_t#L616

Essentially the footnote identifier is in a span element and the content is in a p element. The p element has display: block so it starts a new paragraph. To fix it we can make the span elements float left.

2bndy5 commented 5 months ago

I copied over the CSS from sphinx' basic theme. I altered the paragraph indent to be slightly less than basic theme's CSS.

Rendered results for #313 can be observed on RTD. I think this should resolve the problem, yes?

N-Wouda commented 3 months ago

Thanks @2bndy5 @jbms! 🎉

2bndy5 commented 3 weeks ago

Released in v0.11.12

N-Wouda commented 3 weeks ago

Fantastic! I'm going to pull this in immediately. Thanks again @2bndy5!