How to left align Mathjax elements

Question

Mathjax elements are by default, center aligned.

How can I make Mathjax elements left aligned?

Fanjet

Answer 1

MathJax.Hub.Config({
    jax: ["input/TeX","output/HTML-CSS"],
    displayAlign: "left"
});

Fanjet

This is the better solution. Important has too high a precedence and should be avoided. – Polytheism

Also, if you've come here, it is likely that you want to set a left padding: #12707594 – Polytheism

I came here looking how to set centering for only one expression. – Sunbonnet

Answer 2

I find a trick only in MathJax semantic by add \hspace{10cm} at the first line end[MathJax and left align].code like this:

$$
\begin{align}
x & = 1+1 \hspace{100cm} \\
& = 2
\end{align}
$$

For example my code is:

$$
\begin{aligned}
\sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\
 & = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\ 
 & = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\
 & = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\ 
 & \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{aligned}
$$

And the Effect like this:

Romilly

Answer 3

Or my solution with CSS:

.MathJax_Display {
  text-align: left !important;
}

It worked for me.

Tawnyatawsha

This appears to be broken at the moment. – Xenocrates

Doesn't work anymore in case anyone comes across this. – Hiatt

Answer 4

According to the MathJax 3.0 documentation you need the displayAlign option by adding the following to your HTML file:

<script>
    MathJax = {
        chtml: { displayAlign: 'left' }
    };
</script>

Jailhouse

Answer 5

Edit to previous answer, this works perfectly for me

.MathJax_Display { 
    text-align: left !important;
    display: inline !important;
}

Suffragan

That is invalid CSS. What is the <br> doing there? – Xenocrates

Answer 6

The other answers didn't work for me - but what did work was modifying the MathML that MathJax was displaying (and I know there are equivalents for other input formats). I was trying to indent right, but the concept is the same.

For MathML I had to add indentalign="right" to the <math ...> tag, eg:

<math indentalign="right" xmlns="http://www.w3.org/1998/Math/MathML">...</math>

after which MathJax correctly right-aligned my content.

Tectonic

Answer 7

In the current version of MathJax (2.7.5) with the standard configuration TeX-MML-AM_CHTML, the text-align property is set on an element with classes mjx-chtml and MJXc-display. Therefore the solutions building on MathJax_Display won't work anymore.

For more flexibility you can add a parent <div class="math-left-align"> to your math content, such that you can choose how to align your math case-by-case.

Your HTML would then look like

<div class="math-left-align">
    $$ a + b = c $$
</div>

And the corresponding CSS

.math-left-align .mjx-chtml.MJXc-display{
    text-align: left !important;
 }

Parotid

Answer 8

@上山老人's answer works beautifully for me. To clarify,

• Instead of &=&, use & = for every = within a block between \begin{align} and \end{align}.

In my environment (using Typora),

• \begin{align} adds (1), (2), ... to every line. Verbose.
• \begin{align*} without such numbers
• \begin{aligned} adds just one (1) for multiple lines

\begin{aligned}
\cos 3\theta & = \cos (2 \theta + \theta) \\
& = \cos 2 \theta \cos \theta - \sin 2 \theta \sin \theta \\
& = (2 \cos ^2 \theta -1) \cos \theta - (2 \sin \theta\cos \theta ) \sin \theta \\
& = 2 \cos ^3 \theta - \cos \theta - 2 \sin ^2 \theta \cos \theta \\
& = 2 \cos ^3 \theta - \cos \theta - 2 (1 - \cos ^2 \theta )\cos \theta \\
& = 4 \cos ^3 \theta -3 \cos \theta 
\end{aligned}

Another way is to use \eqalign{...}

$$
\eqalign{s^2 &= \frac{1}{n} \sum_{k=1}^n{(a_k - \bar{a})^2} \\
&= \frac{1}{n} \sum_{k=1}^n{(a_k^2 -2\cdot a_k\cdot\bar{a} + \bar{a}^2)} \\
  &= \frac{1}{n} \sum_{k=1}^n{a_k^2} -\frac{2\cdot\bar{a}}{n} \sum_{k=1}^n{(a_k) + \bar{a}^2} \\
 &= \frac{1}{n} \sum_{k=1}^n{a_k^2} - \bar{a}^2 \\
 &= \bar{a^2} - \bar{a}^2 \\}
$$

Regnal

Answer 9

I have found that one can left align MathJax equations by wrapping them in a 0 width left-aligned div

For example, whereas this give a "centered" equation in the middle of the document:

<body>
$$ f(x) = x^2 $$
</body>

This would give a left-aligned equation:

<body>
    <div style="width:0; float:left;">
        $$ f(x) = x^2 $$
    </div>
</body>

jsbin

Hereford

Answer 10

This seems to be working for MathJax 3.0,

MathJax = {
  tex: {
    inlineMath: [
      ['$', '$'],
      ['\\(', '\\)']
    ]
  }
};

.left {
  display: flex;
  justify-content: flex-start;
}

.right {
  display: flex;
  justify-content: flex-end;
}

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


<div class="left">
  $$\text{ex1: } \frac{1}{2}
</div>

<br>

<div class="right">
  $$\text{ex2: } \frac{12}{6}
</div>

Acrolein

Answer 11

As of 2021 I had to use

mjx-container {
    text-align: left !important;
}

Mccarty

Answer 12

Following code works for me.

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    tags: 'ams'
  },
  svg: {
    fontCache: 'global',
    displayAlign: 'left',
    displayIndent: '1.5em'
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

Nuclease

Answer 13

you could use $\phantom{=}$ to introduce an in invisible equality sign to align at:

$$\begin{align}&\phantom{=}\lbrace \left(x_i,y_i\right),\ x_i\in\mathbb{X}, y_i\in \mathbb{R}\rbrace_{i=1}^n\\
&\phantom{=}f: (x\in\mathbb{X},,p_1,\dots,, p_k\in\mathbb{R})\mapsto y\in\mathbb{R}\\ &\phantom{=}0\le q\le n\end{align}$$

you may of course use any other character instead of '='

Broadtail