Xaringan: MathJax font size when including css

[garthtarr]

When I include a css file, MathJax renders smaller than it should. Refreshing individual slides fixes that slide but the other slides remain small. What's bizzare is that using css ["default"] doesn't give this behaviour, but using css ["default.css"] where default.css is a copy and paste of the default.css file from xaringan/inst/rmarkdown/templates/xaringan/resources/default.css does give this behaviour.

mathjax_test.Rmd

title: "MathJax Test"
output:
  xaringan::moon_reader:
    css: ["default.css"]
---

## Equations


You can put inline equations inside dollar signs, e.g. `$\alpha + \beta$` renders as $\alpha + \beta$.   Display style works with double dollar signs: 
$$\bar{X} = \frac{1}{n}\sum_{i=1}^n X_i$$



---

## Central limit theorem 


Let $X_{1}, X_{2},\ldots$ be independent random variables with characteristic functions $\phi_{1},\phi_{2},\ldots$ and distribution functions $F_{1},F_{2},\ldots$ and let $\mathbb{E} X_{i}=0$ and $\mathbb{E} X_{i}^{2}=\sigma_{i}^{2}<\infty$, $i=1,2,\ldots$.

Write $S_{n} = \sum_{i=1}^{n}X_{i}$ and $s_{n}=\textrm{Var}(S_{n}) = \sum_{i=1}^{n}\sigma^{2}_{i}$.  Let
\begin{align}
L_{n}(\varepsilon) & = s^{-2}_{n}\sum_{i=1}^{n}\mathbb{E}\big[ X_{i}^{2}\mathbb{I}\big(|X_{i}|>\varepsilon s_{n}\big)\big] \nonumber \\
& = s_{n}^{-2}\sum_{i=1}^{n}\int_{|x|>\varepsilon s_{n}}x^{2}\operatorname{d}F_{n}(x)
\end{align}
The _Lindeberg condition_ states:
$$\begin{equation}\text{for all } \varepsilon>0,\ L_{n}(\varepsilon)\rightarrow0 \text{ as }n\rightarrow\infty.\label{LindCond}\end{equation}$$
If $\mathbb{E}|X_{1}|^{3}<\infty$ and $s_{n}^{-3}\sum_{i=1}^{n}\mathbb{E}|X_{i}^{3}|\rightarrow 0$ as $n\rightarrow\infty$ then Lindeberg's condition holds.  This condition under which the Lindeberg's condition holds is known as Liapounov's condition.

default.css

a, a > code {
  color: rgb(249, 38, 114);
  text-decoration: none;
}
.footnote {
  position: absolute;
  bottom: 3em;
  padding-right: 4em;
  font-size: 90%;
}
.remark-code-line-highlighted     { background-color: #ffff88; }

.inverse {
  background-color: #272822;
  color: #d6d6d6;
  text-shadow: 0 0 20px #333;
}
.inverse h1, .inverse h2, .inverse h3 {
  color: #f3f3f3;
}
/* Two-column layout */
.left-column {
  color: #777;
  width: 20%;
  height: 92%;
  float: left;
}
.left-column h2:last-of-type, .left-column h3:last-child {
  color: #000;
}
.right-column {
  width: 75%;
  float: right;
  padding-top: 1em;
}
.pull-left {
  float: left;
  width: 47%;
}
.pull-right {
  float: right;
  width: 47%;
}
.pull-right ~ * {
  clear: both;
}
img, video, iframe {
  max-width: 100%;
}
blockquote {
  border-left: solid 5px lightgray;
  padding-left: 1em;
}
.remark-slide table {
  margin: auto;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
.remark-slide table thead th { border-bottom: 1px solid #ddd; }
th, td { padding: 5px; }
.remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { background: #eee }

@page { margin: 0; }
@media print {
  .remark-slide-scaler {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1) !important;
    top: 0 !important;
    left: 0 !important;
  }
}

Before refreshing the slide:

After refreshing the slide:

It also means when printing, all the MathJax is in "small" mode (because the individual slides aren't refreshed).

[jvcasillas]

I have no solution to this issue, just want to point out that I too have noticed it. Reloading/refreshing on each slide with LaTeX math is rather cumbersome.

[ekstroem]

My (hackish) solution is to define the small mode in the right size, reload on the title page (which typically does not contain math), and then move back and forth between the slides without reloading at any time

[yihui]

I don't have time for a perfect solution, but I think the key will be to re-render math when a slide is shown. Here is a solution that is far from being optimal:

````yaml

title: "MathJax Test"
output:
xaringan::moon_reader:
css: ["default.css"]
includes:

after_body: ["rerender.html"]

````

where rerender.html is

<script>
slideshow.on('afterShowSlide', function(slide) {
  MathJax.Hub.Rerender();
});
</script>

To make it an optimal solution, we should only call MathJax.Hub.Rerender() once for a slide instead of every time a slide is shown. In other words, there needs to be a token to remember that math has been re-rendered on a slide. This is relatively easy to implement, e.g.,

<script>
(function() {
  var rendered = {};
  slideshow.on('afterShowSlide', function(slide) {
    var i = slide.getSlideIndex();
    if (rendered[i]) return;
    MathJax.Hub.Rerender();
    rendered[i] = true;
  });
})();
</script>

but unfortunately it is buggy for unknown reasons: if you navigate from slide 2 to 1 (title slide), then to 2, you will see alpha + beta rendered twice.

Second, ideally we should pass the DOM element corresponding to the current slide to MathJax.Hub.Rerender() instead of re-rendering all math on all slides.

[garthtarr]

For now I went with .mjx-chtml{ font-size: 100% !important; } from https://github.com/yihui/xaringan/issues/62 which is also not ideal

[hturner]

The problem seems to be specific (unique?) to the TeX-MML-AM_CHTML MathJax configuration that xaringan uses. If, in the output HTML file, I change

https://cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML

to e.g.

https://cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML

The equations scale as expected. I tried for a few different common configurations:

• TeX-MML-AM_HTMLorMML
• TeX-AMS-MML_HTMLorMML
• TeX-AMS_HTML
• TeX-AMS_HTML-full

All of these displayed fine without refreshing. Is there a way to specify the MathJax configuration used?

[gadenbuie]

Great find @hturner! You can specify the MathJax configuration to use by setting the mathjax option in the YAML header, like this

---
title: "MathJax Test"
output:
  xaringan::moon_reader:
    mathjax: "https://cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML"
---

[hturner]

Ah thanks, that's a lot easier than post-processing!

[jvcasillas]

So it seems like the solution is to make TeX-MML-AM_HTMLorMML the default. Great find @hturner!

[yihui]

This is the same issue as #62, and both should be fixed now. Thanks!