Asciidoctor :: Discussion

Why is there a inside an <li>?

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

2 messages Options

Toolforger

Jan 04, 2020; 8:36pm

Why is there a inside an <li>?

I am using Asciidoctor to generate unordered lists (<ul>).

What's the rationale behind

* link:../../index.html[Website]
** link:../../blog/index.html[Blog]
*** link:../../blog/2013/index.html[2013]
**** link:../../blog/2013/2013-01.html[First Post]
**** link:../../blog/2013/2013-02.html[Second Post (from attribute)]
*** link:../../blog/2019/index.html[Year 2019 (from attribute)]
**** link:../../blog/2019/2019-01.html[Third Post (from attribute)]
**** link:../../blog/2019/2019-02.html[Fourth Post (from attribute)]
**** link:../../blog/2019/2019-03.html[Fifth Post (from attribute)]
*** link:../../blog/2020/index.html[Year 2020 (from attribute)]
**** link:../../blog/2020/2020-01.html[Sixth Post (from attribute)]
**** Seventh Post (from attribute)

generating HTML like the following?

<div class="ulist">
  <ul>
    <li>
      <p><a href="../../index.html">Website</a></p>
      <div class="ulist">
        <ul>
          <li>
            <p><a href="../../blog/index.html">Blog</a></p>
            <div class="ulist">
              <ul>
                <li>
                  <p><a href="../../blog/2013/index.html">2013</a></p>
                    <div class="ulist">
                      <ul>
                        <li>
                          <p><a href="../../blog/2013/2013-01.html">First Post</a></p>
                        </li>
                        <li>
                          <p><a href="../../blog/2013/2013-02.html">Second Post (from attribute)</a></p>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <p><a href="../../blog/2019/index.html">Year 2019 (from attribute)</a></p>
                    <div class="ulist">
                      <ul>
                        <li>
                          <p><a href="../../blog/2019/2019-01.html">Third Post (from attribute)</a></p>
                        </li>
                        <li>
                          <p><a href="../../blog/2019/2019-02.html">Fourth Post (from attribute)</a></p>
                        </li>
                        <li>
                          <p><a href="../../blog/2019/2019-03.html">Fifth Post (from attribute)</a></p>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <p><a href="../../blog/2020/index.html">Year 2020 (from attribute)</a></p>
                    <div class="ulist">
                    <ul>
                      <li>
                        <p><a href="../../blog/2020/2020-01.html">Sixth Post (from attribute)</a></p>
                      </li>
                      <li>
                        <p>Seventh Post (from attribute)</p>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Sorry for giving full example with everything, I wasn't sure whether removing something would change the behaviour or not.

Issue is that the in <li>...</li> is generating too much vertical space between list items.
I know I can restyle the thing with the proper selectors, but I'd like to know what's happening first, so my CSS won't break with the next Asciidoctor update.

mojavelinux

Jan 04, 2020; 9:18pm

Re: Why is there a inside an <li>?

Administrator

The reason for the tag is to isolated the primary text (from other attached blocks). The reason the was chosen is historical. The original design goal of Asciidoctor was to match the HTML generated by AsciiDoc.py (long before Asciidoctor was widely accepted). And that output was designed to match what DocBook produces; in this case, to style the primary text.

There's a proposal to change the tag to a span. See https://github.com/asciidoctor/asciidoctor/issues/1087#issuecomment-64730232 This will be addressed in the new HTML converter.

In the meantime, that issue demonstrates how you can override the HTML today. Know that all the HTML that Asciidoctor produces is customizable.

Best,

-Dan

On Sat, Jan 4, 2020 at 1:36 PM Toolforger [via Asciidoctor :: Discussion] <[hidden email]> wrote:

I am using Asciidoctor to generate unordered lists (<ul>).

What's the rationale behind

* link:../../index.html[Website]
** link:../../blog/index.html[Blog]
*** link:../../blog/2013/index.html[2013]
**** link:../../blog/2013/2013-01.html[First Post]
**** link:../../blog/2013/2013-02.html[Second Post (from attribute)]
*** link:../../blog/2019/index.html[Year 2019 (from attribute)]
**** link:../../blog/2019/2019-01.html[Third Post (from attribute)]
**** link:../../blog/2019/2019-02.html[Fourth Post (from attribute)]
**** link:../../blog/2019/2019-03.html[Fifth Post (from attribute)]
*** link:../../blog/2020/index.html[Year 2020 (from attribute)]
**** link:../../blog/2020/2020-01.html[Sixth Post (from attribute)]
**** Seventh Post (from attribute)

generating HTML like the following?

<div class="ulist">
  <ul>
    <li>
      <p><a href="../../index.html">Website</a></p>
      <div class="ulist">
        <ul>
          <li>
            <p><a href="../../blog/index.html">Blog</a></p>
            <div class="ulist">
              <ul>
                <li>
                  <p><a href="../../blog/2013/index.html">2013</a></p>
                    <div class="ulist">
                      <ul>
                        <li>
                          <p><a href="../../blog/2013/2013-01.html">First Post</a></p>
                        </li>
                        <li>
                          <p><a href="../../blog/2013/2013-02.html">Second Post (from attribute)</a></p>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <p><a href="../../blog/2019/index.html">Year 2019 (from attribute)</a></p>
                    <div class="ulist">
                      <ul>
                        <li>
                          <p><a href="../../blog/2019/2019-01.html">Third Post (from attribute)</a></p>
                        </li>
                        <li>
                          <p><a href="../../blog/2019/2019-02.html">Fourth Post (from attribute)</a></p>
                        </li>
                        <li>
                          <p><a href="../../blog/2019/2019-03.html">Fifth Post (from attribute)</a></p>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <p><a href="../../blog/2020/index.html">Year 2020 (from attribute)</a></p>
                    <div class="ulist">
                    <ul>
                      <li>
                        <p><a href="../../blog/2020/2020-01.html">Sixth Post (from attribute)</a></p>
                      </li>
                      <li>
                        <p>Seventh Post (from attribute)</p>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

If you reply to this email, your message will be added to the discussion below:

https://discuss.asciidoctor.org/Why-is-there-a-p-inside-an-li-tp7472.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

... [show rest of quote]

Dan Allen | @mojavelinux | https://twitter.com/mojavelinux

Why is there a <p> inside an <li>?

Why is there a <p> inside an <li>?

Re: Why is there a <p> inside an <li>?