HTML styles for compact lists are not compact

[martinthomson]

Describe the issue

The compact styling on definition lists (<dl spacing="compact">) does not appear to function properly.

https://www.ietf.org/archive/id/draft-ietf-ohai-ohttp-06.html#section-9.1 includes a large definition list that uses the compact spacing, however it does not render very differently from the normal one. My expectation is that the compact spacing approximates the inter-line spacing of a regular paragraph, but this appears to be half-way between that and the full spacing.

(Separately, the full spacing is extremely wide, which might have the same cause.)

My investigation shows that this is due to the content of the <dd> element including elements (<p> in this case) that have their own margins. These margins still apply, but it appears to expand the spacing between items.

I found that the following works, even if it is a little clunky:

:is(dl.compact, .dlCompact) > dd > :is(:first-child, .break:first-child + *) {
  margin-top: 0;
}
:is(dl.compact, .dlCompact) > dd > :last-child {
  margin-bottom: 0;
}

(The .break elements that are scattered throughout are a little annoying to style around; I just set them to display: none but then I need to do this hack here. The dl.compact rule is for Julian's XSLT output, but it's been a while since I checked how that renders; ignore that one.)

Code of Conduct

• I agree to follow the IETF's Code of Conduct

[kesara]

@mcr, @martinthomson: The proposed change in #1190 produces following example output.

Source:

      <section anchor="normal">
        <name>Normal</name>
        <dl spacing="normal">
          <dt>Name</dt>
          <dd>
            <t>LINKTYPE_NULL</t>
          </dd>
          <dt>Number</dt>
          <dd>
            <t>0</t>
          </dd>
          <dt>Description</dt>
          <dd>
            <t>BSD loopback encapsulation</t>
          </dd>
        </dl>
      </section>
      <section anchor="compact">
        <name>Compact</name>
        <dl spacing="compact">
          <dt>Name</dt>
          <dd>
            <t>LINKTYPE_NULL</t>
          </dd>
          <dt>Number</dt>
          <dd>
            <t>0</t>
          </dd>
          <dt>Description</dt>
          <dd>
            <t>BSD loopback encapsulation</t>
          </dd>
        </dl>
      </section>
    </section>

HTML:

PDF:

[martinthomson]

I tried a similar trick myself, but there are a few complications.

1. This retains the line-height reduction. That makes a compact list look very different from other text, which is not at all what happens with the text renderer. I recommend removing the line-height: 1 rule that you have for compact lists of all forms.
2. This eliminates inter-paragraph spacing within the <dd>.

Your dl.compact dd * rule catches more than it probably should. Any child element of the dl.compact will lose margins.

That is why I recommended only looking at first-child and last-child.

Take the following, which is a form that appears in several documents:

<dl class="compact">
  <dt>Lorem Ipsum</dt>
  <dd>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </dd>
  <dt>Bogan Ipsum</dt>
  <dd>
    <p>He hasn't got a chuck a yewy no worries as busy as a bounce? Ciggie butt brain sheila how she'll be right boozer. Come a cockie when she'll be right jackaroo. He hasn't got a boil-over mate as cross as a fly wire. She'll be right cactus mate to you little ripper dunny? As stands out like flake with as busy as a fair go.</p>
    <p>Lets throw a ford and gutful of grog. As busy as a bottlo flamin it'll be decent nik? We're going jillaroo piece of piss she'll be right fairy floss. Get on the cans mozzie heaps this is a joke blow in the bag. Flat out like a blowie to flat out like a tucker-bag? Come a stubby flamin come a bin chicken. As cunning as a two up also hit the frog and toad wuss. Come a hoon and grab us a flick.</p>
  </dd>
</dl>

Aside from line-height: 1 meaning that descenders from one line touch the ascenders from the line below, the distinction between paragraphs is lost. It's worse if you have lists within lists, if those inner lists don't also use .compact. That's why I recommend the child (>) selector rather than the descendant selector ( ).