Left Align lines of multi-line MathJax

Question

I have a set of equations where I want the first two lines to be left aligned and the remaining right align. I have the right alignment working but I cannot figure out how to get the first two equations to left align. I am using the latest MathJax (3.1.0) and Hugo (v0.78.2-959724F0 windows/amd64)

Note: This question does not address this. That formats ALL MathJax to the left of a page. I just need these two lines to align left.

$$
Maximize: 5.00 x_{1} + 7.50 x_{2} \\\\ 
Subject\ to: \\\\
\begin{align}
x_{1} \leq& 200 \\\\
x_{2} \leq& 300 \\\\
1.0x_{1} + 1.5x_{2}\leq& 650 \\\\
x_{1}, x_{2} \geq& 0
\end{align}
$$

Displays this:

But I want it to look like this:

Unrelated to your question, but please don't use math mode for whole words - this completely destroys the kerning. — samcarter_is_at_topanswers.xyz, Nov 29 '20 at 23:50
Take for example your word "Maximize" - the space between the "M" and the "a" is much too large. In real latex, I would use the `\text{...}` macro from the amsmath package, no idea if mathjax can emulate this. — samcarter_is_at_topanswers.xyz, Nov 30 '20 at 00:06

score 1 · Answer 1 · answered Nov 30 '20 at 16:14

I found that you really need to separate it into two sections to have two different align sections:

$$
\begin{align}
& \text{Maximize: } 5.00 x_{1} + 7.50 x_{2} \\
& \text{Subject to:} \\
\end{align}
$$
$$
\begin{align}
&x_{1}& &\leq200 \\
&&x_{2} &\leq 300 \\
1.0&x_{1} + &1.5x_{2}&\leq 650 \\
&&x_{1}, x_{2} &\geq0
\end{align}
$$

Will render this (you may need to double the \ depending on your environment to get newlines to work):

MattAllegro · Answer 2 · 2020-12-24T10:36:08.927

Just to share ideas: Why not an HTML-table approach?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathJax</title>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
td.tdleftc{text-align:center;min-width:80px}
td.tdleftl{text-align:left;min-width:80px}
td.tdright{text-align:right}
</style>
</head>

<body>
<table>
<tr><td class="tdleftl">Maximize:</td><td class="tdright">\(5.00\,x_1 + 7.50\,x_2\)</td></tr>
<tr><td class="tdleftl">Subject to:</td><td class="tdright"></td></tr>
<tr><td class="tdleftc">\(x_1\)</td><td class="tdright">\(\leq 200\)</td></tr>
<tr><td class="tdleftc"></td><td class="tdright">\(x_2 \leq 300\)</td></tr>
<tr><td class="tdleftc">\(1.0\,x_1 +\)</td><td class="tdright">\(1.5\,x_2 \leq 650\)</td></tr>
<tr><td class="tdleftc"></td><td class="tdright">\(x_1, x_2 \geq 0\phantom{00}\)</td></tr>
</table>
</body>
</html>

I feel that the content we are discussing would fit better in a tabular layout rather than in an math environment: since here we somehow embed one markup into another, I would leave the LaTeX syntax to the single cells and even style (align) the content of each cell by using CSS.

Left Align lines of multi-line MathJax

2 Answers2