Search code examples
r-markdownmathjax

Bad alignment of multiline Mathjax equation

I'm trying to create a multi-line Mathjax equation where each line is aligned at multiple alignment points.

The output I'm currently getting is:

Misalignment

Notice how the alignment appears to alternate: It aligns the y_1*Pr(Y=y_1) with 0*0.09 at the left, and then the +y_2*Pr(Y=y_2) with +1*0.33 at the right (aligning the 0.33 in the 2nd line with the end of the (y=y_2) of the first line, instead of aligning the + on each of the lines, as one would want).

Is there a way to prevent this issue and ensure alignment always happens exactly at the & symbol, ensuring say that alignment always happens at the + symbols on each line?

Here's my Mathjax code below for reference:

\begin{aligned}
\sum_{i=1}^{k} y_i\times \text{Pr}(Y=y_i) &= y_1\times\text{Pr}(Y=y_1) &+ y_2\times\text{Pr}(Y=y_2) &+ y_3\times \text{Pr}(Y=y_3) &+ y_4\times \text{Pr}(Y=y_4) \\ 
&= `r vals[1]`\times `r probs[1]` &+ `r vals[2]`\times `r probs[2]` &+ `r vals[3]`\times `r probs[3]` &+ `r vals[4]`\times `r probs[4]` 
\end{aligned}

Note also that I'm using Mathjax within an Rmarkdown document where the output format is HTML (hence the `r some R code` parts).

Solution

  • The columns of an aligned environment are horizontally aligned alternately right then left because they are intended (in pairs) to create columns of align equalities. Your use is a bit non-standard, but if you want to align on the plus signs, you need to skip the right-aligned rows, so should use two ampersands before the plus signs, not one. For example:

    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>

\begin{align}
\sum_{i=1}^{k} y_i\times \text{Pr}(Y=y_i) 
  &  = y_1\times\text{Pr}(Y=y_1)
  && + y_2\times\text{Pr}(Y=y_2)
  && + y_3\times\text{Pr}(Y=y_3)
  && + y_4\times\text{Pr}(Y=y_4) \\ 
  &  = 0\times 0.09
  && + 1\times 0.33
  && + 2\times 0.47
  && + 3\times 0.11
\end{align}

    Because the pairs of columns are separated by a fairly large gap, this leaves a lot of space before the plus signs, which may not be desirable.

    If you want to have no extra space, you can use \rlap{} and \phantom{} to overlay the number products over top of a space that is as wide as the variable products in the first line, and only use two columns. It is a but more complicated to set up, but works nicely:

    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>

\begin{align}
\sum_{i=1}^{k} y_i\times \text{Pr}(Y=y_i)
 & = y_1\times\text{Pr}(Y=y_1)
   + y_2\times\text{Pr}(Y=y_2)
   + y_3\times\text{Pr}(Y=y_3)
   + y_4\times\text{Pr}(Y=y_4) \\ 
 & = \rlap{0\times 0.09}\phantom{y_1\times\text{Pr}(Y=y_1)}
   + \rlap{1\times 0.33}\phantom{y_2\times\text{Pr}(Y=y_2)}
   + \rlap{2\times 0.47}\phantom{y_3\times\text{Pr}(Y=y_3)}
   + 3\times 0.11
\end{align}

    It would even be possible to line up both the plus and times signs using this things like \phantom{y_1}\llap{0}\times\rlap{0.09}\phantom{\text{Pr}(Y=y_1)}, but I will leave that as an exercise.

    Of course, this idea is based on knowing which terms will be the widest, and using those in the \phantom{} calls, so if the width of the numbers gets wider, you would need to switch where the phantoms are used.