mathjax / MathJax

Beautiful and accessible math in all browsers
http://www.mathjax.org/
Apache License 2.0
10.21k stars 1.16k forks source link

Parentheses are not displayed correctly #3237

Open saraOrkide opened 5 months ago

saraOrkide commented 5 months ago

Hello good time I have a problem in displaying Parentheses, As you can see in the picture, the second parenthesis has extended itself, but the first parenthesis has not done so. What can I do so that the second parenthesis does not extend, and if there is no way for it, the first parenthesis should be the same size as the second parenthesis. Screenshot from 2024-06-02 11-35-05

using mathjax: mathjax-4.0.0-beta.4 , mml-chtml.js settings:

window.MathJax = {
            options: {
                enableMenu: !1,
            },
            loader: {
                paths: {
                    "mathjax-fira": "https://chistacdn.com/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',
            },
            mml: {
                allowHtmlInTokenNodes: true
              },

            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) + '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: .6, d: .2 };
                        }
                    });
                    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;
                    params.sub1 = .6;
                },
            },
        }

mml code:

<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='#050038'>    <msup>     <mrow>      <mtext>       A      </mtext>     </mrow>     <mrow>      <mtext>       n      </mtext>     </mrow>    </msup><mo>     =    </mo><mfenced open='[' close=']' separators='|'>     <mrow>      <mtable>       <mtr>        <mtd>         <msup>          <mrow>           <msub>            <mrow>             <mo>              (             </mo>             <mtext>              a             </mtext>            </mrow>            <mrow>             <mn>              11             </mn>            </mrow>           </msub>           <mo>            )           </mo>          </mrow>          <mrow>           <mtext>            n           </mtext>          </mrow>         </msup>        </mtd>        <mtd>         <mn>          0         </mn>        </mtd>        <mtd>         <mn>          0         </mn>        </mtd>       </mtr>       <mtr>        <mtd>         <mn>          0         </mn>        </mtd>        <mtd>         <msup>          <mrow>           <msub>            <mrow>             <mo>              (             </mo>             <mtext>              a             </mtext>            </mrow>            <mrow>             <mn>              22             </mn>            </mrow>           </msub>           <mo>            )           </mo>          </mrow>          <mrow>           <mtext>            n           </mtext>          </mrow>         </msup>        </mtd>        <mtd>         <mn>          0         </mn>        </mtd>       </mtr>       <mtr>        <mtd>         <mn>          0         </mn>        </mtd>        <mtd>         <mn>          0         </mn>        </mtd>        <mtd>         <msup>          <mrow>           <msub>            <mrow>             <mo>              (             </mo>             <mtext>              a             </mtext>            </mrow>            <mrow>             <mn>              33             </mn>            </mrow>           </msub>           <mo>            )           </mo>          </mrow>          <mrow>           <mtext>            n           </mtext>          </mrow>         </msup>        </mtd>       </mtr>      </mtable>     </mrow>    </mfenced>   </math></span></span></div>
dpvc commented 5 months ago

The output is correct for your MathML. Remember that a parenthesis with stretch to the size of the largest item in the mrow (explicit or implied) that contains the parenthesis. To make sure parentheses are the same size, they should be in the same mrow. That is not the case for your expression. For example, the first cell of your mtable contains

            <msup>
              <mrow>
                <msub>
                  <mrow>
                    <mo>(</mo>
                    <mtext>a</mtext>
                  </mrow>
                  <mrow>
                    <mn>11</mn>
                  </mrow>
                </msub>
                <mo>)</mo>
              </mrow>
              <mrow>
                <mtext>n</mtext>
              </mrow>
            </msup>

Note that the open and close parentheses are not at the same nesting level. The open parenthesis is inside an mrow inside the msub, while the close parenthesis is two levels higher in the mrow for the msup. You should move the <mo>(</mo> to be outside the msub element.

            <msup>
              <mrow>
                <mo>(</mo>
                <msub>
                  <mrow>
                    <mtext>a</mtext>
                  </mrow>
                  <mrow>
                    <mn>11</mn>
                  </mrow>
                </msub>
                <mo>)</mo>
              </mrow>
              <mrow>
                <mtext>n</mtext>
              </mrow>
            </msup>

This will guarantee they both stretch to the same size. It is also more semantically correct. Your original indicates that the (a has a subscript, whereas only the a should. (Also, the subscript should really be <mn>1</mn><mn>1</mn>, not <mn>11</mn> as the subscript consists of two separate 1s for the row and column, not the single number 11 as your MathML indicates, but that is a separate issue.)

The change I suggest above will make both parentheses stretch to cover the subscripted a, but if you don't want the parentheses to stretch, use <mo stretchy="false">(</mo> and <mo stretchy="false">)</mo> instead.

dpvc commented 5 months ago

PS, this is essentially the same issue you have had at least three times before, where you don't seem to understand the MathML rules for stretchy characters. I encourage you to view the MathML specification to familiarize yourself with those rules. I am going to stop writing detailed answers for these, and simply refer you to my previous ones and the specification in the future.

saraOrkide commented 5 months ago

Oh yes I understand and my apologies also thank you very much