mathjax
how to change font size
mathjax version: 4.0.0-beta.4 and loading MathJax via mml-chtml.js
setting config:
(window.MathJax = {
options: {
enableMenu: !1,
},
loader: { load: ["[tex]/tagformat", "output/chtml"], paths: { "mathjax-modern": "https://cdn.chista.me/chista-mathjax-4.0.0-beta.4/mathjax-modern-font" } },
extensions: ["mml2jax.js", "MathMenu.js", "MathZoom.js"],
MathML: { extensions: ["mml3.js"] },
chtml: { scale: 1.2, minScale: 1, mtextInheritFont: !0, merrorInheritFont: !0, skipAttributes: {}, exFactor: 13, displayAlign: "center", displayIndent: "0", matchFontHeight: !0, adaptiveCSS: !0 },
linebreaks: { inline: !0, width: "100%", lineleading: 2, LinebreakVisitor: null },
includeHtmlTags: { br: "\n", wbr: "", "#comment": "" },
ignoreHtmlClass: "tex2jax_ignore",
processHtmlClass: "tex2jax_process",
tex: { inlineMath: [["$", "$"]], processEscapes: !1 },
startup: {
ready() {
const t = MathJax._.input.tex.ParseMethods.default,
{ RegExpMap: a } = MathJax._.input.tex.TokenMap;
new a("digit", t.digit, /[\d.٫۰-۹]/);
const { ChtmlMn: e } = MathJax._.output.chtml.Wrappers.mn;
e.prototype.remapChars = function (t) {
const a = [];
for (const e of t) {
const t = this.font.getRemappedChar("mn", e);
a.push(...(t ? this.unicodeChars(t, this.variant) : [e]));
}
return a;
};
const { FontData: n } = MathJax._.output.common.FontData,
o = n.defaultMnMap;
for (var s = 0; s < 10; s++) o[48 + s] = String.fromCodePoint(1776 + s);
MathJax.startup.defaultReady();
},
},
});
I have to set mtextInheritFont to true, that's why a series of formulas are very small, I increased the scale, and I encountered other problems, for example, if the Persian text is inside the braces, it comes out of the braces.
I thought to make your font bigger by 20%, but the number of your fonts is too many and I might make a mistake. Can you guide me how to fix my problem?
Can you provide an example of the MathML that you are using? And also the name of the Persian font you are using?
persian font: iranyekan MathML example:
<div class='chistaItem'
style='text-align:right;justify-content:right;/*MARK-BY-CHISTA-PARSER*/;direction:rtl;/*MARK-BY-CHISTA-PARSER*/;'>
<span class='chistaText'><span dir=rtl>الف) آیا مجموعه دو عضوی <span class='chistaFormula'>
<math
display='inline'>
<mo>{</mo>
<mtext>مداد، خودکار</mtext>
<mo>}</mo>
</math>
</span> می تواند همه برآمدهای ممکن این آزمایش تصادفی را نشان دهد؟</span></span>
</div>
The example that made me use scale 1.2 In this example, if the scale is 1, the sub numbers is very small The font size of parent element is 13px
<div class='chistaItem'
style='text-align:left;justify-content:left;/*MARK-BY-CHISTA-PARSER*/;direction:ltr;/*MARK-BY-CHISTA-PARSER*/;'>
<span class='chistaText'> <span class='chistaFormula'><math display='inline' mathcolor='#050038'>
<mfrac>
<mrow>
<msub>
<mrow>
<mtext>1</mtext>
</mrow>
<mrow>
<mo>×</mo>
<mtext>4</mtext>
</mrow>
</msub>
</mrow>
<mrow>
<msub>
<mrow>
<mtext>3</mtext>
</mrow>
<mrow>
<mo>×</mo>
<mtext>4</mtext>
</mrow>
</msub>
</mrow>
</mfrac>
<mo>+</mo>
<mfrac>
<mrow>
<msub>
<mrow>
<mtext>1</mtext>
</mrow>
<mrow>
<mo>×</mo>
<mtext>3</mtext>
</mrow>
</msub>
</mrow>
<mrow>
<msub>
<mrow>
<mtext>4</mtext>
</mrow>
<mrow>
<mo>×</mo>
<mtext>3</mtext>
</mrow>
</msub>
</mrow>
</mfrac>
<mo>-</mo>
<mfrac>
<mrow>
<mtext>1</mtext>
</mrow>
<mrow>
<mtext>12</mtext>
</mrow>
</mfrac>
<mo>=</mo>
<munder>
<mrow>
<munder accentunder='false'>
<mrow>
<munder>
<mrow>
<munder accentunder='false'>
<mrow>
<mfrac>
<mrow>
<mtext>4</mtext>
</mrow>
<mrow>
<mtext>12</mtext>
</mrow>
</mfrac>
<mo>+</mo>
<mfrac>
<mrow>
<mtext>3</mtext>
</mrow>
<mrow>
<mtext>12</mtext>
</mrow>
</mfrac>
</mrow>
<mo>⎵</mo>
</munder>
</mrow>
<mrow />
</munder>
<mo>-</mo>
<munder>
<mrow>
<munder accentunder='false'>
<mrow>
<mfrac>
<mrow>
<mtext>1</mtext>
</mrow>
<mrow>
<mtext>12</mtext>
</mrow>
</mfrac>
<mo>=</mo>
<mfrac>
<mrow>
<mtext>7</mtext>
</mrow>
<mrow>
<mtext>12</mtext>
</mrow>
</mfrac>
<mo>-</mo>
<mfrac>
<mrow>
<mtext>1</mtext>
</mrow>
<mrow>
<mtext>12</mtext>
</mrow>
</mfrac>
</mrow>
<mo>⎵</mo>
</munder>
</mrow>
<mrow />
</munder>
</mrow>
<mo>⎵</mo>
</munder>
</mrow>
<mrow />
</munder>
<mo>=</mo>
<mfrac>
<mrow>
<mtext>6</mtext>
</mrow>
<mrow>
<mtext>12</mtext>
</mrow>
</mfrac>
<mo>=</mo>
<mfrac>
<mrow>
<mtext>1</mtext>
</mrow>
<mrow>
<mtext>12</mtext>
</mrow>
</mfrac>
</math></span></span></div>
In the example above If I use mn instead of mtext for numbers, the numbers are also very small, Although I set the scale to 1.2 iranyekan font: IRANYekanXFaNum-Regular.zip
Can you provide an example of the MathML that you are using? And also the name of the Persian font you are using?
I have set a similar style, you may have an opinion about this
mjx-utext {
font-family: "iranyekan", Noto Sans, sans-serif!important;
}
I wanted the numbers and text inside the formula to be displayed with Iranyekan font That's why I used the above css
Thank you for the font, and the additional information.
The font size of parent element is 13px
That is very small. The typical font size for websites today is about 16px (note that your 1.2 scale make that 15.6px, which is about right). In MathJax, subscripts and fraction numerators/denominators in text mode are scaled by .707, and subscripts on subscripts on those are scaled at .5 of the original size. So for your 13px font, subscripts and fractions would be at 9px, and subscripts on those would be 6.5px. Note that those sizes include both the height and depth of the font, and for 13px that is usually about 10px of height and 3px of depth (for descenders below the baseline). At .5 scale for sub-subscripts, that is about 5px height and 1.5px depth. So you are trying to render things like the numbers without descenders in only 5 pixels. That is a very small grid to work with, and anti-aliasing is not effective at those sizes (it just makes them smudgy).
Using a larger font size is probably the only real solution here. Your scale of 1.2 does that for the math, but that will make the math oversized compared to the surrounding characters. For example, with your
<math display='inline'>
<mo>{</mo>
<mtext>مداد، خودکار</mtext>
<mo>}</mo>
</math>
the text here will be larger than the surrounding text. (I'm not sure why you are using math for this in any case. I don't know what the words say, but if this is just to get the braces, that seems to be a misuse of math mode.)
One other approach would be to change the scaling factors for the reduced sizes. This is controlled by a MathML attribute called "scriptsizemultiplier", which is 1/sqrt(2) (approximately .707). You can change that by adding scriptsizemultiplier=".8" as an attribute on your <math> elements, for example. This would make the sub-subscripts be .64 times the original size rather than .5.
You can also change it globally using a configuration that includes
MathJax = {
startup: {
ready() {
const {MmlMath} = MathJax._.core.MmlTree.MmlNodes.math;
const {MmlMstyle} = MathJax._.core.MmlTree.MmlNodes.mstyle;
MmlMath.defaults.scriptsizemultiplier = MmlMstyle.defaults.scriptsizemultiplier = .8;
MathJax.startup.defaultReady();
}
}
}
Set the multiplier to a value that works better for you. A value of 1 would mean no reduction in size (the math will look terrible, though).
I have set a similar style, you may have an opinion about this
Yes I do; this is the wrong way to do that, and it can throw off the spacing in other ways.
If you want to set the font used for mtext elements, you should set the mtextFont option in the chtml block of your configuration and set mtextInheritFont to false. For example
MathJax = {
chtml: {
mtextFont: 'iranyekan, Noto Sans, sans-serif',
mtextInheritFont: false
}
}
Modifying MathJax's CSS is usually a bad idea without knowing the internal of how MathJax works.
In #3194, I mention that you have misused mtext in your formulas. Presumably that is to get these into the iranyekan font. But that is the wrong way to do it. The numbers will use the unknownFamily font since they aren't in the mathjax-modern font, so you can use
MathJax = {
chtml: {
unknownFamily: 'iranyekan, Noto Sans, sans-serif',
mtextFont: 'iranyekan, Noto Sans, sans-serif',
mtextInheritFont: false
}
}
to specify that. But the rest of the math shouldn't me in mtext elements. If you want these to be in a sans-serif font, which will help at the low resolution you are working with, you can use the mathjax-fira font, which is a sans-serif font. For that, use
MathJax = {
loader: {
paths: {
"mathjax-fira": "https://cdn.chista.me/chista-mathjax-4.0.0-beta.4/mathjax-fira-font"
}
},
chtml: {
font: 'mathjax-fira',
unknownFamily: 'iranyekan, Noto Sans, sans-serif',
mtextFont: 'iranyekan, Noto Sans, sans-serif',
mtextInheritFont: false
}
}
(once you install that font on your server.)
Thank you very much for the code you sent and the font you told me to use Thanks
const {MmlMath} = MathJax._.core.MmlTree.MmlNodes.math;
const {MmlMstyle} = MathJax._.core.MmlTree.MmlNodes.mstyle;
MmlMath.defaults.scriptsizemultiplier = MmlMstyle.defaults.scriptsizemultiplier = .8;
This code that you sent was very good, thank you, but I have a problem that the numbers in the denominator of the fraction stick to the fraction.
I tried to reduce the number, but it was getting smaller, so I wanted to increase the padding, and the flash goes down with it.
Do you have a solution for it?
example mml code:
<div class='chistaItem'
style='text-align:right;/*MARK-BY-CHISTA-PARSER*/direction:rtl;/*MARK-BY-CHISTA-PARSER*/'>
<span class='chistaText'>حال با توجه به رابطه <span class="chistaFormula"><math
xmlns="http://www.w3.org/1998/Math/MathML" display="inline-block">
<mi mathvariant="normal">۱</mi>
<mo>+</mo>
<msup>
<mrow>
<mi mathvariant="normal">c</mi>
<mi mathvariant="normal">o</mi>
<mi mathvariant="normal">t</mi>
</mrow>
<mrow>
<mi mathvariant="normal">۲</mi>
</mrow>
</msup>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mi mathvariant="normal">۱</mi>
</mrow>
<mrow>
<msup>
<mrow>
<mi mathvariant="normal">s</mi>
<mi mathvariant="normal">i</mi>
<mi mathvariant="normal">n</mi>
</mrow>
<mrow>
<mi mathvariant="normal">۲</mi>
</mrow>
</msup>
<mi>x</mi>
</mrow>
</mfrac>
</math></span> خواهیم داشت:</span>
</div>
MathJax used TeX spacing rules to lay out the mathematics, and there are parameters that control a number of aspects of that spacing. TeX uses a parameter called rule_thickness to determine both the thickness of the fraction line as well as the space above and below that line.
You can adjust that spacing using your MathJax configuration. For example
MathJax = {
startup: {
ready() {
MathJax.startup.defaultReady();
const param = MathJax.startup.document.outputJax.font.params;
params.rule_thickness = .125;
params.rule_factor = .75;
}
}
}
This sets the rule thickness to about twice the default value, and sets a second (MathJax-specific) parameter to a value that will thin out rule line while leaving the larger space above and below. Adjust these values to your liking.
I should point out that your MathML overcomplicated the "cot" and "sin" identifiers. The lines
<mi mathvariant="normal">c</mi>
<mi mathvariant="normal">o</mi>
<mi mathvariant="normal">t</mi>
should be just
<mi>cot</mi>
as that will be in the normal mathvariant automatically (as it has multiple characters), and properly indicate that the three letters are a single identifier (as opposed to the product of three separate identifiers, which is what your markup indicates). Similarly, "sin" should be <mi>sin</mi>, not three separate identifiers.
MathJax used TeX spacing rules to lay out the mathematics, and there are parameters that control a number of aspects of that spacing. TeX uses a parameter called
rule_thicknessto determine both the thickness of the fraction line as well as the space above and below that line.You can adjust that spacing using your MathJax configuration. For example
MathJax = { startup: { ready() { MathJax.startup.defaultReady(); const param = MathJax.startup.document.outputJax.font.params; params.rule_thickness = .125; params.rule_factor = .75; } } }This sets the rule thickness to about twice the default value, and sets a second (MathJax-specific) parameter to a value that will thin out rule line while leaving the larger space above and below. Adjust these values to your liking.
thanks a lot
According to the comment you sent me, everything turned out fine and perfect, but there is a small problem that no matter how hard I tried, the arrow mark falls below the line. It's worse in Linux, but relatively better in Windows.
browser: chrome
os: linux and windows
setting:
`(window.MathJax = {
options: {
enableMenu: !1,
},
loader: {
paths: {
"mathjax-fira": "https://cdn.chista.me/chista-mathjax-4.0.0-beta.4/mathjax-fira-font",
}
},
chtml: {
displayAlign: 'right',
scale: 1,
merrorInheritFont: !0,
matchFontHeight: false,
mtextFont: 'fontRegular, Noto Sans, sans-serif',
mtextInheritFont: false,
unknownFamily: 'fontRegular, Noto Sans, sans-serif',
font: 'mathjax-fira',
},
startup: {
ready() {
const { ChtmlMn: e } = MathJax._.output.chtml.Wrappers.mn;
e.prototype.remapChars = function (t) {
const a = [];
for (const e of t) {
const t = this.font.getRemappedChar("mn", e);
a.push(...(t ? this.unicodeChars(t, this.variant) : [e]));
}
return a;
};
const { FontData: n } = MathJax._.output.common.FontData,
o = n.defaultMnMap;
for (var s = 0; s < 10; s++) o[48 + s] = String.fromCodePoint(1776 + s);
const { CHTML } = MathJax._.output.chtml_ts;
Object.assign(CHTML.prototype, {
_unknownText: CHTML.prototype.unknownText,
unknownText(text, variant, width = null, rscale = 1) {
const node = this._unknownText(text, variant, width, rscale);
if (width !== null) {
this.adaptor.setStyle(node, 'width', this.fixed(width * this.math.metrics.scale * rscale) + 'em');
}
return node;
},
measureTextNode(textNode) {
const adaptor = this.adaptor;
const text = adaptor.clone(textNode);
adaptor.setStyle(text, 'font-family', adaptor.getStyle(text, 'font-family').replace(/MJXZERO, /g, ''));
const em = this.math.metrics.em;
const style = {
position: 'absolute', top: 0, left: 0,
'white-space': 'nowrap',
'font-size': this.fixed(em, 3) + 'px'
};
const node = this.html('mjx-measure-text', { style }, [text]);
adaptor.append(adaptor.parent(this.math.start.node), this.container);
adaptor.append(this.container, node);
let w = adaptor.nodeSize(text, em)[0];
adaptor.remove(this.container);
adaptor.remove(node);
return { w: w, h: .366, d: .187 };
}
});
const { MmlMath } = MathJax._.core.MmlTree.MmlNodes.math;
const { MmlMstyle } = MathJax._.core.MmlTree.MmlNodes.mstyle;
MmlMath.defaults.scriptsizemultiplier = MmlMstyle.defaults.scriptsizemultiplier = 1;
MathJax.startup.defaultReady();
const params = MathJax.startup.document.outputJax.font.params;
params.rule_thickness = .130;
params.rule_factor = .75;
},
},
});`
mml example:
<div class='chistaItem' style='text-align:left;justify-content:left;/*MARK-BY-CHISTA-PARSER*/;direction:rtl;/*MARK-BY-CHISTA-PARSER*/;'> <span class='chistaText'><span dir=rtl><span style='font-family:ChistaYekan'> </span> </span><span dir=ltr><span style='font-family:ChistaYekan'> </span> </span><span dir=rtl><span style='font-family:ChistaYekan'> </span><span style='font-family:ChistaYekan'> </span><span class='chistaFormula'><math xmlns='http://www.w3.org/1998/Math/MathML' display='inline' mathcolor='var(--midnight-blue)'> <mtext>تعداد انتخابها</mtext> <mo xmlns='http://www.w3.org/1998/Math/MathML'>⟶</mo> <mtext> </mtext> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mn>5</mn> </mrow> <mrow> <mtext> </mtext> <mn>1</mn> <mtext> یا </mtext> <mn>2</mn> <mtext> یا </mtext> <mn>3</mn> <mtext> یا </mtext> <mn>4</mn> <mtext> یا </mtext> <mn>5</mn> <mtext> یا</mtext> </mrow> </mfrac> <mtext> </mtext> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mn>5</mn> </mrow> <mrow /> </mfrac> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mo>…</mo> </mrow> <mrow /> </mfrac> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mn>3</mn> </mrow> <mrow /> </mfrac> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mo>…</mo> </mrow> <mrow /> </mfrac> <mtext> </mtext> <mover accent='false'> <mo>→</mo> <mrow> <mtext>اصل ضرب</mtext> </mrow> </mover> <mtext> </mtext> <mn xmlns='http://www.w3.org/1998/Math/MathML'>5</mn> <mo xmlns='http://www.w3.org/1998/Math/MathML'>×</mo> <mn xmlns='http://www.w3.org/1998/Math/MathML'>5</mn> <mo xmlns='http://www.w3.org/1998/Math/MathML'>!</mo> <mo xmlns='http://www.w3.org/1998/Math/MathML'>=</mo> <mn xmlns='http://www.w3.org/1998/Math/MathML'>600</mn> </math></span></span></span></div>
<div class='chistaItem' style='text-align:left;justify-content:left;/*MARK-BY-CHISTA-PARSER*/;direction:rtl;/*MARK-BY-CHISTA-PARSER*/;'> <span class='chistaText'><span class='chistaFormula'><math xmlns='http://www.w3.org/1998/Math/MathML' display='inline' mathcolor='var(--midnight-blue)'> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mfenced separators='|'> <mrow> <mfrac> <mrow> <mtext>۱</mtext> </mrow> <mrow> <msup> <mrow> <mi>s</mi> <mi>i</mi> <mi>n</mi> </mrow> <mrow> <mtext>۲</mtext> </mrow> </msup> <mi>x</mi> </mrow> </mfrac> </mrow> </mfenced> </mrow> <mrow> <mtext>۳</mtext> </mrow> </msup> <mo xmlns='http://www.w3.org/1998/Math/MathML'>-</mo> <mtext>۳</mtext> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۲</mtext> </mrow> </msup> <mi>x</mi> <mfenced xmlns='http://www.w3.org/1998/Math/MathML' separators='|'> <mrow> <mfrac> <mrow> <mtext>۱</mtext> </mrow> <mrow> <msup> <mrow> <mi>s</mi> <mi>i</mi> <mi>n</mi> </mrow> <mrow> <mtext>۲</mtext> </mrow> </msup> <mi>x</mi> </mrow> </mfrac> </mrow> </mfenced> <mo xmlns='http://www.w3.org/1998/Math/MathML'>=</mo> <mtext>۲</mtext> <mo xmlns='http://www.w3.org/1998/Math/MathML'>→</mo> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mfenced separators='|'> <mrow> <mtext>۱</mtext> <mo>+</mo> <msup> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۲</mtext> </mrow> </msup> <mi>x</mi> </mrow> </mfenced> </mrow> <mrow> <mtext>۳</mtext> </mrow> </msup> <mo xmlns='http://www.w3.org/1998/Math/MathML'>-</mo> <mtext>۳</mtext> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۲</mtext> </mrow> </msup> <mi>x</mi> <mfenced xmlns='http://www.w3.org/1998/Math/MathML' separators='|'> <mrow> <mtext>۱</mtext> <mo>+</mo> <msup> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۲</mtext> </mrow> </msup> <mi>x</mi> </mrow> </mfenced> <mo xmlns='http://www.w3.org/1998/Math/MathML'>=</mo> <mtext>۲</mtext> <mo xmlns='http://www.w3.org/1998/Math/MathML'>→</mo> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۶</mtext> </mrow> </msup> <mi>x</mi> <mo xmlns='http://www.w3.org/1998/Math/MathML'>+</mo> <mtext>۳</mtext> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </msup> <mi>x</mi> <mo xmlns='http://www.w3.org/1998/Math/MathML'>+</mo> <mtext>۳</mtext> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۲</mtext> </mrow> </msup> <mi>x</mi> <mo xmlns='http://www.w3.org/1998/Math/MathML'>+</mo> <mtext>۱</mtext> <mo xmlns='http://www.w3.org/1998/Math/MathML'>-</mo> <mtext>۳</mtext> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۲</mtext> </mrow> </msup> <mi>x</mi> <mo xmlns='http://www.w3.org/1998/Math/MathML'>-</mo> <mtext>۳</mtext> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </msup> <mi>x</mi> <mo xmlns='http://www.w3.org/1998/Math/MathML'>=</mo> <mtext>۲</mtext> <mo xmlns='http://www.w3.org/1998/Math/MathML'>→</mo> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۶</mtext> </mrow> </msup> <mi>x</mi> <mo xmlns='http://www.w3.org/1998/Math/MathML'>+</mo> <mtext>۱</mtext> <mo xmlns='http://www.w3.org/1998/Math/MathML'>=</mo> <mtext>۲</mtext> <mo xmlns='http://www.w3.org/1998/Math/MathML'>⇒</mo> <msup xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> </mrow> <mrow> <mtext>۶</mtext> </mrow> </msup> <mi>x</mi> <mo xmlns='http://www.w3.org/1998/Math/MathML'>=</mo> <mtext>۱</mtext> <mo xmlns='http://www.w3.org/1998/Math/MathML'>→</mo> <mfenced xmlns='http://www.w3.org/1998/Math/MathML' open='{' close='' separators='|'> <mrow> <mtable columnalign='left'> <mtr> <mtd> <mfenced open='' close='' separators='|'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> <mi>x</mi> <mo>=</mo> <mtext>۱</mtext> <mo>=</mo> <mi>c</mi> <mi>o</mi> <mi>t</mi> <mfrac> <mrow> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mo>→</mo> <mi>x</mi> <mo>=</mo> <mi>k</mi> <mi>π</mi> <mo>+</mo> <mfrac> <mrow> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mover> <mrow> <mo>→</mo> </mrow> <mrow> <mi>x</mi> <mo>∈</mo> <mo>[</mo> <mtext>۰</mtext> <mo>,</mo> <mtext>۲</mtext> <mi>π</mi> <mo>]</mo> </mrow> </mover> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mo>,</mo> <mfrac> <mrow> <mtext>۵</mtext> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> </mrow> </mfenced> </mtd> </mtr> <mtr> <mtd> <mfenced open='' close='' separators='|'> <mrow> <mi>c</mi> <mi>o</mi> <mi>t</mi> <mi>x</mi> <mo>=</mo> <mo>-</mo> <mtext>۱</mtext> <mo>=</mo> <mi>c</mi> <mi>o</mi> <mi>t</mi> <mfenced separators='|'> <mrow> <mo>-</mo> <mfrac> <mrow> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> </mrow> </mfenced> <mo>→</mo> <mi>x</mi> <mo>=</mo> <mi>k</mi> <mi>π</mi> <mo>-</mo> <mfrac> <mrow> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mover> <mrow> <mo>→</mo> </mrow> <mrow> <mi>x</mi> <mo>∈</mo> <mo>[</mo> <mtext>۰</mtext> <mo>,</mo> <mtext>۲</mtext> <mi>π</mi> <mo>]</mo> </mrow> </mover> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mtext>۳</mtext> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mo>,</mo> <mfrac> <mrow> <mtext>۷</mtext> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> </mrow> </mfenced> </mtd> </mtr> </mtable> </mrow> </mfenced> <mover xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mo>→</mo> </mrow> <mrow> <mtext>مجموع</mtext> <mtext> </mtext> <mtext>جواب</mtext> <mtext></mtext> <mtext>های</mtext> <mtext> </mtext> <mtext>معادله</mtext> </mrow> </mover> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mo xmlns='http://www.w3.org/1998/Math/MathML'>+</mo> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mtext>۵</mtext> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mo xmlns='http://www.w3.org/1998/Math/MathML'>+</mo> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mtext>۳</mtext> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mo xmlns='http://www.w3.org/1998/Math/MathML'>+</mo> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mtext>۷</mtext> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mo xmlns='http://www.w3.org/1998/Math/MathML'>=</mo> <mfrac xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <mtext>۱۶</mtext> <mi>π</mi> </mrow> <mrow> <mtext>۴</mtext> </mrow> </mfrac> <mo xmlns='http://www.w3.org/1998/Math/MathML'>=</mo> <mtext>۴</mtext> <mi>π</mi> </math></span></span></div>
The stretchy arrows are created using two separate parts: the arrow head, and a character for the rest of the arrow that is stretched and clipped to the needed size. Getting these to attach exactly turns out to be harder than it should be. Although both the extender and the head have the same height, because the extender is stretched using a transform, some browsers get its position wrong, even though there is no vertical transform involved. Chrome is particularly bad at this. The issue seems to be a round-off issue with deciding the vertical position when it's actual pixel position is determined, and the two get different rounding decisions.
The problem is highly dependent on the scaling and zoom level. If you zoom in or out, you probably will see the effect goes away at some (most) zoom levels, and at some levels it may even reverse which of the two parts is higher. Because of that, it is not possible to fix this by adjusting the position of the extender, as improving it at one scale will make it worse at other scales. And fixing it for one browser will break it for others.
That means you will probably have to live with the effect for now. This is a long-standing issue for which I have not been able to come up with a work-around that is reliable in all browsers and all scales. I continue to work on it, but don't currently have one.
Thank you very much, I hope you find the right solution
On Sat, Mar 2, 2024, 4:04 PM Davide P. Cervone @.***> wrote:
The stretchy arrows are created using two separate parts: the arrow head, and a character for the rest of the arrow that is stretched and clipped to the needed size. Getting these to attach exactly turns out to be harder than it should be. Although both the extender and the head have the same height, because the extender is stretched using a transform, some browsers get its position wrong, even though there is no vertical transform involved. Chrome is particularly bad at this. The issue seems to be a round-off issue with deciding the vertical position when it's actual pixel position is determined, and the two get different rounding decisions.
The problem is highly dependent on the scaling and zoom level. If you zoom in or out, you probably will see the effect goes away at some (most) zoom levels, and at some levels it may even reverse which of the two parts is higher. Because of that, it is not possible to fix this by adjusting the position of the extender, as improving it at once scale will make it worse at other scales. And fixing it for one browser will break it for others.
That means you will probably have to live with the effect for now. This is a long-standing issue for which I have not been able to come up with a work-around that is reliable in all browsers and all scales. I continue to work on it, but don't currently have one.
— Reply to this email directly, view it on GitHub https://github.com/mathjax/MathJax/issues/3185#issuecomment-1974785331, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACTMKKZL3NBSKVYODF2R7ODYWHBLXAVCNFSM6AAAAABDN5ADD2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZUG44DKMZTGE . You are receiving this because you modified the open/close state.Message ID: @.***>