Improve metadata and more generally HTML code for :empty selectors

[mcanouil]

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.

• quarto-cli/src/resources/formats/html/templates/title-metadata.html

  Lines 27 to 70 in b89d353

  	<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$
  	$if(date)$
  	<div>
  	<div class="quarto-title-meta-heading">$labels.published$</div>
  	<div class="quarto-title-meta-contents">
  	<p class="date">$date$</p>
  	</div>
  	</div>
  	$endif$
  	$if(date-modified)$
  	<div>
  	<div class="quarto-title-meta-heading">$labels.modified$</div>
  	<div class="quarto-title-meta-contents">
  	<p class="date-modified">$date-modified$</p>
  	</div>
  	</div>
  	$endif$
  	$if(doi)$
  	<div>
  	<div class="quarto-title-meta-heading">$labels.doi$</div>
  	<div class="quarto-title-meta-contents">
  	<p class="doi">
  	<a href="https://doi.org/$doi$">$doi$</a>
  	</p>
  	</div>
  	</div>
  	$endif$
  	</div>

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."

[cscheid]

Thank you!

[cscheid]

Concretely, we have this kind of thing in our code: https://github.com/quarto-dev/quarto-cli/blob/main/src/command/render/pandoc.ts#L560-L639. It wouldn't be too difficult to add an additional postprocessor that removed all pure-whitespace content from elements.

[cderv]

Whitespaces in Pandoc's template are indeed tricky. We like that when writing templates because it is easier to read, but they indeed are kept as-is.

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

This makes sense I believe that our template does output the HTML we expect when no metadata.

This would be scoped changed to this quarto-title-meta we own.

It wouldn't be too difficult to add an additional postprocessor that removed all pure-whitespace content from elements.

If we go this road, would we process all HTML content (even $body$ which is "own" by the user) or is this only for the quarto-title-meta field and maybe others ?

[mcanouil]

Not only .quarto-title-meta class, at the very least the header#title-block-header block should be cleaned to allow users to customise it how they want.