Break/wrap formula if too wide #327

Closed
opened this issue Aug 10, 2015 · 19 comments

scaljeri commented Aug 10, 2015

 Is there a way to break formula's if they are to wide (with respect to their parent) ?
Contributor

sophiebits commented Aug 10, 2015

 Not currently, but I was talking to @xymostech and the rules sound simple (breaking is allowed after any top-level rel or bin) so it might not be too difficult to add.
Author

scaljeri commented Aug 10, 2015

 +1 I really need this feature. Is responsiveness also included in the equation ?
Contributor

sophiebits commented Aug 10, 2015

 I don't know what you mean by that, sorry?
Author

scaljeri commented Aug 10, 2015

 For example, if you switch from landscape to portrait, the formula adjusts to the space it has (responsive)

invkrh commented Apr 1, 2016

 I find responsiveness is a big problem here. Formules viewed from mobile break all responsive design. They are too long, the view point is auto scaled to adapt these formulas. I can not shorten the width of the formulas by setting width to a smaller value. Really want to know any workaround.

sophiebits changed the title break formula if to wideBreak/wrap formula if too wideApr 1, 2016

referenced this issue Apr 1, 2016

mbourne commented Apr 2, 2016

 @invkrh: Some possibilities until responsiveness becomes a feature in KaTeX: (1) Give the enclosing element a style of "overflow:auto". Then your math will be full size and users can scroll the equation left and right to see it all. For me, this has serious drawbacks, since on most mobile devices there is no indication that the element can be scrolled horizontally (no horizontal scrollbar appears like you get on a desktop browser, until you actually start scrolling the element. So if the page edge comes at an awkward part of the equation, it's possible the user has no idea that scrolling is possible and will never see the hidden part. It's possible to add a horizontal scroll bar with javascript of course). (2) What I do is (a) Manually break the equation into pieces at logical places (like equal signs, plus signs, minus signs, etc) so it will wrap logically (b) For cases where splitting the equation is not possible, (it's a fraction, say), I nudge the font-size down with javascript until it does fit. I get away with that most of the time with the content on my site. You can see both these things going on in this page (including in the drop-down answer sections): http://m.intmath.com/fourier-series/2-full-range-fourier-series.php The elements that cannot be split and that I know will not fit into a 300 px width are given the class "fitToWidth". The function "fitWidth" reduces the font-size if required. I know it's clunky and could be done better (including the addition of an onRotate handler), but that will need to wait until the next revamp. For the mobile version of my site, I mostly lay things out vertically when the LHS of an equation is quite wide. Hope it helps. Regards Murray

invkrh commented Apr 2, 2016

 @mbourne Thank you for the idea using the horizontal scroll bar and overflow. Also, I make the bar visible all the time. The workaround really works. Looking forward to the responsiveness of Katex. =)
referenced this issue Apr 28, 2016
referenced this issue Aug 3, 2016
Closed

jeffswt commented Apr 4, 2017 • edited

 This would only line break inline equations and make displayed equations scroll. Took me a while to figure it out, but you may simply copy this into the CSS file. .katex-display > .katex { display: inline-block; white-space: nowrap; max-width: 100%; overflow-x: scroll; text-align: initial; } .katex { font: normal 1.21em KaTeX_Main, Times New Roman, serif; line-height: 1.2; white-space: normal; text-indent: 0; } Works perfectly on responsive pages, as far as I'm concerned. Leave a like if you find this working nice.
Member

kevinbarabash commented Apr 16, 2017

 @invkrh we ended adding a wrapper around each equation that would scale to fit and then if the user tapped it would zoom to the normal size and would allow the user to scroll within the container. It wouldn't not cause the width of the page to expand. The scrolling part is what @jeffswt has suggested. The zooming/scrolling are both workarounds for not being able to break long expressions.
referenced this issue Jun 28, 2017
referenced this issue Jul 17, 2017

hagenw commented Dec 3, 2017

 In principle the proposed css resolution works. I'm using the following at the moment: .katex-display > .katex { max-width: 100%; } .katex-display > .katex > .katex-html { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-left: 2px; padding-right: 2px; } But it can lead to some unwanted consequences. Normal screen size: Small screen size with overflow scrolling:
Member

edemaine commented Dec 3, 2017

 @hagenw That's more likely to do with #824.
referenced this issue Dec 16, 2017
Member

edemaine commented Dec 17, 2017 • edited

 LaTeX supports automatic line breaking for inline math. 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 maybe what was originally requested. We should try to implement it, with proper line breaking rules (only after ops?).
referenced this issue Jan 16, 2018

SamLau95 commented Jan 16, 2018

 We'd like to replace MathJax with KaTeX for a probability textbook at Berkeley: https://textbook.prob140.org/ The line breaking issue is currently a blocker for us since we've already written a bunch of long equations that KaTeX cuts off, for example: We are currently using MathJax's automatic line breaking functionality (http://docs.mathjax.org/en/latest/output.html#automatic-line-breaking) which gives a reasonable-looking output for these cases: We can get around this with using: .katex { white-space: normal; } Which gives: As you can see, this doesn't produce great output. It would be great for us if KaTeX could support a rendering option like MathJax's that breaks long block-level equations in a reasonable way.

ItsMeSousuke commented Apr 19, 2018

 Is there any progress with breaking lines for too wide formulas?
Member

kevinbarabash commented Apr 22, 2018

 @ItsMeSousuke not that I'm aware of.
referenced this issue May 4, 2018
Member

edemaine commented May 4, 2018

 #1287 is a first stab at doing line breaks for inline math (not display math). Testing would be appreciated!
Member

edemaine commented May 11, 2018

 PR #1287 is merged; feel free to test it out on the master branch. So the inline case is done. I'm going to close this issue, as issue #1023 covers the display case (in my opinion -- feel free to make alternate proposals if you'd like).

edemaine closed this May 11, 2018

referenced this issue Mar 29, 2019

ccorcos commented Apr 26, 2019

 This CSS does a good job for me: .katex > .katex-html { white-space: normal; } .katex .base { margin-top: 2px; margin-bottom: 2px; }
referenced this issue May 15, 2019
 The overflow solution sometimes also annoyingly cuts off equations when viewed in desktop To get around this, it might be better to wrap the css so that it is mobile only: @media only screen and (max-width: 600px) { .katex-display > .katex { max-width: 100%; overflow-x: auto; overflow-y: hidden; } }