Most formulas look OK:
But in certain viewport widths, some formulas break, which looks weird.
When I first saw this problem, I simply added
.katex {
white-space: nowrap;
}to the global CSS file (src/routes/app.css). It fixes the problem in the example above:
However, this causes a different problem: in small viewports the formulas can overflow, so that parts of them become invisible.
This is why I have removed the CSS declaration again. Maybe there is a solution, though.
On the other hand, In #128 I already added that CSS line to formulas in display mode since they break more often and this solution is actually mentioned on the katex webpage (https://katex.org/docs/issues). The only other mentioned alternative there is to allow horizontal scrolling, which however did not work (and would be weird in either case).
Most formulas look OK:
But in certain viewport widths, some formulas break, which looks weird.
When I first saw this problem, I simply added
to the global CSS file (
src/routes/app.css). It fixes the problem in the example above:However, this causes a different problem: in small viewports the formulas can overflow, so that parts of them become invisible.
This is why I have removed the CSS declaration again. Maybe there is a solution, though.
On the other hand, In #128 I already added that CSS line to formulas in display mode since they break more often and this solution is actually mentioned on the katex webpage (https://katex.org/docs/issues). The only other mentioned alternative there is to allow horizontal scrolling, which however did not work (and would be weird in either case).