Letter spacing in text no longer working in MathJax4.0

[Andrew Murdza]

I recently updated from MathJax 3.2 to MathJax 4.0. I had this CSS that increases the spacing between letters in words and numbers.

mjx-mtext:not(:last-child) {
margin-right: 0.1rem;
}

However, this is no longer working in MathJax 4.0. How can this be fixed?

[Davide Cervone]

Andrew:

There is not really enough information here to give you a definitive answer.  Your CSS works for me in the simple test case that I used, so perhaps there is something more complicated going on in your page.  We can't tell, since you haven't said anything about how you are calling MathJax, or you MathJax configuration, or what browser you are using or in what OS.  Perhaps you can use the developer console to inspect one of the mjx-mtext elements and see if your rule is being applied to it or not.  If not, then try removing the "not(:last-child)" and see if that changes the result.  It may be that the nesting is no longer the same.

In any case, it is a bad idea to (and not a supposed use case) to use CSS that affects the size or spacing of MathJax's output.  MathJax does not have access to such CSS changes, and so this will throw off MathJax's computations about the width of the elements in your expression.  That can affect things like line breaking, centering of elements in under- and overset items (like limits on a summation, or over- and under-braces).  Such CSS changes are likely to throw off MathJax's layout for such expressions.  Also, if a user changes to SVG output, your changes won't be in effect.

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 visit https://groups.google.com/d/msgid/mathjax-users/a5a485c1-8655-4e2a-a01a-e5eda26b5c0cn%40googlegroups.com.

[Andrew Murdza]

You're right it still works for words like thirty. It wasn't working for numbers and \% but that was also true in MathJax3.2.

This is because numbers are mjx-c but also because the mjx-c's are all separated so not:(last-child) doesn't work. But I need the (last-child) because otherwise there is an extra space after the last character.

Is there a way to do this without CSS? If it helps, the body has letter-spacing:0.1rem but it is not inherited by MathJax.

That is the reason I am currently not using svg and chtml instead, because I want to change the letter spacing and the CSS of math-tips.

[Davide Cervone]

OK, if you are only concerned about the text in \text{} or other text-mode macros (or for <mtext> if you are using MathML input), then one solution would be to configure MathJax's mtextFont option to specify the font to use for mtext elements.  That will be done outside of MathJax's mjx-c and mjx-text nodes, and will contain text that you can style using CSS.  Since MathJax has to measure the results, it will be able to pick up on the changes your CSS makes (where it would not for changing in mjx-c nodes).

For example:

MathJax = {

  output: {

    mtextFont: 'Arial'

  }

};

with 

<style>

mjx-utext {

  letter-spacing: 0.1rem;

  margin-right: -0.1rem;

}

</style>

should do the trick.

Davide

To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/782b7bf1-c39d-4c2e-864e-526c8e037063n%40googlegroups.com.