Skip to content
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

Break/wrap formula if too wide #327

Closed
scaljeri opened this issue Aug 10, 2015 · 19 comments

Comments

@scaljeri
Copy link

commented Aug 10, 2015

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

@sophiebits

This comment has been minimized.

Copy link
Contributor

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.

@scaljeri

This comment has been minimized.

Copy link
Author

commented Aug 10, 2015

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

@sophiebits

This comment has been minimized.

Copy link
Contributor

commented Aug 10, 2015

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

@scaljeri

This comment has been minimized.

Copy link
Author

commented Aug 10, 2015

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

@invkrh

This comment has been minimized.

Copy link

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 sophiebits changed the title break formula if to wide Break/wrap formula if too wide Apr 1, 2016

@mbourne

This comment has been minimized.

Copy link

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).

Another option is display:table
http://netdna.webdesignerdepot.com/uploads7/how-to-create-horizontal-scrolling-using-display-table-cell/table-layout-horizontal/

(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

This comment has been minimized.

Copy link

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. =)

@jeffswt

This comment has been minimized.

Copy link

commented Apr 4, 2017

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.

@kevinbarabash

This comment has been minimized.

Copy link
Member

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.

@hagenw

This comment has been minimized.

Copy link

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:
normal
Small screen size with overflow scrolling:
responsive

@edemaine

This comment has been minimized.

Copy link
Member

commented Dec 3, 2017

@hagenw That's more likely to do with #824.

@edemaine

This comment has been minimized.

Copy link
Member

commented Dec 17, 2017

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

line break demo

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?).

@SamLau95

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Apr 19, 2018

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

@kevinbarabash

This comment has been minimized.

Copy link
Member

commented Apr 22, 2018

@ItsMeSousuke not that I'm aware of.

@edemaine

This comment has been minimized.

Copy link
Member

commented May 4, 2018

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

@edemaine

This comment has been minimized.

Copy link
Member

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).

@ccorcos

This comment has been minimized.

Copy link

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;
}
@fxha fxha referenced this issue May 15, 2019
1 of 1 task complete
@hanzhihua72

This comment has been minimized.

Copy link

commented Jul 17, 2019

The overflow solution sometimes also annoyingly cuts off equations when viewed in desktop

image

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;
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.