MathML equation styling for PDF exports

Theming
1

Background:

I am using MathML equations throughout one of our books. The MathML formats nicely for both inline and non-inline equations. Both equations are styled using <math display="inline"> but the non-inline equations inherit properties from custom classes (equation) for out-of-line “block” styling.

Issue:

In the web, it is easy enough for me to adjust the font-size accordingly to better align with the surrounding text:

CSS:

  /* Set base font size for all MathJax containers */
  mjx-container {
    font-size: 100% !important;
  }

  /* Increase font size for elements with class 'equation' */
  mjx-container .equation {
    font-size: 120% !important;
  }

However, with PDF exports, I believe the equations are not styled with MathJax so this styling does not apply. How can I style MathML math equations for PDF exports?

Diagnostics

The inline MathML is rendered as the following in the PDF export, how can I adjust the scaling factors here?
<span role="img" aria-label="" style="width: calc(var(--total-scale-factor) *42.629999999999995px); height: calc(var(--total-scale-factor) *10.15199999999993px); left: calc(var(--total-scale-factor) *209.7491px); top: calc(var(--total-scale-factor) *194.72260000000006px);"></span>

The non-inline MathML is rendered as the following in the PDF export, same question. ^^^
<span role="img" aria-label="" style="width: calc(var(--total-scale-factor) *63.51599999999996px); height: calc(var(--total-scale-factor) *79.31399999999996px); left: calc(var(--total-scale-factor) *274.242px); top: calc(var(--total-scale-factor) *271.20000000000005px);"></span>

2

I ended up with class-based scaling for mathjax images that made the in-line equations appear more similar to the surrounding text and out-of-line equations appear a bit larger in the PDF exports. Here’s the CSS that eventually got me there:

/* set the scale for all mathjax elements to 80% */
img.mathjax {
transform-origin: center center;
transform: scale(0.8);
margin-top: -1%;
margin-bottom: -1%;
margin-left: -0.5%;
margin-right: -0.5%;
}

/* set the scale for equation blocks to 120% */
.equation-block img.mathjax {
transform-origin: center center;
transform: scale(1.2);
margin-top: 1%;
margin-bottom: 1%;
margin-left: 1%;
margin-right: 1%;
}

Thanks goes to Mich for the help!

1 Like