How to make sure that font size does not increase

[kanlancb]

I have dynamic equation content coming from the backend.

Sometimes, it is just

"The equation you are solving for"
"$math content$"

and sometimes it is

$\text{Compare} ax^2+bx+c \text{is a working to} px^2+qx+d

Whats happening is the first one gets rendered fine but the second one gets its font increased everywhere and I have to render both 1 and 2 in the same page making the change look drastic.

Is there a way to force mathjax to not increase the font size?

[fast-reflexes]

Hi!

As always it's virtually impossible to help if you can't reproduce the problem minimal example which can be inspected. When you say "coming from the backend", do you mean that you use SSR (server-side rendering) or that you make an API call and receive the math content as a JSON?

I have never experienced the problem you're talking about but even with answers to the above question, I would need some working project or mock or SOMETHING where the problem is showing. But if you have an equation A which is then replaced with equation B, and the MathJax component has the dynamic flag set, then it should work as expected. Could be however that you're nesting it in a particular way which causes this problem...

Try to create a minimal reproduction or at least point me to some code.

[kanlancb]

Haha, sorry, will make a stackblitz repo and share.

Meanwhile, here is a screenshot of the issue

This is happening everywhere when there is an expression that has latex and doesnt have latex for example here as well

The mathjax code for these is that

...
 <MathJaxContext
                    config={mathjaxConfig}
                    hideUntilTypeset={"first"}
                    // version={2}
                    onLoad={() => {
                      setMathjaxLoaded(true);
                    }}
                  >
                    {stepJson[toggledMethod].map((item, index) => (
                      <AccordianComponent
                  
                        mathjaxConfig={mathjaxConfig}
...
                      ></AccordianComponent>
                    ))}
                  </MathJaxContext>

...

       <MathJax dynamic={true} hideUntilTypeset={"first"}>
                      <div className={styles.subStepDotTitleHolder}>
                        {/* <div className={styles.subStepDotTitleHolder1}> */}
                        <div className={styles.stepDot}></div>
                        {body_item[0].value.includes("data:image") ? (
                          getImageDimensions(body_item[0].value) && (
                            <div>
                              <NextImage
                                src={body_item[0].value}
                                width={imageDimensions[0]}
                                height={imageDimensions[1]}
                              ></NextImage>
                            </div>
                          )
                        ) : (
                          <div
                            className={styles.stepBodyContent}
                            dangerouslySetInnerHTML={{
                              __html: removeSpaces(
                                convertToLatex(
                                  fixFractionNewLineLatex(body_item[0].value)
                                )
                              ),
                            }}
                          ></div>
                        )}
                      </div>
                    </MathJax>

The ones after the dot are part of another accordian named subaccordians and the code looks like this

    <MathJax dynamic={true} hideUntilTypeset={"every"}>
                    <div
                      key={"subItem_" + "subItemBody_" + accordianIndex + index}
                      // style={{ transform: "translateY(20px)" }}
                    >
                      {item.value.includes("data:image") ? (
                        getImageDimensions(item.value) && (
                          <NextImage
                            src={item.value}
                            width={imageDimensions[0]}
                            height={imageDimensions[1]}
                          ></NextImage>
                        )
                      ) : (
                        <div
                          className={styles.stepBodyContent1}
                          key={"subItem_" + accordianIndex + index}
                          dangerouslySetInnerHTML={{
                            __html: removeSpaces(
                              convertToLatex(
                                fixFractionNewLineLatex(item.value)
                              )
                            ),
                          }}
                        ></div>
                      )}
     
                    </div>
                  </MathJax>

[kanlancb]

@fast-reflexes Does any solution come to mind, for this?

I thought of fixing it using when mathjax loads forefully reduce the font size this way

  useEffect(() => {
    // let mjxContainers = Array.from(document.getElementsByClassName("MathJax"));
    console.log("bloddy work damn it");
    const mjxContainersTitle = Array.from(
      document.getElementsByClassName("mathjax_solutionPage_title")
    );
    const mjxContainersGist = Array.from(
      document.getElementsByClassName("mathjax_solutionPage_gist")
    );

    const mjxContainersBody = Array.from(
      document.getElementsByClassName(styles.stepBodyContent)
    );
    const mjxContainersSubBody = Array.from(
      document.getElementsByClassName(styles.stepBodyContent1)
    );
    const mjxContainersSubBodyTitle = Array.from(
      document.getElementsByClassName("stepBodyContent1Title")
    );
    const allMjxContainersBody = mjxContainersBody.concat(
      mjxContainersSubBody,
      mjxContainersSubBodyTitle
    );

    mjxContainersTitle.map((el) => {
      let mjxElement = Array.from(el.children);
      if (mjxElement.length != 0) {
        mjxElement[0].style.fontSize = "18px";
      } else {
        el.style.fontSize = "18px";
      }
    });
    mjxContainersGist.map((el) => {
      let mjxElement = Array.from(el.children);
      if (mjxElement.length != 0) {
        mjxElement[0].style.fontSize = "22px";
      } else {
        el.style.fontSize = "22px";
      }
    });
    allMjxContainersBody.map((el) => {
      let mjxElement = Array.from(el.children);
      if (mjxElement.length != 0) {
        mjxElement[0].style.fontSize = "16px";
      } else {
        el.style.fontSize = "16px";
      }
    });
  }, [mathjaxLoaded]);

but either the call happens to soon, or somehow mathjax resets itself, it works for 60% of the time

[fast-reflexes]

A solution to this must be within reach and not as complicated as the above one.

Could you duplicate the page where this bug shows, and remove as much content as possible while making sure that this bug keeps showing. Then try to replace the imported components with their content and continue removing as much as you can until you can't remove anything else (but the bug is still visible). Then go to codesandbox.io and create a sandbox with the content so that I can see it in action.

[pkra]

MathJax will automatically (try to) match the ex-heights of its font and the surrounding font. I suspect it's working as expected, i.e., the ex-heights match. You could try comparing x and $x$. However, if the two fonts are just very different in design, then this ex-height match can be bad measure for visual perception.

In some cases (e.g., bad metadata in some google fonts, typesetting detached or hidden nodes) MathJax's ex-height detection can fail. In that case, you can try to adjust the exFactor configuration option, see http://docs.mathjax.org/en/latest/options/output/index.html.

[fast-reflexes]

Thanks for input @pkra ! Have you been able to reproduce the issue in a way where it can be inspected @kanlancb ?