Search code examples
cssmathjax

MathJax: Is there a way to vertically align an expression?

While creating a math test on my site, I ran into an issue: An inline multi-line expression (equation), horizontally aligned at the equal signs, will be vertically centered on its row.

If the expression only takes up a single row, it works perfectly (even though I must use different fonts and sizes for the site and MathJax).

Is it possible to add a command (something like \valign) to the expression so that the row that contains the command becomes the one that is vertically aligned with the surrounding text?

For example:

\(\begin{align}2 \cdot x &= 8\\x &=\end{align}\)

… would be …

\(\begin{align}\valign 2 \cdot x &= 8\\x &=\end{align}\)

This is how it is now:

How it is now

This is how I'd like it to be:

Goal

I have tried the following:

\raise -.6em {}

This has an effect, but the value is a guess and not exact. It is still a pixel off, and the larger I make the default value (rem), the greater the error.

I have fiddled with the vertical-align of the expression and set it to text-top while leaving the surrounding text at baseline. This is also not perfect. Sure, I can mess around with CSS until this expression looks good, but what about the next one?

Solution

  • The align environment is a display-level environment, and should not be used within in-line math expressions. Instead, you should use aligned, which takes an option that controls its vertical alignment. So

    \(\begin{aligned}[t]2 \cdot x &= 8\\x &=\end{aligned}\)

    would position the alignment so that its top line is on the same base line as the surrounding text.

    Here is an example:

    <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

a) \(\begin{aligned}[t] 2 \cdot x &amp;= 8\\x &amp;= 4\end{aligned}\)

    In this case, the [t] means align to the top line. You could also use [b] to align to the bottom line.