search

quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.92k stars 324 forks source link

GT table is not correctly sized in revealjs after quarto table processing #8233

Open cderv opened 10 months ago

cderv commented 10 months ago 
---
title: "Test"
format: revealjs
keep-md: true
---

## Toto
```{r}
library(magrittr)
library(gt)
iris %>%
  gt()

Tata

iris %>%
  gt() %>%
  cols_width(
    "Sepal.Length" ~ px(300),
    everything() ~ px(50)
  ) %>%
  as_raw_html()


The  second table as a size problem.

Setting `tab_options(quarto.disable_processing = TRUE)` seems to unbreak

And using `format: html` also...
cscheid commented 10 months ago

To be clear, the intermediate .md here has zero width:

  <table class="gt_table" style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; table-layout: fixed; width: 0px;" data-quarto-disable-processing="false" data-quarto-bootstrap="false" width="0" bgcolor="#FFFFFF">

So I don't know what Quarto is supposed to be doing. I think this is on GT...

cderv commented 10 months ago

What puzzled me as a sign of difference somewhere is that HTML rendering is working while revealjs is failing. So something is revealjs does not handle the table properly.

Also as disabling quarto processing fixes it too, it was a sign to me of something different in our processes between the format, or a conflict with revealjs.

The difference when comparing both html file is that

width=0 is a deprecated attributes it seems and CSS width should be preferred.

@rich-iannone I'll open an issue on gt maybe to understand why 0 width is set by gt ?

cderv commented 10 months ago

it was a sign to me of something different in our processes between the format

Found it:

https://github.com/quarto-dev/quarto-cli/blob/27983066d0bfb5e5057c1deed6808f20c23c42a1/src/format/html/format-html-bootstrap.ts#L453-L465

For HTML format, in our processing for bootstrap we do remove the style attribute. So this is why the issue does not show in format: html

cderv commented 10 months ago

Opening the issue in gt helped me understand: https://github.com/rstudio/gt/issues/1532#issuecomment-1888950615

---
title: "Test"
format: 
  html:
    theme: pandoc
keep-md: true
---

## Toto
```{r}
library(magrittr)
library(gt)

Tata

iris %>%
  gt() %>%
  cols_width(
    "Sepal.Length" ~ px(300),
    everything() ~ px(50)
  ) %>%
  as_raw_html()

No bootstrap example with Quarto table processing 

When we do the quarto processing, we don't keep the [`<colgroup>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/colgroup) within the table 
````html
  <table class="gt_table" style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; table-layout: fixed; width: 0px;" data-quarto-disable-processing="false" data-quarto-bootstrap="false" width="0" bgcolor="#FFFFFF">
  <colgroup>
    <col style="width:300px;">
    <col style="width:50px;">
    <col style="width:50px;">
    <col style="width:50px;">
    <col style="width:50px;">
  </colgroup>
  <thead style="border-style: none;">

The width:0px is set when column width are opt in by user (with cols_width). In that case, the overall width is set by <colgroup> total column width.

As Quarto Table processing does not keep it, the not removed width:0px applies...

I think the gt issue is still valid (maybe opt out quarto processing when cols_width is used ?)

but still maybe Quarto Table processing should adapt...

weren't the <colgroup> supposed to be kept in the processing ?

cderv commented 10 months ago

I think this is about Pandoc not parsing colgroup with a col width not in %

in % in px
````powershell > pandoc --from html --to html
Data 1 Data 2 Data 3
^Z
Data 1 Data 2 Data 3
```` 		````powershell > pandoc --from html --to html
Data 1 Data 2 Data 3
^Z
Data 1 Data 2 Data 3
````
AST is having ```` [ ( AlignDefault , ColWidth 0.2 ) , ( AlignDefault , ColWidth 0.4 ) , ( AlignDefault , ColWidth 0.4 ) ] ```` ```` [ ( AlignDefault , ColWidthDefault ) , ( AlignDefault , ColWidthDefault ) , ( AlignDefault , ColWidthDefault ) ] ````

Looking our trace.json for the example shared with gt I get 

colspecs:
              - "(AlignRight, undefined)"
              - "(AlignRight, undefined)"
              - "(AlignRight, undefined)"
              - "(AlignRight, undefined)"
              - "(AlignCenter, undefined)"

so I think this is related to Pandoc not parsing units as px

schwa021 commented 9 months ago

I think this is the same problem I am having. Any GT table that contains any explicit column width assignment (e.g., cols_width(everything() ~ px(200)) does not render correctly in revealjs slides.

Removing the explicit assignment gives me a nicely formatted table with sensibly sized columns.

snhansen commented 9 months ago

Yeah, pixels aren't handled by pandoc: https://github.com/quarto-dev/quarto-cli/issues/4316#issuecomment-1445420433