Lines of LaTeX exceeding textboxes

[pb-amy]

Description

Lines of LaTeX exceed margins of textboxes

Steps to Reproduce

1. Write a long line of LaTeX in a textbox
2. Preview

Expected behavior: Long lines of LaTeX go on to the next line, in the textbox

Actual behavior: They actually exceed textbox margins

System Information

[pkra]

I'm not sure if the rendering stems from client- or server-side rendering but either way this is (probably) a MathJax limitation.

On the one hand, MathJax (v2, not yet v3) only supports automatic line-breaking on the client. A common workaround here is to set overflow: auto on the container element.

On the other hand, the rendering looks like either of three limitations of MathJax's linebreaking, cf. http://docs.mathjax.org/en/v2.7-latest/output.html#automatic-line-breaking.

First, MathJax cannot linebreak within the so-called token elements, so a long \text{} or \operatorname{} will not linebreak within itself but be moved to a new line as a whole.

Second, this looks like a table environment and tables cannot be linebroken, i.e., the right table cell won't reflow as a whole because it's a fixed cell at row 1, column 2 (but e.g., $$ some math \text{ some text } $$ might have the text part reflow to a new line).

Third, to make matters worse: while MathJax can linebreak within table cells, it doesn't like to linebreak near \text{} so splitting up a long \text{} into multiple \text{} doesn't solve the problem

From an authoring point of view, a style guide might suggest to avoid long \text{} within math mode. In this example, a regular old table seems appropriate. (This would also avoid the difference in fonts used for text - though in fairness MathJax can be configured inherit the text font for text-within-math content.)

[SteelWagstaff]

Thanks for your ever helpful reply, @pkra -- in this case the input looks like this:

\begin{array}{rl}
2(5x-8)-6(4x+3) & \text{Distribute 2 into the first set of parentheses and }-6\text{ into the second.} \\ \\
10x-16-24x-18 & \text{Combine like terms }10x-24x\text{ and }-16-18. \\ \\
-14x-34 & \text{Solution}
\end{array}

The text is being displayed in a <div> element rather than a table, but I don't think the issue is the container or overflow; rather, I think it's the long \text{} token element that's causing problems. I'm not sure why they need the text element in this case, tbh. In this case I think we'll advise them to remove it and use a table where appropriate and make the style guide recommendation that they avoid the use of long \text{} within math mode (in other words, to try to only use MathJax to render mathematical expressions).