-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Autobreak package for responsive equations #1023
Comments
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
Related: It occurs to me that LaTeX does support automatic line breaking for inline math. ( 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.) |
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
With appropriate CSS, this already behaves almost exactly like the package. Unless I'm mistaken, Further thoughts? This doesn't seem too bad. |
@aterenin Sounds great! Let's leave the inline case to #327 then. One thing: given that KaTeX doesn't support |
I think that's acceptable, since KaTeX does not support the I should look at the array code to better understand what we're looking at. |
Any update on this? |
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. |
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 |
@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. |
`Without equation, it is working as overflow: scroll
Without array it is working as expected (Breaking properly) With array and without equation (Not Breaking properly, overflow is scrolling) With array and with equation it is not working as expected (Curly braces has problem) - THIS IS MY ISSUE ISSUE: Why if I add an equation inside an array it's breaking? |
Use a scrollbar and keep the formula as one line. Because KaTeX does not support auto break for now. See KaTeX/KaTeX#1023. The day of submitting this commit is the Chinese New Year. I wish everyone who saw this commit a happy Chinese New Year! Closes #62
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 { 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. |
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:
|
any update on this @edemaine? |
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;
}
} |
Use a scrollbar and keep the formula as one line. Because KaTeX does not support auto break for now. See KaTeX/KaTeX#1023. The day of submitting this commit is the Chinese New Year. I wish everyone who saw this commit a happy Chinese New Year! Closes #62
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
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.
The text was updated successfully, but these errors were encountered: