Improve metadata and more generally HTML code for :empty selectors

TL;DR

• The Pandoc/Quarto HTML template inserts empty lines inside <div class="quarto-title-meta"> when no metadata is present.
• This causes the div to not be considered empty by CSS, so div:empty { display: none; } does not work.
• As a result, unwanted empty divs are displayed and styling cannot be suppressed using the :empty selector.
• This issue is unlikely limited to metadata block.

Description/Example

The HTML template for the title block metadata looks like this:

<div class="quarto-title-meta">
  $if(by-affiliation)$
  $elseif(by-author)$
  <div>
    <div class="quarto-title-meta-heading">$labels.authors$</div>
    <div class="quarto-title-meta-contents">
      $for(by-author)$
       <p>$_title-meta-author.html()$</p>
      $endfor$
    </div>
  </div>
  $endif$

  ...
</div>

When no metadata this leads to:

<div class="quarto-title-meta">

</div>

Because of the empty lines in between conditionals.

• https://github.com/quarto-dev/quarto-cli/blob/b89d353096ccfae4992de7976a86596171e721bf/src/resources/formats/html/templates/title-metadata.html#L27-L70

Problem

• The div is not empty in CSS parlance due to whitespace/empty lines.
• Thus, you cannot hide it with:

div:empty {
  display: none;
}

• If you add styling to div.quarto-title-meta, it gets displayed every time, even with no metadata.
• You also get empty lines added.

Proposed Fix

One way to fix this is to remove the empty lines in between metadata in the template.

Workarounds

For now, I’m doing the cleaning in JS:

<script>
  document.querySelectorAll('header#title-block-header div, header#title-block-header p').forEach(function(el) {
    if (!el.textContent.trim()) {
      el.style.display = "none";
      el.textContent = "";
    }
  });
</script>

References

• https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace
• https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Discussion

• Some users have experienced “empty” divs being added regardless of template modifications.
• Removing empty lines makes :empty work.
• "We arguably should be doing this in our HTML postprocessor."