如何左对齐 Mathjax 元素

问题描述 投票:0回答:13

Mathjax 元素默认居中对齐。

如何使 Mathjax 元素左对齐?

mathjax
13个回答
40
投票
MathJax.Hub.Config({
    jax: ["input/TeX","output/HTML-CSS"],
    displayAlign: "left"
});

10
投票

或者我的 CSS 解决方案:

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

它对我有用。


10
投票

我只在 MathJax 语义中找到了一个技巧,通过在第一行末尾添加 \hspace{10cm} [MathJax 和左对齐]。代码如下:

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

例如我的代码是:

$$
\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}
$$

效果是这样的:


6
投票

根据 MathJax 3.0 文档,您需要通过将以下内容添加到 HTML 文件来使用

displayAlign
选项:

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

3
投票

编辑之前的答案,这对我来说非常适合

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

2
投票

其他答案对我不起作用 - 但有效的是修改 MathJax 显示的 MathML(而且我知道其他输入格式也有等效项)。我试图向右缩进,但概念是相同的。

对于 MathML,我必须将

indentalign="right"
添加到
<math ...>
标签,例如:

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

之后 MathJax 正确右对齐我的内容。


1
投票

在具有标准配置 TeX-MML-AM_CHTML 的当前版本 MathJax (2.7.5) 中,在具有类 mjx-chtml 和 MJXc-display 的元素上设置 text-align 属性。因此,基于 MathJax_Display 构建的解决方案将不再有效。

为了获得更大的灵活性,您可以将父级

<div class="math-left-align">
添加到您的数学内容中,以便您可以选择如何根据具体情况调整数学。

您的 HTML 将如下所示

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

以及对应的CSS

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

0
投票

我发现可以通过将 MathJax 方程包装在 0 宽度左对齐中来左对齐

div

例如,这在文档中间给出了一个“居中”的方程:

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

这将给出一个左对齐方程:

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

jsbin


0
投票

截至 2021 年我必须使用

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

0
投票

以下代码对我有用。

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

0
投票

这似乎适用于 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>


0
投票

@上山老人的回答对我来说非常有效。为了澄清,

  • 不要使用
    &=&
    ,而是对
    & =
    =
    之间的块内的每个
    \begin{align}
    使用
    \end{align}

在我的环境中(使用 Typora),

  • \begin{align}
    将 (1), (2), ... 添加到每一行。冗长。
  • \begin{align*}
    没有这样的数字
  • \begin{aligned}
    为多行仅添加一 (1)
\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}

另一种方法是使用

\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 \\}
$$


0
投票

您可以使用 $\phantom{=}$ 引入一个不可见的等号来对齐:

$$egin{对齐}&\phantom{=}\lbrace \left(x_i,y_i 右),\ x_i\in\mathbb{X}, y_i\in \mathbb{R} 大括号_{i=1}^n\
&\phantom{=}f: (x\in\mathbb{X},,p_1,\dots,, p_k\in\mathbb{R})\映射到 y\in\mathbb{R}\ &\phantom{=}0\le q\le n nd{对齐}$$

您当然可以使用任何其他字符来代替“=”

© www.soinside.com 2019 - 2024. All rights reserved.