-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Weird error with line breaking (MathJax 4.0.0) #3015
Comments
I am not able to reproduce the You could use |
Hmm interesting, the error is no longer appearing. Likely some other setting that was causing the error. Thanks again for the help! |
I'm reopening, as I was working on the issue of the equation numbers being outside the container, and was able to reproduce the error, and can do so reliably. I will look into it further. |
Ok sounds good. Also, I just came across another interesting phenomenon in MathJax 4.0.0 whereby all the inline Math and the equation numbers are not vertically aligned in the text. Everything is offset slightly downward. I have attached two examples. I assume this is not a new issue but can't seem to find the fix. I am using the above setup for MathJax. |
I believe the alignment issue may be due to CSS on your page, but I no longer have access to the site, so can't check it out. This is not something that has been reported elsewhere. |
Well, it took several hours to figure out what was going on, and it was subtle, having to do with cached information about how many line breaks there are in various elements. When the width of the table cell is smaller than the width of the fractions, that leads to the error. I've made a PR for the fix, but for now, you can add const {CommonWrapper} = MathJax._.output.common.Wrapper;
const {LineBBox} = MathJax._.output.common.LineBBox;
Object.assign(CommonWrapper.prototype, {
invalidateBBox(bubble = true) {
if (this.bboxComputed || this._breakCount >= 0) {
this.bboxComputed = false;
this.lineBBox = [];
this._breakCount = -1;
if (this.parent && bubble) {
this.parent.invalidateBBox();
}
}
},
_getLineBBox: CommonWrapper.prototype.getLineBBox,
getLineBBox(i) {
if (!this.lineBBox[i] && !this.breakCount) {
const obox = this.getOuterBBox();
this.lineBBox[i] = LineBBox.from(obox, this.linebreakOptions.lineleading);
}
return this._getLineBBox(i);
}
}); to the |
Ok perfect! I tried removing all CSS and Javascript on my website and still had vertical misalignment of all in-line math whereby each component is slightly downshifted by the same amount. Here is my current MathJax setup: window.MathJax = {
section: {
n: -1,
useLetters: false,
letters: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
},
loader: {load: ['[tex]/tagformat', '[tex]/mathtools', 'output/chtml']},
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']], //allow inline math
displayMath: [['$$','$$']],
tagSide: 'right', //location of equation numbers
tags: 'all',
packages: {'[+]': ['tagformat', 'sections', 'autoload-all', 'mathtools']},
tagformat: {
number: (n) => {
const section = MathJax.config.section;
return (section.useLetters ? section.letters[section.n] : section.n) + '.' + n;
}
}
},
chtml: {
mtextInheritFont: true, // font to use for mtext, if not inheriting (empty means use MathJax fonts)
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: 2, // the default lineleading in em units
LinebreakVisitor: null, // The LinebreakVisitor to use
},
startup: {
ready() {
const {CommonWrapper} = MathJax._.output.common.Wrapper;
const {LineBBox} = MathJax._.output.common.LineBBox;
const Configuration = MathJax._.input.tex.Configuration.Configuration;
const CommandMap = MathJax._.input.tex.SymbolMap.CommandMap;
new CommandMap('sections', {
nextSection: 'NextSection',
setSection: 'SetSection',
}, {
NextSection(parser, name) {
MathJax.config.section.n++;
parser.tags.counter = parser.tags.allCounter = 0;
},
SetSection(parser, name) {
const section = MathJax.config.section;
const c = parser.GetArgument(name);
const n = section.letters.indexOf(c);
if (n >= 0) {
section.n = n;
section.useLetters = true;
} else {
section.n = parseInt(c);
section.useLetters = false;
}
},
});
Object.assign(CommonWrapper.prototype, {
invalidateBBox(bubble = true) {
if (this.bboxComputed || this._breakCount >= 0) {
this.bboxComputed = false;
this.lineBBox = [];
this._breakCount = -1;
if (this.parent && bubble) {
this.parent.invalidateBBox();
}
}
},
_getLineBBox: CommonWrapper.prototype.getLineBBox,
getLineBBox(i) {
if (!this.lineBBox[i] && !this.breakCount) {
const obox = this.getOuterBBox();
this.lineBBox[i] = LineBBox.from(obox, this.linebreakOptions.lineleading);
}
return this._getLineBBox(i);
}
});
Configuration.create(
'sections', {handler: {macro: ['sections']}}
);
MathJax.startup.defaultReady();
}
}
}; |
Fix potential crash with linebreaks. (mathjax/MathJax#3015)
What browser and OS are you using? I am not able to reproduce the baseline problem. What encoding is set for your page, and do you have |
Yup. I found the problem. It only happens on Safari (Version 16.3). The vertical alignment is fine in Chrome (Version 110.0.5481.177 (Official Build) (x86_64)) and Firefox (110.0.1 (64-bit). |
Yes, Safari does have some round-off problems that cause baseline alignment issues. Does it change at different zoom levels? |
Yup, the alignment seems to disappear as I zoom in. If it helps, here is a link to a post on my website that I am setting up: https://sebastiansciarra.com/technical_content/mle_em_algorithms/. |
Well, you could try using mjx-math {
vertical-align: .6px;
} and see if that helps, hoping that it doesn't throw off the other browsers. If it does, then you could use a Safari-only CSS hack. Google "safari only css" to get lots of examples of how to do it. |
Ok sounds good. This ended up solving most of the alignment issues in Safari: @supports (-webkit-appearance:none) {
.mjx-math {
vertical-align: 0.8px;
}
.MathJax_ref {
vertical-align: 2px;
}
} |
When using MathJax 4.0.0 with line breaking, I get an odd outcome whereby the following equation renders when the screen width is above about 320px, but not not below 320px (results in
Math output error
).Here is the setup code for MathJax I am using
The text was updated successfully, but these errors were encountered: