How to left align Mathjax elements

Question

Mathjax elements are by default, center aligned.

How can I make Mathjax elements left aligned?

score 40 · Accepted Answer · edited Jan 27 '13 at 01:39

40

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

edited Jan 27 '13 at 01:39

Lucas

16,930
31
110
182

answered Jul 02 '12 at 15:12

Anas

5,622
5
39
71

3

This is the better solution. Important has too high a precedence and should be avoided. – Ciro Santilli OurBigBook.com Feb 01 '14 at 16:21
2

Also, if you've come here, it is likely that you want to set a left padding: http://stackoverflow.com/questions/12707094/how-to-change-padding-of-math-in-mathjax?lq=1 – Ciro Santilli OurBigBook.com Feb 01 '14 at 16:44
7

I came here looking how to set centering for only one expression. – Tomáš Zato Nov 30 '14 at 15:28

Lucas · Answer 2 · 2014-05-04T09:26:33.760

10

Or my solution with CSS:

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

It worked for me.

edited May 04 '14 at 09:26

answered Aug 24 '12 at 09:10

Lucas

16,930
31
110
182

This appears to be broken at the moment. – Bardi Harborow Jul 31 '14 at 03:01
Doesn't work anymore in case anyone comes across this. – tnk479 Dec 31 '19 at 18:36

上山老人 · Answer 3 · 2021-02-04T02:11:12.963

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:

score 5 · Answer 4 · answered Apr 29 '20 at 13:51

5

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>

answered Apr 29 '20 at 13:51

Andras

430
7
9

Dhiraj Wakchaure · Answer 5 · 2014-07-31T06:11:26.423

3

Edit to previous answer, this works perfectly for me

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

edited Jul 31 '14 at 06:11

answered Sep 24 '13 at 11:45

Dhiraj Wakchaure

2,596
6
21
37

That is invalid CSS. What is the `
` doing there? – Bardi Harborow Jul 31 '14 at 03:01

score 2 · Answer 6 · answered May 27 '15 at 12:12

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.

score 1 · Answer 7 · answered May 24 '19 at 07:46

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;
 }

Him · Answer 8 · 2019-12-29T04:20:43.380

0

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

edited Dec 29 '19 at 04:20

answered Dec 29 '19 at 04:15

Him

5,257
3
26
83

dnaatwork.com · Answer 9 · 2022-04-01T05:36:36.323

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>

score 0 · Answer 10 · answered Sep 02 '21 at 08:11

0

As of 2021 I had to use

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

answered Sep 02 '21 at 08:11

user171780

2,243
1
20
43

score 0 · Answer 11 · answered Jan 21 '22 at 01:50

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>

Kouichi C. Nakamura · Answer 12 · 2022-10-20T09:10:32.873

@上山老人'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 \\}
$$

How to left align Mathjax elements

12 Answers12

Linked