MathML equation styling for PDF exports

Using Pressbooks Adding Math or Interactive Content
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!

2 Likes
3

@SteelWagstaff, are there plans to better set math type for in-line PDFs? This is still one of my greatest gripes. In-line math is vertically center-aligned and—because MathJax renders the math as an image—general `vertical-align` CSS does not suffice. Automation here seems difficult since rendering math as images with alt-text makes individual image placement a challenge. Perhaps based on the math operations used a class could be added and vertical-alignment could be managed with CSS? Oof.

4

This is what I ended up using to get the centering to work on display=”block”. Bit of back and forth work with gemini to figure it out.

/* * Target MathJax images using the Base64 signature for “display=block” * found in their src URL. This specifically targets only block-level equations. */
img.mathjax[src*=‘ZGlzcGxheT0iYmxvY2si’] {

display: block !important;

margin-left: auto;

margin-right: auto;

}

5

I can get the scaling to work for the first style you set, but the .equation-block doesn’t seem to be doing anything for any of the mathml with display=”block”. So all of my block mathml is rendering just like the inline display (scale works on both from the first css you put in - below). Any ideas on how to get the “block” style to be centered in the pdf export?

/* 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%;
}

6

@Robert_Foth, I too struggled with centering block math equations. My workaround was to avoid using <math display=“block” altogether. All of my math equations include the in-line attribute, <math display=“inline”. I then wrap the block math equations in a tag, <span class="equation-block"> and style the block math equations with CSS:

p > span.equation-block {
text-align: center;
}

Note: all of my equations are contained within tags, hence p > span.

Here’s an example for the quadratic equation HTML with CSS:

HTML

  <p><span class="equation-block"><math display="inline" xmlns="http://www.w3.org/1998/Math/MathML" class="equation"> <semantics> <mrow> <mi>x</mi> <mo> = </mo> <mfrac> <mrow> <mi>−</mi> <mi>b</mi> <mo> ± </mo> <msqrt> <mrow> <msup> <mi>b</mi> <mn> 2 </mn> </msup> <mo> − </mo> <mn> 4 </mn> <mi>a</mi> <mi>c</mi> </mrow> </msqrt> </mrow> <mrow> <mn> 2 </mn> <mi>a</mi> </mrow> </mfrac> </mrow> <annotation encoding="application/x-tex"> x = \frac{- b \pm \sqrt{b^{2} - 4ac}}{2a} </annotation> </semantics> </math></span></p>

CSS

/* math styling */
/* set the scale for all mathjax elements to 80% */
.mathjax {
transform-origin: center center;
transform: scale(0.8);
margin-top: -1%;
margin-bottom: -1%;
margin-left: -0.5%;
margin-right: -0.5%;
display: inline-block !important;
}

/* 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%;
}

.equation-block {
  display: inline-block;
  width: 100%;
  max-width: 800px;
  text-align: center;
  position: relative;
  vertical-align: middle;
}

p > span.equation-block {
  text-align: center;
}
7

Thanks for sharing the approach!