Spacing after a displayed equation in a narrow screen

[cebola2]

Issue Summary

Spacing after a displayed equation in a narrow screen is bigger than on wider screens.

Steps to Reproduce:

1. Go to https://young.math.tecnico.ulisboa.pt/seminars?id=7274 , in a desktop or tablet, and look at the spacing after the displayed equation.
2. Go to https://young.math.tecnico.ulisboa.pt/seminars?id=7274 , in some smartphone in portrait orientation, and look at the spacing after the displayed equation.

Technical details:

• MathJax Version: 4.0beta6
• Seems to be client and OS independent.

You can look at the MathJax configuration at https://young.math.tecnico.ulisboa.pt/scripts/mathjax4-config.js

Supporting information:

MathJax is loaded locally from https://young.math.tecnico.ulisboa.pt/mathjax4/tex-mml-svg-nofont.js

[cebola2]

It might be related to the first equation in the cases structure being broken. The problem does not occur in similar examples with no line braking.

[dpvc]

This looks to be due to the line breaking that is occurring in the table that is how the cases environment is implemented. It looks like the table is retaining the original width of the cell from before the line-breaking occurred, instead of reducing the column width after the breaks.

I will need to make a pull request to fix that, but haven't worked out the details yet.

[dpvc]

OK, I've have the chance to look into this further, and have found the problem, which is what I suspected: the column width is not being reduced in some cases after the line breaking has occurred.

I will submit a PR to fix the problem, but for now, you can incorporate the following into your MathJax configuration:

MathJax = {
  output: {
    displayAlign: "left"
  },
  startup: {
    ready() {
      const {SvgMtable} = MathJax._.output.svg.Wrappers.mtable;
      SvgMtable.prototype.breakColumn = function (i, W) {
        if (this.jax.math.root.attributes.get('overflow') !== 'linebreak' || !this.jax.math.display) return;
        const {D} = this.getTableData();
        let j = 0;
        let w = 0;
        for (const row of this.tableRows) {
          const cell = row.getChild(i);
          if (cell && cell.getBBox().w > W) {
            cell.childNodes[0].breakToWidth(W);
            const bbox = cell.getBBox();
            D[j] = Math.max(D[j], bbox.d);
            if (bbox.w > w) {
              w = bbox.w;
            }
          }
          j++;
        }
        this.cWidths[i] = w;
      }
      MathJax.startup.defaultReady();
    }
  }
};

(The problem was the that last line of the breakColumn() function was being done conditionally, and the condition prevented the column from becoming smaller, as it should.

See if this works for your situation.

[cebola2]

Deployed and it seems to work like a charm. Thanks!

[dpvc]

Glad it is working for you. Let us know if you notice any issues that the patch may have caused.