tinytable in quarto/revealjs

[giabaio]

This may be related to #10068 in quarto/cli (here). I have a quarto presentation (via revelajs) and adding tinytable tables messes up with the formatting.

I load a html file that defines some macros (including LaTeX formatting) and everything is fine. If I add the tinytable, then it's like these macros are forgotten --- the tables are rendered fine, but the rest of the presentation that relies on them is badly broken...

Is this to do with the recognised problem you discussed in the quarto forum?

Thanks! Gianluca

[giabaio]

PS: I think I know why... Including a tinytable adds the following to the html code

    <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>

and this happens to overwrite my own script (with the definition of all the macros), which would read something like this

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: {
    /* This enables color macros */
    extensions: ["color.js"],
    Macros: {
      /* Probability & mathematical symbols */
      Pr: "{\\style{font-family:inherit; font-size: 110%;}{\\text{Pr}}}",
      exp: "{\\style{font-family:inherit; font-size: 105%;}{\\text{exp}}}",
      log: "{\\style{font-family:inherit; font-size: 105%;}{\\text{log}}}",
 ...

Is there any easy way to ensure that this doesn't happen?... Thanks!

[vincentarelbundock]

@giabaio,

There are two issues here: (1) MathJax overriding your own settings, and (2) CSS and Bootstrap in Quarto+RevealJS.

MathJax override

Thanks for investigating this issue!

You are right. By default, tinytable loads MathJax with this script in every table, and this can cause conflicts in cases like yours. There is already an issue open to discuss that problem:

https://github.com/vincentarelbundock/tinytable/issues/287

I'm not sure exactly what the best solution is yet, since tinytable cannot know if MathJax is loaded elswhere in a document before printing its own table. I'll have to think about this more before implementing a solution.

In the meantime, I added a new feature to version 0.3.0.21, which you can install from Github. Calling this in your Quarto document will prevent tinytable from adding the MathJax script in all subsequent tables:

options(tinytable_html_mathjax = FALSE)

Please note that this feature is marked as "EXPERIMENTAL" in the documetation. It may change when I settle on a more permanent solution to the MathJax issue.

RevealJS CSS

As noted in the Quarto discussion you link to, the RevealJS format used by Quarto does not supply Bootstrap, and overrides many of the standard tinytable look. I will work on this when my vacation ends, and you will be able to follow progress here:

https://github.com/vincentarelbundock/tinytable/issues/284

For now, I tend to load CSS options like these in my own presentations. It's not perfect, but it gets us a bit closer to the normal look:

.reveal .table td, .reveal .table th {
  font-size: .7em;
  border-bottom: none;
  white-space: nowrap;
  border: none;
}

[giabaio]

Thank you @vincentarelbundock! The first issue (which was the most important and would break the rest of the presentation) is now not a problem any more and adding options(tinytable_html_mathjax = FALSE) does work. Much appreciated!

Gianluca

[vincentarelbundock]

Great!

But as stated above, please be mindful that this may change in the future when a good overall solution is implemented. I hope not, but if that happens it'll be documented in NEWS.md.