Autobreak package for responsive equations

[aterenin]

After some discussion in #1012, @edemaine suggested implementing the autobreak package to allow equations to be made responsive. This LaTeX package allows equations to break lines automatically if they are too wide for their environment by having the user define breakable points in their formula by adding a newline between non-breakable components. So, for example

\begin{autobreak}
1 + x + 
\frac{x^2}{2!} + \frac{x^3}{3!} + ..
\end{autobreak}

can be broken into 1 + x + and \frac{x^2}{2!} + \frac{x^3}{3!} + .. that are rendered on two separate lines. The package automatically decides whether this is necessary based on width.

In LaTeX, the main use case is long formulas, especially autogenerated ones. In KaTeX, this package could allow for formulas to be made responsive for better rendering on mobile devices in a controllable way. I think this may be an improvement.

Using flexbox, I'd venture to guess that implementing it may not be too bad, so I wanted to start a discussion on the topic to hear people's thoughts.

[edemaine]

I'd suggest that a good starting point would be to do an example, like the one above, and see how you could tweak the CSS to get it to render as desired. I think the main change is that something at the top level needs to be something other than display: block, and the lines need to be assembled into display: block...

autobreak seems to work in each cell of an aligned environment. Probably we could support that too, but it may require another "top level" (cell) to be something other than display: block.

Related: It occurs to me that LaTeX does support automatic line breaking for inline math. (autobreak is mainly for display math?) Perhaps this could be implemented at the same time, or perhaps it is another issue? Here are some experiments:

Here is a long line of text.
Here is a long line of text.
Here is a $x+y+z+w+a+b+c$. % auto breaks after z+

Here is a long line of text.
Here is a long line of text.
Here is a $xyzabcdefghijklmnopqrstuvwxyz$.  % doesn't auto break

Here is a long line of text.
Here is a long line of text.
Here is a $xyzabcdefghij\allowbreak klmnopqrstuvwxyz$.  % auto breaks at \allowbreak

In my opinion, this aspect would be super useful, and is probably what #327 is looking for. (Incidentally, that issue also has some starting points for CSS tweaks.)

[aterenin]

Automatic line breaking for inline math is I think a separate issue. Most inline math that I've seen - both online and in journals - is not very long, because authors will typically use display style for a sufficiently large equation.

The behavior of autobreak is almost the same as flexbox. The main difference is that that after a linebreak, new lines begin at the end of the first line in the environment. Here's one idea for how to do it.

• Everything inside the autobreak environment, except the first line, gets wrapped in a span tag with display: inline-flex.
• Every line inside of the autobreak environment, except the first line, gets wrapped in another span tag.

With appropriate CSS, this already behaves almost exactly like the package.

Unless I'm mistaken, autobreak is by supported only inside an align environment, and produces undefined behavior if & is used anywhere in that environment by the user, including outside of autobreak. In contrast, the use of \\ is allowed, but only outside of autobreak. This means that if we want to replicate LaTeX behavior, then interaction with aligned is simple - it should throw an exception.

Further thoughts? This doesn't seem too bad.

[edemaine]

@aterenin Sounds great! Let's leave the inline case to #327 then.

One thing: given that KaTeX doesn't support \begin{align} ... \end{align} -- I generally recommend replacing it with $$\begin{aligned} ... \end{aligned}$$ -- it would be nice if autobreak could work within aligned, in the simple ways you mention. But maybe that's a second goal, not the first. KaTeX's array code probably won't play well with flexbox, because it wants to know vertical layout. I've wanted to replace arrays with CSS tables (though I'm not sure if this is possible) -- after such a change, it might be feasible to do this.

[aterenin]

I think that's acceptable, since KaTeX does not support the align environment, though this does deviate from LaTeX behavior. Maybe that can change later if align/align* is added to KaTeX - I'm not sure why we don't just allow it inside $$, since this is what MathJax does.

I should look at the array code to better understand what we're looking at.

[janosh]

Any update on this?

[edemaine]

@janosh Inline math ($...$) now has automatic line breaks in KaTeX like LaTeX does it.

@aterenin, any updates on autobreak in display math ($$...$$)?

[aterenin]

I'm still interested in trying to put something together, but unfortunately have no time capacity to do so at the moment. I might have capacity closer to summertime once semester ends and upcoming conference deadlines have passed. I've put a note on my calendar, let me get back to this around then.

[jrus]

I’ve been playing with re-scaling (shrinking) rendered KaTeX using CSS transforms.

Discussion: https://talk.observablehq.com/t/responsive-latex-formulas-for-small-displays/1844

Example not-yet-finished notebook: https://observablehq.com/d/fb4d519e95cdbd83

[kevinbarabash]

@jrus that notebook is really beautiful. For khanacademy.org we create a React component for block-level math and scale it using CSS. If you tap on the math though it zooms in and you can pan left-right. It's something that we could probably open source.

[Varun-msd]

`Without equation, it is working as overflow: scroll

$Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)$

Without array it is working as expected (Breaking properly)
\begin{equation}
Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)
\end{equation}

With array and without equation (Not Breaking properly, overflow is scrolling)
3. $3Ta{n^{ - 1}}x$$=\left{\begin{array}{ccc} Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right), & if;\cfrac{{ - 1}}{{\sqrt 3 }} < x < \cfrac{1}{{\sqrt 3 }} <= \cfrac{1}{{\sqrt 4 }} <= \cfrac{1}{{\sqrt 4 }} <= \cfrac{1}{{\sqrt 4 }} \ \end{array}\right.$

With array and with equation it is not working as expected (Curly braces has problem) - THIS IS MY ISSUE
$3Ta{n^{ - 1}}x$$=\left{\begin{array}{ccc} \begin{equation}
Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right)Ta{n^{ - 1}}\left( {\cfrac{{3x - {x^3}}}{{1 - 3{x^2}}}} \right) \end{equation}
\end{array}\right}$
`

ISSUE: Why if I add an equation inside an array it's breaking?

[nsinstruments]

This might help towards implementing this, but it's at least a somewhat viable workaround.

I use a container with the following css:

.katex-container {
display: flex;
flex-wrap: wrap;
align-items: baseline;
width: fit-content;
}

The only thing within it is display mode katex, but I break the expression up into several katex sections, separated where a line break could happen. When there is space, these sections just display next to each other w/ flex. When there isn't enough room, the flex elements, i.e. the individual katex sections, will wrap.

There are some limitations with this. The vertical spacing isn't always exactly what you want. Using \vphantom{} can sometimes help.

There's also an issue that might generally be a problem in implementing autobreak. The browser deals with the width: fit-content before it flows the contents of the flexbox, and so generally anything that wraps pushes the width to 100%. For plain text, this makes sense---the text box is that width and the text wraps. But when an equation is just slightly too long and you want to break it at the midpoint, this can look pretty wrong if you are, for example, trying to center equations but left align breaks. AFAICT, the fix would have to be javascript watching for resizes and setting the width dynamically.

[LuighiV]

Hi, perhaps could be useful for someone, but I managed to break line in display math mode, using the instructions here: https://katex.org/docs/issues.html#css-customization.

I've just appended the style to the global css and it worked:

.katex-display > .katex { white-space: normal }

[xegulon]

any update on this @edemaine?

[xegulon]

This is my take for a temporary solution with horizontal scroll instead of line break:

@media (max-width: 640px) {
  .katex-display {
    max-width: 85vw;
    margin-inline: auto;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  /* Firefox */
  .katex-display {
    scrollbar-width: thin;
    scrollbar-color: var(--background-start-rgb) black;
  }

  /* Chrome, Edge, and Safari */
  .katex-display::-webkit-scrollbar {
    width: 2px;
  }

  .katex-display::-webkit-scrollbar-track {
    background: var(--background-start-rgb);
    border-radius: 3px;
  }

  .katex-display::-webkit-scrollbar-thumb {
    background-color: black;
    border: 6px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
  }
}