Footnote appears on a new line for gtsummary table

[snhansen]

Description

Consider this example:

---
format: html
---

```{r}
gtsummary::trial |>
  dplyr::select(age, grade, response) |>
  gtsummary::tbl_summary()
```

When rendering with Quarto (v. 1.5.56 on Windows), the footnote appears on a new line like this:

The footnote appears correct using the Viewer-pane in RStudio so it's something that's introduced when rendering with Quarto. Is it a bug?

[mcanouil]

This is a gt issue already reported but it might me also an issue in Quarto:

• Footnote marker placement when using gt::md() in Quarto in gt v0.11.0 rstudio/gt#1773

CC. @cscheid

[olivroy]

Yes, I'd love that! Rich has my contact info

The keep-md output is the following

<table class="gt_table" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
  <thead>
    <tr class="gt_col_headings">
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="num">num</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="char&lt;span class=&quot;gt_footnote_marks&quot; style=&quot;white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;&quot;&gt;&lt;sup&gt;1&lt;/sup&gt;&lt;/span&gt;">char<span class="gt_footnote_marks" style="white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;"><sup>1</sup></span></th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" scope="col" id="&lt;div data-qmd-base64=&quot;RmFjdG9y&quot;&gt;&lt;div class='gt_from_md'&gt;&lt;p&gt;Factor&lt;/p&gt;&#10;&lt;/div&gt;&lt;/div&gt;&lt;span class=&quot;gt_footnote_marks&quot; style=&quot;white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;&quot;&gt;&lt;sup&gt;2&lt;/sup&gt;&lt;/span&gt;"><div data-qmd-base64="RmFjdG9y"><div class='gt_from_md'><p>Factor</p>
</div></div><span class="gt_footnote_marks" style="white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;"><sup>2</sup></span></th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr><td headers="num" class="gt_row gt_right"><span class="gt_footnote_marks" style="white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;"><sup>3</sup></span> <div data-qmd-base64="MC4xMTEx"><div class='gt_from_md'><p>0.1111</p>
</div></div></td>
<td headers="char" class="gt_row gt_left">apricot</td>
<td headers="fctr" class="gt_row gt_center">one</td></tr>
    <tr><td headers="num" class="gt_row gt_right"><div data-qmd-base64="Mi4yMjI="><div class='gt_from_md'><p>2.222</p>
</div></div></td>
<td headers="char" class="gt_row gt_left">banana</td>
<td headers="fctr" class="gt_row gt_center">two</td></tr>
    <tr><td headers="num" class="gt_row gt_right"><div data-qmd-base64="MzMuMzM="><div class='gt_from_md'><p>33.33</p>
</div></div></td>
<td headers="char" class="gt_row gt_left">coconut</td>
<td headers="fctr" class="gt_row gt_center">three</td></tr>
    <tr><td headers="num" class="gt_row gt_right"><div data-qmd-base64="NDQ0LjQ="><div class='gt_from_md'><p>444.4</p>
</div></div></td>
<td headers="char" class="gt_row gt_left">durian</td>
<td headers="fctr" class="gt_row gt_center">four</td></tr>
    <tr><td headers="num" class="gt_row gt_right"><div data-qmd-base64="NTU1MA=="><div class='gt_from_md'><p>5550</p>
</div></div></td>
<td headers="char" class="gt_row gt_left">NA</td>
<td headers="fctr" class="gt_row gt_center">five</td></tr>
    <tr><td headers="num" class="gt_row gt_right"><div data-qmd-base64="TkE="><div class='gt_from_md'><p>NA</p>
</div></div></td>
<td headers="char" class="gt_row gt_left">fig</td>
<td headers="fctr" class="gt_row gt_center">six</td></tr>
    <tr><td headers="num" class="gt_row gt_right"><div data-qmd-base64="Nzc3MDAw"><div class='gt_from_md'><p>777000</p>
</div></div></td>
<td headers="char" class="gt_row gt_left">grapefruit</td>
<td headers="fctr" class="gt_row gt_center">seven</td></tr>
    <tr><td headers="num" class="gt_row gt_right"><div data-qmd-base64="ODg4MDAwMA=="><div class='gt_from_md'><p>8880000</p>
</div></div></td>
<td headers="char" class="gt_row gt_left">honeydew</td>
<td headers="fctr" class="gt_row gt_center">eight</td></tr>
  </tbody>
  
  <tfoot class="gt_footnotes">
    <tr>
      <td class="gt_footnote" colspan="3"><span class="gt_footnote_marks" style="white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;"><sup>1</sup></span> Not a problem</td>
    </tr>
    <tr>
      <td class="gt_footnote" colspan="3"><span class="gt_footnote_marks" style="white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;"><sup>2</sup></span> A problem because fctr is labelled with md</td>
    </tr>
    <tr>
      <td class="gt_footnote" colspan="3"><span class="gt_footnote_marks" style="white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;"><sup>3</sup></span> <div data-qmd-base64="UHJvYmxlbSBiZWNhdXNlIG51bSByb3cgMSBpcyBmbXRfbWFya2Rvd24oKSArIGFsc28gdGhlIGZvb3Rub3RlIGlzIHdyYXBwZWQgaW4gbWQu"><div class='gt_from_md'><p>Problem because num row 1 is fmt_markdown() + also the footnote is wrapped in md.</p>
</div></div></td>
    </tr>
  </tfoot>
</table>

[cscheid]

Unfortunately, we only consider these things bugs when the HTML is well-formed. Currently, GT is emitting HTML that doesn't pass validation, so we need to wait for that to be fixed:

[olivroy]

I think I have been able to fix this partially rstudio/gt#1842.

However, the only html error that seems impossible to get rid of is the <style> inside <div> one. Since Quarto forces a gt table to be inside a <div code-cell>, it seems impossible for gt to pass down its style in any way without creating an html errror.

Would it be possible for Quarto to post-process this to add the style emitted by gt outside of the code-cell div?

[cscheid]

If there's absolutely no other way for us to go about this, then we will have to do it. But I would strongly prefer for Quarto to no longer be in the business of parsing HTML elements by itself, since it's very hard for Quarto to be sufficiently robust about it.

Is there really no way for elements to specify inline styles in this way? Can the entire style tag be replaced by a link element with a data URI?

[olivroy]

We have fixed most issues directly in gt! (now in dev gt 0.11.0.9000)

• I realized that we were using data-qmd-base64 with <div>, but we should have used <span> instead. Put footnotes on the same line with fmt_markdown() in Quarto rstudio/gt#1860
• Using <div> instead of <span> for the spanners Spanner div instead of span to fix spanner rendering in Quarto rstudio/gt#1856
• Normalizing elements id Modify html element ids to use name rather than labels for html validity rstudio/gt#1842

Is there really no way for elements to specify inline styles in this way? Can the entire style tag be replaced by a link element with a data URI?

This is one of the issue that we have yet to resolve. Probably related to rstudio/gt#1007

[olivroy]

This is now fixed in dev gt (0.11.0.9000)! rstudio/gt#1860

# install.packages("pak")
pak::pak("rstudio/gt")