Katex: Rendering multi-line equations in KaTex?

[seth-brown]

Can KaTex render multi-line equations? It seems that AMS Math mode is currently not supported. How can I render this multi-line equation in KaTex?

\begin{equation} \label{eq1}
\begin{split}
A & = \frac{\pi r^2}{2} \\
 & = \frac{1}{2} \pi r^2
\end{split}
\end{equation}

This is a great project, thanks for the help!

[PeterBocan]

This relates with all other issues, for example: https://github.com/Khan/KaTeX/issues/206 so as you can see we are all waiting for the miracle...

[sophiebits]

Right – not yet, but we'd like to add it.

[PeterBocan]

@spicyj what does it mean "we'd like to add it"? What does it require to contribute a brand new functionality? I mean this require a lot of new stuff to introduce.

[xymostech]

We haven't figured out a good cross-browser-compatible way to lay out equations in a way that would let us line them up to do multi-line equations. We've looked into couple approaches, but none of them have worked.

Right now, almost all formatting in KaTeX is done through CSS, and we only calculate heights of elements to do vertical alignment. Thus, to get multi-line equations to work, we have to figure out how to get CSS to do consistent-across-browsers horizontal alignment of elements in such a way that we can then vertically position the elements where we want them. Just based on what most browsers support and what CSS lets us do, the only feasible method for doing this is to use HTML <table>s. However, due to browser differences and the semi-unspecified spec surrounding them, it's hard to find the right CSS magic to get everything to work.

Neither @spicyj nor I are working full-time on this, so we haven't been able to spend enough time on this to find a suitable solution, but we know people want this, and would like to add it in the future.

[xymostech]

(Also, once we figure out how to actually do the layout, we need to change the parser to understand the funky syntax, figure out how the different kinds of alignment work, etc.)

[PeterBocan]

@xymostech I see, but we are here too! Don't do it yourself, it's a community project, isn't it? :) Can you clarify what didn't work?

[utensil]

With #268 merged, is this issue easier to address now?

[kevinbarabash]

https://github.com/Khan/KaTeX/pull/268 will help a little bit with implementing any new command in KaTeX, but it doesn't provide a clear path forward in this case.

[utensil]

But this and #350 are fundamental to any serious math writing. Would there be a plan or a series of milestones for this kind of features, to help the community to participate and collaborate?

[pnsaevik]

@xymostech

Just based on what most browsers support and what CSS lets us do, the only feasible method for doing this is to use HTML <table>s.

Is this a bad thing? HTML tables would be the way to go I guess (or CSS tables for that matter), or are there any problems with this approach?

[xymostech]

@pnsaevik The problem with HTML tables is that the layout algorithm isn't actually specified, so it's really hard to get things to look correct in all the different browsers. Most of KaTeX is getting the layout of things exactly right, so having to deal with browser differences would be a huge pain.

As it turns out though, that statement is out-of-date and we did figure out a good way of solving this without the use of tables. :)

[mull]

@xymostech your last comment gave me some hope! Could you update us on the status of this? Would love to help out any way I can.

[xymostech]

@mull This has been solved! We now have various multi-line environments, like \begin{array} and \begin{aligned}. The code to render them is here: https://github.com/Khan/KaTeX/blob/master/src/buildHTML.js#L517 We basically stack columns next to each other to get the desired effect.