How to left-align MathJax formulas? Or How can I change the CSS style definition for the MathJax_Display DIV?

Notebook
1

I want to left align MathJax formulas (instead of centering them).

In the HTML of Jupyter Notebooks I find a DIV like

<div class="MathJax_Display" style="text-align: center;"
. . .
</div>

around the MathJax stuff. I think that modifying the style of the div to style="text-align: left;" should give the result I desire. (I might than add some margin-left to indent it a bit as well.)

But the big question is: How can I change this CSS style? After all it is hard-coded in the HTML, so an entry in a CSS file cannot overwrite this.

2

In Jupyter classic (not -lab) + MathJax 2, use ~/.jupyter/custom/custom.css:

MathJax.Hub.Config({
  displayAlign: "left"
})
  • You can use ~/.jupyter/custom/custom.css (also classic notebooks + MJ 2.x only)
  • or you can put a <style> tag in a Code cell with the %%html magic.

The CSS:

.MathJax_Display, /* MathJax 2 */
mjx-container     /* MathJax 3 */
{ text-align: left!important; }