How to make goodbreak work for every space

107 views
Skip to first unread message

Andrew Murdza

unread,
Oct 2, 2022, 3:41:10 PM10/2/22
to MathJax Users
I have started using Mathjax 4.00 and I have been using linebreaking. The problem I am having is that in-line text only breaks when I use \goodbreak.

Is there a way to insert a \goodbreak at every space inside \text?
I know that I could do

$\t{You }\goodbreak\t{can }\goodbreak\t{show }\goodbreak\t{that }\goobreak\t{the }\goodbreak x\t{-value }\goodbreak \t{of }\goodbreak\t{the }\goodbreak ... instead of 

\t{You can show that the }x\t{-value of the...

(\t is my macro for \text{}) but this is not practical for me.

Andrew Murdza

unread,
Oct 2, 2022, 3:45:22 PM10/2/22
to MathJax Users
It might also be an issue with how I added line breaks. This is my code for the linebreaks

  chtml: {
    scale: 1,                      // global scaling factor for all expressions
    minScale: .5,                  // smallest scaling factor to use
    mtextInheritFont: false,       // true to make mtext elements use surrounding font
    merrorInheritFont: false,      // true to make merror text use surrounding font
    mtextFont: '',                 // font to use for mtext, if not inheriting (empty means use MathJax fonts)
    merrorFont: 'serif',           // font to use for merror, if not inheriting (empty means use MathJax fonts)
    unknownFamily: 'serif',        // font to use for character that aren't in MathJax's fonts
    mathmlSpacing: false,          // true for MathML spacing rules, false for TeX rules
    skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
    exFactor: .5,                  // default size of ex in em units
    displayAlign: 'left',          // default for indentalign when set to 'auto'
    displayIndent: '0',             // default for indentshift when set to 'auto'
    displayOverflow: 'linebreak',
    linebreaks: {                  // options for when overflow is linebreak
      inline: true,                   // true for browser-based breaking of inline equations
      width: '100%',                  // a fixed size or a percentage of the container width
      lineleading: 0,                // the default lineleading in em units
      LinebreakVisitor: null,         // The LinebreakVisitor to use
    },
  },

Andrew Murdza

unread,
Oct 2, 2022, 4:02:47 PM10/2/22
to MathJax Users
Also is there a way to make line spacing wider? Especially with \goodbreak line breaks in inline equations, there is very little vertical space between lines but even for \\ I would like to replace it with \\[2pt]

I tried copying this from the documentation and then I would changes to make the line spacing higher and remove the extra stuff I don't want. However, when I added it to style.css, it didn't change anything even though it seems like it is supposed to generate blue and red lines.

mjx-measure {
  display: inline-block;
  border-left: 2px solid red;
  border-right: 2px solid red;
}
mjx-baseline {
  display: inline-block;
  height: 0;
  width: 0;
}
mjx-html {
  display: inline-block;
}
mjx-line {
  display: inline-block;
  height: 0;
  width: 1em;
  border-top: 1px solid blue;
}
#input {
  display: inline-block;
}
#input textarea {
  margin-bottom: 3px;
}
#input input[type="button"] {
  float: right;
}

Davide Cervone

unread,
Oct 2, 2022, 4:05:07 PM10/2/22
to mathja...@googlegroups.com
In-line breaking only occurs at locations where TeX would allow a line break.  That means basically at binary operators and relations that occur at the top-most level of the expression (i.e., not inside any box or other structure), or at penalties that you insert via \goodbreak, etc.  The text produced by the \text{} macro is inside a box, so TeX will not break that, and neither does MathJax.  

Of course, the natural way to do this is NOT to put the text inside math delimiter at all, and instead do

You can show that the $x$-value of the ...

directly without the need for any \text{} macros.  That is a far more natural and efficient approach.

If you absolutely must use \text{}, it would be possible to define a macro in javascript that would take its argument and break it up into separate \text{} commands, but I would recommend just using math for actual math, not text, except for text that must be embedded in the math (e.g., for cases).

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/6a8f2de0-012b-4315-a62f-8d4c48904742n%40googlegroups.com.

Andrew Murdza

unread,
Oct 2, 2022, 4:08:57 PM10/2/22
to mathja...@googlegroups.com
I am using math for everything because when I don’t the text outside of math looks different and is smaller than text inside of equations. I have hired someone to help with the website and they can help with doing this with JavaScript adding \t{}

Andrew Murdza

unread,
Oct 2, 2022, 4:11:40 PM10/2/22
to mathja...@googlegroups.com
Unless there is a way to make text inside and outside of equations consistent

Davide Cervone

unread,
Oct 2, 2022, 4:19:29 PM10/2/22
to mathja...@googlegroups.com
If you set

mtextInheritFont: true

instead of false, that will use the outside text font for \text{} inside the math, so it will be the same font.  Since you are using SVG output, that always sets the height of the "x" in math to be the ex-height of the surrounding font, so as long as that font has a properly set ex-height (not all do), then the inner and outer fonts should match fine.  You can also use the `scale` configuration parameter to alter the size of the SVG output if not.

Davide

Davide Cervone

unread,
Oct 2, 2022, 4:28:18 PM10/2/22
to mathja...@googlegroups.com
The linebreak.lineleading configuration option sets the default size of linebreaks in displayed math.  The browser handles the linebreaks for in-line content, so that is based on the line-height CSS property and the size of your font.

I tried copying this from the documentation and then I would changes to make the line spacing higher and remove the extra stuff I don't want. However, when I added it to style.css, it didn't change anything even though it seems like it is supposed to generate blue and red lines.

mjx-measure {
  display: inline-block;
  border-left: 2px solid red;
  border-right: 2px solid red;
}
mjx-baseline {
  display: inline-block;
  height: 0;
  width: 0;
}
mjx-html {
  display: inline-block;
}
mjx-line {
  display: inline-block;
  height: 0;
  width: 1em;
  border-top: 1px solid blue;
}
...

That CSS was for a special program that you would use for measuring the size of HTML elements that you want to embed into the math on your page, so really has nothing to do with how MathJax generates its general output.  But these node types are also used by MathJax itself, and if you change them, that can throw off MathJax's output.  You SHOULD NOT set the css for MathJax's internal node types unless you are sure you know what you are doing.

Davide

Andrew Murdza

unread,
Oct 2, 2022, 4:31:01 PM10/2/22
to MathJax Users
When I added mtextInheritFont: true it became very weird where the text and equations overlapped
Screenshot 2022-10-02 162629.png

Andrew Murdza

unread,
Oct 2, 2022, 4:36:36 PM10/2/22
to MathJax Users
Also, it made the text inside of the equation smaller (so it is still smaller than non-text so f(x) is taller than the rest of the text) instead of making the text outside of the equation larger to match the size of the equation.

I am using the below code so I was expecting the text inside and outside of equations to be the same (other than being italicized inside of equations). This is the case when I use \text{} but not when I type outside of dollar signs.
@font-face {
  font-family: tex;
  src: url("fonts/MathJax_Main-Regular.otf") format("truetype");
}

Andrew Murdza

unread,
Oct 2, 2022, 4:40:40 PM10/2/22
to MathJax Users
Also you said that I am using svg but I think I am actually using  tex-mml-chtml.js because I am using 

 chtml: {....
}

Should I switch to svg?

Andrew Murdza

unread,
Oct 2, 2022, 4:47:52 PM10/2/22
to MathJax Users
I would prefer not to switch to svg because it undoes my css for mathtips and makes the text look rougher for some reason.

Davide Cervone

unread,
Oct 2, 2022, 4:51:09 PM10/2/22
to mathja...@googlegroups.com
I am not able to reduce that.  It works as expected for me.  Perhaps there is other CSS that is causing problems.  It is hard to tell without access to the actual page that you are using.  Can you generate a minimal example illustrating the issue?

Davide


To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/ba91cb79-4c48-45ca-8d32-863f5b461dc4n%40googlegroups.com.
<Screenshot 2022-10-02 162629.png>

Davide Cervone

unread,
Oct 2, 2022, 4:57:53 PM10/2/22
to mathja...@googlegroups.com
Also, it made the text inside of the equation smaller (so it is still smaller than non-text so f(x) is taller than the rest of the text) instead of making the text outside of the equation larger to match the size of the equation.

MathJax doesn't modify the text outside the equation, but it should use the outside text for the text inside the equation.

I'm not sure why I thought you were using SVG, but since you are using CHTML, you can set

matchFontHeight: false

in the chtml configuration section and that should prevent MathJax from scaling the math to fit the surrounding font.  So the internal and external font should be the same size.  The SHOULD be the case even when the math is scaled, but if you aren't getting that, perhaps there is something else going on.  You haven't given your full workflow, so is MathJax typesetting the page as a whole, or are you calling MathJax.tex2chtml() or one of the other conversion functions and inserting the math yourself?  Or are you processing the page server-side?

A more complete description of your application's workflow would be useful, as would the complete configuration and the script tag that you are using to load MathJax.

I am using the below code so I was expecting the text inside and outside of equations to be the same (other than being italicized inside of equations). This is the case when I use \text{} but not when I type outside of dollar signs.
@font-face {
  font-family: tex;
  src: url("fonts/MathJax_Main-Regular.otf") format("truetype");
}

As described in the release notes for v4.0.0-alpha.1, the default font has changed, so it is no longer MathJax_Main-Regular.otf.  The new one is similar, but not identical to, the original MathJax TeX fonts.

Davide

Davide Cervone

unread,
Oct 2, 2022, 4:59:14 PM10/2/22
to mathja...@googlegroups.com
Should I switch to svg?

I'm not sure what I saw that made me think that.  Using CHTML is fine (and allows the "matchFontHeight: false" option that should help your situation).

Davide

Andrew Murdza

unread,
Oct 2, 2022, 5:53:33 PM10/2/22
to MathJax Users
I found out the issue is that I have a collapsed section of the webpage and when that section start as collapsed (which involves display none) then the issue occurs when I uncollapse it. I solved it by starting the website expanded instead of collapsed.

Andrew Murdza

unread,
Oct 2, 2022, 6:12:02 PM10/2/22
to MathJax Users
I found in the release notes that the new font is mathjax-modern font. I went here to find the font: https://www.maths.tcd.ie/MathJax/fonts/HTML-CSS/Latin-Modern/otf/. However, there are many files and I don't know which one to use. Is it LatinModernMathJax-Normal-Regular?

Davide Cervone

unread,
Oct 2, 2022, 6:15:17 PM10/2/22
to mathja...@googlegroups.com
Yes, that would do it.  When math is in an element that has css that includes display:none, the browser does not lay out the contents so all of the elements are considered to have dimensions of 0.  MathJax needs to measure the text when it is using an inherited font (since it doesn't know the font metrics itself), and so it asks the browser for the dimensions it is using.  When display:none is in effect, they are always 0, so MathJax doesn't know how big anything is.  That is why everything was overlapping (and probably why the size was different between the outside text and the text in the math (MathJax has to determine the ex-height of the outer font, and it will get the wrong value in an element with display:none).

I'm glad you were able to get it to work.

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.

Andrew Murdza

unread,
Oct 2, 2022, 6:17:40 PM10/2/22
to MathJax Users
Everything is working now except for the font being the same which I will be able to fix once I add the correct otf

Andrew Murdza

unread,
Oct 2, 2022, 6:19:17 PM10/2/22
to MathJax Users
It turns out that the font is the same height even without  matchFontHeight: false once I fixed that issue so that is good

Davide Cervone

unread,
Oct 2, 2022, 6:22:02 PM10/2/22
to mathja...@googlegroups.com
MathJax breaks up the font into smaller pieces that are organized better for its needs.  You could use mjx-mm-n.woff from


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.

Davide Cervone

unread,
Oct 2, 2022, 6:22:41 PM10/2/22
to mathja...@googlegroups.com
Yes, that is how it is supposed to work.  I was surprised when that wasn't the case earlier but the display:none issue would certainly cause that.

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.
Reply all
Reply to author
Forward
0 new messages