Skip to content
GitLab
Closed
Issue created by Davide P. Cervone@dpvcContributor

Line breaking doesn't occur when first breakpoint is too far past the width

MathJax stops looking for line breaks past a certain distance past the container width. Currently, the value is 1/3 of the container width (so no breaks will occur farther than 1.33 times the width of the container). That works well with page-sized containers, but for very small containers, that might be too small, and should probably be made into a configurable parameter (it is currently hard-coded). It also would be good to only apply that cut-off if a breakpoint has already been found. This is handled at line 153, and several other locations, of the CommonHTML multiline extension (and similar locations for the other output jax). One could make this

while (i < m && (info.scanW < 1.33*CHTML.linebreakWidth || info.w === 0)) {

to make it only apply when a previous breakpoint exists, and the 1.33 could be added to the penalty values (perhaps) at line 36.

Here is a minimal example that shows the issue:

<!DOCTYPE html>
<html>
<head>
<title>MathJax:  MathJax Line Breaks Test</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    "CommonHTML": { linebreaks: { automatic: true } },
    "HTML-CSS": { linebreaks: { automatic: true } },
    "SVG": { linebreaks: { automatic: true } }
  });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/latest.js?config=MML_CHTML"></script>
</head>
<body style="padding:0 2em; font-size: 150%">

<div style="border:1px solid black; width:50px">
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mspace width="25px" height=".5em" mathbackground="red"></mspace>
  <mi>x</mi>
  <mo>=</mo>
  <mi>x</mi>
</math>
</div>

<p>

<div style="border:1px solid black; width:50px">
<math xmlns="http://www.w3.org/1998/Math/MathML"> 
  <mspace width="50px" height=".5em" mathbackground="red"></mspace>
  <mi>x</mi>
  <mo>=</mo> 
  <mi>x</mi>
</math>
</div>

</body>
</html>

The first div will line break at the equal sign (since it is less than 1.33 of the div's width away), but the second will not (since the equal sign is more than 1.33 of the div's width from the left).