Two arrays stacked vertically not aligning correctly in render

[Sangeeth Sudheer]

I'm using MathJax inside Obsidian and was running into an issue trying to get the below snippet to render correctly:

\begin{aligned}
\begin{array}{|c|c|c|c|c|c|}
\hline
  8 & 5 & 3 & 2 & 1 & 1 \\
\hline
\end{array}
\\
\begin{array}{ c c c c c c }
  0 & 1 & 2 & 3 & 4 & 5 \\
\end{array}
\end{aligned}

I tried the same snippet in MathJax demo link and I see the same issue:

Katex renders this as expected:

Is this an issue in MathJax or is the snippet not in line with expectations?

[Davide Cervone]

The first column of the aligned environment (the only column you are using) is right-aligned.  In LaTeX, the left- and right-hand columns include space to the outside of the cell content, but in MathJax v3, that space isn't included, so the 5 at the right of the lower array is vertically aligned with the vertical line at the right of the upper array.

This is fixed in v4, currently in beta release.

For v3, there are several approaches to getting the layout to be what you want.  The easiest is to use

\begin{array}{c}

...

\end{array}

in place of

\begin{aligned}

...

\end{aligned}

so that both arrays are centered on each other.  (That will work in LaTeX as well as MathJax and KaTeX.)

Otherwise, you could do something like

\newcommand{\cell}[1]{\kern .03em #1\kern.03em}

\begin{aligned}
\begin{array}{|c|c|c|c|c|c|}
\hline
  8 & 5 & 3 & 2 & 1 & 1 \\
\hline
\end{array}
\\ 
\begin{array}{ c c c c c c }

  \cell 0 & \cell 1 & \cell 2 & \cell 3 & \cell 4 & \cell 5 \kern.4em \\
\end{array}
\end{aligned}

in order to include spacing to compensate for the vertical lines in the upper array and add the extra space at the right of the lower one.

Davide

On Apr 8, 2024, at 2:05 PM, Sangeeth Sudheer <sangeet...@gmail.com> wrote:

I'm using MathJax inside Obsidian and was running into an issue trying to get the below snippet to render correctly:

\begin{aligned}
\begin{array}{|c|c|c|c|c|c|}
\hline
  8 & 5 & 3 & 2 & 1 & 1 \\
\hline
\end{array}
\\
\begin{array}{ c c c c c c }
  0 & 1 & 2 & 3 & 4 & 5 \\
\end{array}
\end{aligned}

I tried the same snippet in MathJax demo link and I see the same issue:

<CleanShot 2024-04-08 at 23.2...@2x.png>

Katex renders this as expected:

<CleanShot 2024-04-08 at 23.3...@2x.png>

Is this an issue in MathJax or is the snippet not in line with expectations?

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/0b7e8dcd-2101-45c1-a2fb-0425a86dc3ccn%40googlegroups.com.
<CleanShot 2024-04-08 at 23.2...@2x.png><CleanShot 2024-04-08 at 23.3...@2x.png>

[Sangeeth Sudheer]

Davide, thanks a lot for a working solution. I'm quite new to LaTeX and MathJax so couldn't fully grasp all these constructs. I'm happy for now with \begin{array}{c} but I agree that the latter looks correct (and I missed spotting the misalignment in the Katex screenshot I shared in the original message). But, would rather keep it simple.

You mentioned this is fixed in v4 so does that mean the end result would look closer to the output of the more complicated solution you shared? Also wondering in general, if I need to stack an array on top of another array like this, is the solution you shared the canonical one or is there a way to say customize border color of the array to be transparent?

[Davide Cervone]

I'm happy for now with \begin{array}{c} but I agree that the latter looks correct (and I missed spotting the misalignment in the Katex screenshot I shared in the original message). But, would rather keep it simple.

Sounds good.

You mentioned this is fixed in v4 so does that mean the end result would look closer to the output of the more complicated solution you shared?

No, it would look like the actual LaTeX output (which is what KaTeX looks like).  So it would be like the KaTeX image you provided.

Also wondering in general, if I need to stack an array on top of another array like this, is the solution you shared the canonical one or is there a way to say customize border color of the array to be transparent?

Well, if you are using CHTML output, you could use the \class macro to add a class to the table whose borders you want to be transparent, and use CSS to override the border color.  If you add

<style>

.no-lines > mjx-box,

.no-lines > mjx-box > mjx-mtable > mjx-table > mjx-itable > mjx-mtr > mjx-mtd,

.no-lines > mjx-table > mjx-itable > mjx-mtr > mjx-mtd,

.no-lines > mjx-table > mjx-itable {

  border-color:  transparent ! important;

}

</style>

and then do

$$

\begin{aligned}

\begin{array}{|c|c|c|c|c|c|}

\hline

  8 & 5 & 3 & 2 & 1 & 1 \\

\hline

\end{array}

\\ 

\class{no-lines}{\begin{array}{|c|c|c|c|c|c|}

  0 & 1 & 2 & 3 & 4 & 5 \\

\end{array}}

\end{aligned}

$$

that will do what you are asking for.

Davide

[Sangeeth Sudheer]

Gotcha. Thanks a lot Davide for the help! :)

Sangeeth