Space between lines in bulleted lists

[dicook]

Consider the following .Rmd

---
title: "bulleted list issues"
---

## Good bullets

- one
- two
- three

## Bad bullets

-   one blah

-   two what

-   three

When rendered to html_document the "bad" bullets have a blank line between each bullet point, which is read as "empty line" by screen readers.

When rendered to rjtools::rjournal_web_article both sets of bullet points have a blank line between each bullet point.

It would be good if the rjtools style did not introduce blank lines in the first case (and authors were encouraged to use this form). The blank lines appear to be due to

tags nested within

tags.

Originally posted by @ajrgodfrey and @hturner at https://github.com/rjournal/rjtools/issues/102#issue-1888783511

[cderv]

This is how it looks

By "have a blank line between each bullet point", you are referring to the styling in browser as in image above ?

The line space between bullet is the result of margin at bottom for li element

d-article li {
    margin-bottom: 1em;
    margin-left: 0;
    padding-left: 0;
}

which is inserted by Distill JS itself.

This is the HTML we get

<h2 id="good-bullets">Good bullets</h2>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<h2 id="bad-bullets">Bad bullets</h2>
<ul>
<li><p>one blah</p></li>
<li><p>two what</p></li>
<li><p>three</p></li>
</ul>

As discussed in original issue (https://github.com/Abhi-1U/texor/issues/60#issuecomment-1738814673), the loose list have <p> introduce on purpose by Pandoc

So for rjtools, unless you are tweaking something there, it should be the same HTML and than same CSS rule.

which is read as "empty line" by screen readers.

I don't know what exactly is not correct for screen readers. It would be really good to understand that to see what is the mistake in there :thinking: