MathJax v4 newline space

[Prof. Caju]

I'd like to know if there is some config we could use to change the vertical space when adding a newline in the middle of the expression.

For example: 

abc \\ def

I want to have 10px of vertical space between the "abc" line and the "def" line.

Is it possible?

Kind regards,

Prof. Caju

[Davide Cervone]

The options.linebreaks.lineleading configuration option allows you to set the default size of the spacing between lines, but this is in em units, so you can't give px units directly.  You could use an em-unit value that is visually close to what you want, or you could compute 

10 / MathJax.startup.document.outputJax.pxPerEm

in the browser console and use that value for your lineleading configuration (though depending on the CSS in your page, that might vary from user to user).

Alternatively, you could incorporate

MathJax = {

  startup: {

    ready() {

      MathJax.startup.defaultReady();

      const jax = MathJax.startup.document.outputJax;

      jax.options.linebreaks.lineleading = 10 / jax.pxPerEm;

    }

  }

}

into your configuration.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/67d767f5-b743-488f-86b1-c9fab14fc40en%40googlegroups.com.

[Prof. Caju]

Thanks for the reply, Deivide.

I just added to my configuration the code provided, and could not see any changes in the space between the lines. My config have the startup block like this:

startup: {

ready() {
MathJax.startup.defaultReady();
const jax = MathJax.startup.document.outputJax;
jax.options.linebreaks.lineleading = 10 / jax.pxPerEm;

console.log(jax);

MathJax.startup.document.inputJax[0].preFilters.add((data) => {
if (!data.math.display) {
data.math.math = '\\displaystyle{' + data.math.math + '}';
}
});
},

},

And the result of the console.log line above is this:

As I can see in the image above, the lineleading is NaN.

Is there something I am missing here?

Kind regards,

Prof. Caju

[Davide Cervone]

OK, my fault.  I was testing in the browser by hand rather then through an actual configuration.  It turns out that pxPerEm isn't set yet when ready() runs (it is dependent on  the ex height where the math is displayed, and can change from expression to expression.  So it is harder to do this, and it must be set during each expression when it is processed.  For that, we will override the setScale() function of the output jax as a hack to get access to the pxPerEm value after it has been set, but before the expression has been typeset.  Here is a configuration that should work, while still doing your \displaystyle filter:

MathJax = {

  startup: {

    ready() {

      const {CHTML} = MathJax._.output.chtml_ts;

      const COMMON = CHTML.prototype.__proto__;

      Object.assign(COMMON, {

        _setScale_: COMMON.setScale,

        setScale(node, wrapper) {

          this.options.linebreaks.lineleading = 10 / this.pxPerEm;

          this._setScale_(node, wrapper);

        }

      });

      MathJax.startup.defaultReady();

      MathJax.startup.document.inputJax.tex.preFilters.add((data) => {

        if (!data.math.display) {

          data.math.math = '\\displaystyle{' + data.math.math + '}';

        }

      });

    }

  }

}

It is an ugly hack, but should do the trick.

Davide

On May 17, 2024, at 3:58 PM, Prof. Caju <kuf...@gmail.com> wrote:

Thanks for the reply, Deivide.

I just added to my configuration the code provided, and could not see any changes in the space between the lines. My config have the startup block like this:

startup: {

ready() {
MathJax.startup.defaultReady();
const jax = MathJax.startup.document.outputJax;
jax.options.linebreaks.lineleading = 10 / jax.pxPerEm;
console.log(jax);

MathJax.startup.document.inputJax[0].preFilters.add((data) => {
if (!data.math.display) {
data.math.math = '\\displaystyle{' + data.math.math + '}';
}
});
},

},

And the result of the console.log line above is this:

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/77897469-1c17-4e8a-bd62-851c650f915dn%40googlegroups.com.
<console.log.jpg>

[Prof. Caju]

Hello, Davide.

I could not do the trick :(

Look how is my ready block:

ready() {
const CHTML = MathJax._.output.chtml_ts.CHTML;

const COMMON = CHTML.prototype.__proto__;
Object.assign(COMMON, {
_setScale_: COMMON.setScale,
setScale(node, wrapper) {
this.options.linebreaks.lineleading = 10 / this.pxPerEm;
this._setScale_(node, wrapper);

console.log(this);
}
});
MathJax.startup.defaultReady();

MathJax.startup.document.inputJax[0].preFilters.add((data) => {
if (!data.math.display) {
data.math.math = '\\displaystyle{' + data.math.math + '}';
}
});
},

And this is the result of the console.log that I introduce in the code:

And the vertical height is still the same as before for the code $abc\\def$ (even changing 10 to 100 or 1000, no changes):

I guess I am doing something wrong, but I could not detect it..

Kind regards,

Prof. Caju

[Davide Cervone]

OK, I didn't pick up that this was an in-line expression, and I was testing with displayed equations.  It looks like in-line expressions don't use the line leading (I'll need to check into that).  So we need to use a different approach.

Remove the first 10 lines of the ready() function (the new ones that I had given you earlier), and add

mjx-linestrut:first-child {

  height: calc(1em + 10px)

}

to your page's CSS.  See if that works.

Davide

On May 17, 2024, at 8:53 PM, Prof. Caju <kuf...@gmail.com> wrote:

Hello, Davide.

I could not do the trick :(

Look how is my ready block:

ready() {
const CHTML = MathJax._.output.chtml_ts.CHTML;
const COMMON = CHTML.prototype.__proto__;
Object.assign(COMMON, {
_setScale_: COMMON.setScale,
setScale(node, wrapper) {
this.options.linebreaks.lineleading = 10 / this.pxPerEm;
this._setScale_(node, wrapper);
console.log(this);
}
});
MathJax.startup.defaultReady();
MathJax.startup.document.inputJax[0].preFilters.add((data) => {
if (!data.math.display) {
data.math.math = '\\displaystyle{' + data.math.math + '}';
}
});
},

And this is the result of the console.log that I introduce in the code:

<console.log.jpg>

And the vertical height is still the same as before for the code $abc\\def$ (even changing 10 to 100 or 1000, no changes):

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/61dc170d-7114-4166-90f3-cba9832f59ccn%40googlegroups.com.
<console.log.jpg><abcdef.jpg>

[Prof. Caju]

Wow!!! This one was easier than we thought :D

It works flawlesly. 

Thanks for your great help, Davide

[Davide Cervone]

I'm glad it is working for you, but I should note that it is not a perfect solution.  If the height of the expression is larger than normal, that extra height is not taken into account, so the separation between lines will not be 10px in that case.  For example, if you did  $abc\\d\frac{a}{f}$, then the spacing would not be 10px: the spacing to the top of the d would be 10px, but not to the top of the e.

Also, this is a CHTML-only solution, so if someone switches to the SVG output using the contextual menu, the spacing will be its normal amount.  My original attempt was meant to handle both output formats (since it modified the common parent class for the two formats).  Unfortunately, that solution fell short.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/e2904a16-69fb-4225-9d8a-96891e33fe70n%40googlegroups.com.