Line breaks for inline formulas #1287

edemaine · 2018-05-04T15:04:14Z

Allow for line breaks in inline formulas according to TeX's rules. Display formulas are not affected. Part of #327, specifically the plan suggested in #327 (comment)

The TeXBook [p.173] says "A formula will be broken only after a relation symbol like $=$ or $<$ or $\rightarrow$, or after a binary operation symbol like $+$ or $-$ or $\times$, where the relation or binary operation is on the ``outer level'' of the formula (i.e., not enclosed in {...} and not part of an \over construction)."

In inline math, we break the outer katex-html into multiple base spans, splitting wherever a line break can be (in particular, right after top-level mop or mbin). Each base span gets its own strut, which handles vertical spacing between lines properly. This was easier than I thought it'd be!

In addition, I added support for \allowbreak and \nobreak which modify this behavior. By also marking them as (zero-width) spaces, I believe they don't affect anything else about layout.

Examples from the test server with display=0 set:

codecov · 2018-05-04T20:44:58Z

Codecov Report

Merging #1287 into master will increase coverage by 0.06%.
The diff coverage is 94.59%.

@@            Coverage Diff             @@
##           master    #1287      +/-   ##
==========================================
+ Coverage    83.8%   83.87%   +0.06%     
==========================================
  Files          61       61              
  Lines        3990     4018      +28     
  Branches      666      671       +5     
==========================================
+ Hits         3344     3370      +26     
- Misses        547      549       +2     
  Partials       99       99

Impacted Files	Coverage Δ
src/buildCommon.js	`89.36% <100%> (ø)`	⬆️
src/macros.js	`85% <100%> (+0.18%)`	⬆️
src/symbols.js	`100% <100%> (ø)`	⬆️
src/domTree.js	`62.11% <75%> (+0.23%)`	⬆️
src/buildHTML.js	`96.62% <96.29%> (-0.15%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 34e6458...60f8a8d. Read the comment docs.

sophiebits

Super exciting.

sophiebits · 2018-05-04T21:05:48Z

src/katex.less

@@ -32,13 +36,6 @@
    // mode, while still allowing background/foreground setting on root .katex
    * { -ms-high-contrast-adjust: none !important; }

-    .katex-html {
-        // Making .katex inline-block allows line breaks before and after,
-        // which is undesireable ("to $x$,"). Instead, adjust the .katex-html


Are you able to verify that in to $x$, it's impossible to have a break between the x and comma? In a narrow container it should break before x instead.

No, in fact this is #1233. I've left this comment as is, though it clearly is incorrect, and I can edit it. This PR has no effect on this issue.

Huh. I swear this used to work.

ronkok · 2018-05-04T21:31:36Z

Very, very cool stuff. I do have some questions.

Will \\ be available as a mandatory line break?

In LaTeX, there are some nuances about where line breaks can occur. Some examples:

Item	Line break allowed
skips	yes
kerns	no
`\,` or `~`	no
Inside boxes, including `\hbox`, `\raisebox`, or `\colorbox`	no

Do you have any plan in mind for incorporating these nuances? Is it a matter of going through the existing code and setting an allowbreak flag or nobreak flag?

ronkok · 2018-05-04T22:23:38Z

We'll have to develop some more sophisticated code for spaces. Directly after a line break, an \hspace should be eaten but an \hspace* should render its space. Our code will need some work in order to make that happen.

edemaine · 2018-05-05T03:21:04Z

@ronkok Thanks for the additional rules! I'm not convinced we can get spaces to get eaten by line breaks, using just CSS... I'll have to think about that.

But the other rules you mention should be easy; we'd just need to give hskip's a CSS class of allowbreak. (Everything else is already forbidden.)

\\ should also be doable, but probably not without more work. Maybe a separate PR.

edemaine · 2018-05-05T13:29:46Z

@ronkok Actually, I don't think those rules apply here. We're dealing with line breaks within math mode. I just did some tests, and none of \ , \quad, \hspace, \hskip enable line breaks within math mode. For example:

$this\ is\ some\ long\ text\quad
 this\ is\ some\ long\ text\quad
 this\ is\ some\ long\ text\quad
 ...
$

However, if I add + before each \quad, I do observe that that space gets eaten when there's a line break just before it.

ronkok · 2018-05-05T15:25:37Z

@edemaine You're right. I also did some testing and I can confirm that line breaks are not prevented in math mode by \,, \ , \space, or by kerns. That's terrific. It makes your work even better.

~ does prevent a line break in math mode. So does \nobreakspace.

Also, boxes, e.g. \raisebox prevent any line breaks. Inside a box, even \\ will fail to produce a line break. With boxes, can we do something with CSS? Something like a nobreak !important rule?

edemaine · 2018-05-05T15:29:06Z

@ronkok I hope you mean "line breaks are forbidden at whitespace". The example I gave above does not get line breaks in LaTeX (or in this PR). Line breaks only seem to be allowed at \allowbreak and after bins and ops. In (inline) math, ~ and \ are treated identically, so far as I can see.

This PR doesn't allow line breaks in any nested objects, which includes boxes. It only looks for breakable things at the top level. Same as TeX. \\ could similarly be dealt with at the top level only, presumably via a <br> tag.

ronkok · 2018-05-05T15:34:19Z

That's odd. I get no line breaks when I try:

\(\aaaaaaaaaaaaaaaaaa+~aaaaaaaaaaaaaaaaaaaaaa+~aaaaaaaaaaaaaaaaaaaa+~aaaaaaaaaaaaaaaaaaaaaaa+~aaaaaaaaaaaaaa \)

It seems that the ~ directly after a bin prevents the line break that would otherwise occur.

I'm glad to hear about the boxes.

edemaine · 2018-05-05T15:36:27Z

Oh, I see our/my confusion. I meant that spaces/glue by themselves do not permit line breaks. You're saying that a nonbreaking space immediately after a valid line break place prevents that line break. Got it! That should be easy to fix.

ronkok · 2018-05-05T15:51:00Z

@edemaine In your most recent commit, you ensured that glue will stay with the operator. Could you make an exception for \hspace*? It exists to provide a space at the start of a line after a line break.

edemaine · 2018-05-05T16:36:47Z

@ronkok Good idea. I'd like to resolve #1289 first though; it's pretty confusing.

In the latest commit, I changed ~ and \nobreakspace to also have nonbreaking behavior.

edemaine · 2018-05-08T19:48:28Z

@ronkok I read the source code for \hspace* and was able to implement it almost exactly like LaTeX (!). Our macro system has come a long way... LaTeX uses a \rule to protect the space from the line-breaking algorithm, so I did the same.

Demo:

I also fixed a bug that allowed line breaks where I didn't want them (needed to set white-space: nowrap at some level, namely, .base).

ronkok · 2018-05-08T19:54:41Z

Cool! This is really coming together well.

edemaine · 2018-05-08T23:46:57Z

I've successfully implemented \\, at least for inline math (where LaTeX supports it), on top of this. For simplicity of review, I've split it off into a separate PR, #1298. That can be reviewed after this PR.

edemaine · 2018-05-10T16:21:09Z

I tracked down the bulk of the screenshot differences to this CSS rule:

    .vlist-s {
        // This cell solves Safari rendering problems. It has text content, so
        // its baseline is used for the table. A very small font avoids line-box
        // issues; absolute units prevent user font-size overrides from breaking
        // rendering. Safari refuses to make the box zero-width, so we give it
        // a known width and compensate with negative right margin on the
        // inline-table.
        width: 2px;

The placement of width: min-content on the .base element instead of the .katex-html element ends up removing this space for some reason (in inspect mode, the .vlist-s element has a width of 0 instead of 2). Adding a rule of min-width: 2px fixes the problem.

Now all screenshot diffs (against master) appear entirely black, meaning the differences are all subpixel, as expected, except for ArrayMode and DisplayMode which still has a global horizontal shift as above. I'll keep investigating that one.

edemaine · 2018-05-10T16:27:38Z

What luck! The horizontal offset in display math actually seems to be an improvement over past behavior.

Here's ArrayMode in master, with Chrome inspecting the .base element:

And here's the same test on this PR:

The new version has the correct bounding box on the .base element, resulting in correct centering. The old centering was shifted too far to the right. This is also pretty evident if you look at the screenshot images (e.g. in diff mode): old screenshot vs. new screenshot.

So I'm happy with all the screenshots now. I'll clean up the code according to the comments next.

edemaine · 2018-05-10T18:50:30Z

@kevinbarabash I implemented all your comments on the code. This should be good to go now, except for probably we should add some multiline line-breaking tests.

kevinbarabash · 2018-05-10T18:57:15Z

@edemaine thanks. This looks great. I'm so happy you were able to sort out the horizontal spacing differences. I'll do another pass this evening.

edemaine · 2018-05-10T19:15:22Z

Added a screenshot test, which should test everything, including \nobreak, \allowbreak, and \hspace vs. \hspace*. While testing, I realized that I broke \nobreak when spaces became .mspace. Should be all set now.

kevinbarabash

LGTM. So excited to have this in the project!

kevinbarabash · 2018-05-10T23:11:06Z

src/buildHTML.js

@@ -205,7 +205,7 @@ export const getTypeOfDomTree = function(node, side = "right") {
 // 'mtight' indicates that the node is script or scriptscript style.
 export const isLeftTight = function(node) {
    node = getOutermostNode(node, "left");
-    return utils.contains(node.classes, "mtight");
+    return node.hasClass("mtight");


kevinbarabash · 2018-05-10T23:12:37Z

src/buildHTML.js

+ * Combine an array of HTML DOM nodes (e.g., the output of `buildExpression`)
+ * into an unbreakable HTML node of class .base, with proper struts to
+ * guarantee correct vertical extent.  `buildHTML` calls this repeatedly to
+ * make up the entire expression as a sequence of unbreakable units.


Nice comment.

kevinbarabash · 2018-05-10T23:17:30Z

src/buildHTML.js

@@ -654,10 +654,60 @@ export default function buildHTML(tree, options) {
    // normal place) so we use an absolute value for vertical-align instead
    bottomStrut.style.verticalAlign = -body.depth + "em";


I didn't realize that you could pass verticalAlign a length. It makes me wonder why the topStrut is even necessary since the bottomStrut's height is already body.height + body.depth.

Hmm, good question! I should experiment with removing the topStrut.

kevinbarabash · 2018-05-10T23:19:23Z

src/buildHTML.js

+export default function buildHTML(tree, options) {
+    // buildExpression is destructive, so we need to make a clone
+    // of the incoming tree so that it isn't accidentally changed
+    tree = JSON.parse(JSON.stringify(tree));


I didn't realize this. I wonder how we're mutating tree. 🤔

I'm curious too! I haven't seen any, but this comment has been in the code for a long time.

kevinbarabash · 2018-05-10T23:21:55Z

src/buildHTML.js

+                i++;
+                parts.push(expression[i]);
+                if (expression[i].hasClass("nobreak")) {
+                    nobreak = true;


This is a lot cleaner.

kevinbarabash · 2018-05-10T23:31:49Z

Is anyone able able to view side-by-side images in the files tab on GitHub? All I see is Binary file not shown.. It's not just this diff either. :(

kevinbarabash · 2018-05-10T23:44:17Z

I had a look at the screenshots. They look good.

edemaine · 2018-05-11T02:45:15Z

@kevinbarabash Check out #1267 (comment) . I was playing with the various "rich diff" options and they're pretty cool! You can even overlay the two imaged in various ways (though not as good as our red/green diffs).

Thanks for the review! I excited to use this feature.

As suggested in KaTeX#1287 (comment) the two struts were redundant; the formerly "bottom" strut suffices to implement both height and depth constraints.

* One strut instead of two As suggested in #1287 (comment) the two struts were redundant; the formerly "bottom" strut suffices to implement both height and depth constraints. * Update screenshots

edemaine added 3 commits May 4, 2018 10:19

Line breaks for inline formulas

4b652ed

Basic support for \allowbreak and \nobreak

8d79299

Fix spacing around \nobreak, and add documentation

bb3d63d

edemaine mentioned this pull request May 4, 2018

Break/wrap formula if too wide #327

Closed

Backwards-compatibility _getBuilt to fix tests

d0847e0

sophiebits reviewed May 4, 2018

View reviewed changes

Put operator spacing on same line as operator

5729c2e

edemaine added 2 commits May 5, 2018 12:32

One approach to ~

d77ffb3

Simplify \allowbreak/\nobreak, make ~/\nobreakspace prevent line breaks

a40eae1

edemaine mentioned this pull request May 8, 2018

How do you get environments to work? #1296

Closed

edemaine added 4 commits May 8, 2018 15:33

Merge remote-tracking branch 'upstream/master' into inlinebreak

aec159f

Adapt to KaTeX#1295

ab3f628

Prevent wrapping within a .base

009da94

Implement \hspace* properly

3eb9d3f

edemaine mentioned this pull request May 8, 2018

Support for top-level \newline and \\ in inline math #1298

Merged

Fix flow error

de1b59d

Add min-width rule to .vlist-s

05adb3d

edemaine added 5 commits May 10, 2018 12:39

Factor out hasClass method

365dda7

Cleanup nobreak test

2877a4d

Pull out buildHTMLUnbreakable

8781abc

Fix \hspace* test (no longer the same as \hspace)

8c43c8a

Merge remote-tracking branch 'upstream/master' into inlinebreak

bbab6c7

edemaine added 2 commits May 10, 2018 15:14

Fix \nobreak handling

e54e826

Add screenshot test

60f8a8d

kevinbarabash approved these changes May 10, 2018

View reviewed changes

kevinbarabash mentioned this pull request May 10, 2018

Cleanup domTree.js to re-use code #1305

Merged

kevinbarabash merged commit 523df29 into KaTeX:master May 10, 2018

edemaine added a commit to edemaine/KaTeX that referenced this pull request May 11, 2018

One strut instead of two

8a8892c

As suggested in KaTeX#1287 (comment) the two struts were redundant; the formerly "bottom" strut suffices to implement both height and depth constraints.

edemaine mentioned this pull request May 11, 2018

One strut instead of two #1307

Merged

ylemkimon mentioned this pull request Jun 15, 2018

Can't access height of KaTeX Expression via BuildTree #1433

Closed

ylemkimon mentioned this pull request Aug 18, 2018

Release v0.10.0-rc #1634

Merged

1 task

daniel3735928559 mentioned this pull request Nov 6, 2018

Question: Wordwrap or similar daniel3735928559/guppy#113

Closed

pkra mentioned this pull request Nov 22, 2018

natural reflow for inline content mathjax/MathJax-src#173

Closed

ronkok mentioned this pull request Dec 8, 2019

MathML automatic soft line breaks #2169

Open

snyk-bot mentioned this pull request Feb 23, 2020

[Snyk] Upgrade katex from 0.9.0 to 0.11.1 saurabharch/Rocket.Chat#1

Open

creativecreatorormaybenot mentioned this pull request Nov 29, 2020

Wrapping znjameswu/flutter_math#8

Closed

MartinSchoeler mentioned this pull request Jun 14, 2024

fix: Long katex strings breaking overflow in x axis RocketChat/Rocket.Chat#32609

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Line breaks for inline formulas #1287

Line breaks for inline formulas #1287

edemaine commented May 4, 2018

codecov bot commented May 4, 2018 •

edited

Loading

sophiebits left a comment

sophiebits May 4, 2018

edemaine May 4, 2018

sophiebits May 4, 2018

ronkok commented May 4, 2018

ronkok commented May 4, 2018

edemaine commented May 5, 2018

edemaine commented May 5, 2018 •

edited

Loading

ronkok commented May 5, 2018

edemaine commented May 5, 2018

ronkok commented May 5, 2018

edemaine commented May 5, 2018 •

edited

Loading

ronkok commented May 5, 2018 •

edited

Loading

edemaine commented May 5, 2018

edemaine commented May 8, 2018

ronkok commented May 8, 2018

edemaine commented May 8, 2018

edemaine commented May 10, 2018 •

edited

Loading

edemaine commented May 10, 2018

edemaine commented May 10, 2018

kevinbarabash commented May 10, 2018

edemaine commented May 10, 2018

kevinbarabash left a comment

kevinbarabash May 10, 2018

kevinbarabash May 10, 2018

kevinbarabash May 10, 2018

edemaine May 11, 2018

kevinbarabash May 10, 2018

edemaine May 11, 2018

kevinbarabash May 10, 2018

kevinbarabash commented May 10, 2018

kevinbarabash commented May 10, 2018

edemaine commented May 11, 2018

		@@ -654,10 +654,60 @@ export default function buildHTML(tree, options) {
		// normal place) so we use an absolute value for vertical-align instead
		bottomStrut.style.verticalAlign = -body.depth + "em";

Line breaks for inline formulas #1287

Line breaks for inline formulas #1287

Conversation

edemaine commented May 4, 2018

codecov bot commented May 4, 2018 • edited Loading

Codecov Report

sophiebits left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ronkok commented May 4, 2018

ronkok commented May 4, 2018

edemaine commented May 5, 2018

edemaine commented May 5, 2018 • edited Loading

ronkok commented May 5, 2018

edemaine commented May 5, 2018

ronkok commented May 5, 2018

edemaine commented May 5, 2018 • edited Loading

ronkok commented May 5, 2018 • edited Loading

edemaine commented May 5, 2018

edemaine commented May 8, 2018

ronkok commented May 8, 2018

edemaine commented May 8, 2018

edemaine commented May 10, 2018 • edited Loading

edemaine commented May 10, 2018

edemaine commented May 10, 2018

kevinbarabash commented May 10, 2018

edemaine commented May 10, 2018

kevinbarabash left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevinbarabash commented May 10, 2018

kevinbarabash commented May 10, 2018

edemaine commented May 11, 2018

codecov bot commented May 4, 2018 •

edited

Loading

edemaine commented May 5, 2018 •

edited

Loading

edemaine commented May 5, 2018 •

edited

Loading

ronkok commented May 5, 2018 •

edited

Loading

edemaine commented May 10, 2018 •

edited

Loading