Search code examples
right-to-leftmathjax

Scaling in MathJax with respect to text direction

I'm working on a site which is in Arabic (default text direction is "right to left") and I'm using "Noto Naskh Arabic" font for arabic text and Latin-Modern for latin text which I'm definig by the following css code: 

*[dir="ltr"] {
        font-size: 20px !important;
        font-family:"Latin-Modern";
}

Users may need to enter mathematical equations and I'm using 'Mathjax' for this purpose, the problem is that:

  1. Fractions are displayed without the horizontal line

  2. Equations are displayed with different sizes between arabic and latin paragraph as when I write

    some text in english here $\int f(x)dx $

I have come to a slution to the first problem using css

span:lang(ar).MathJax { 
    direction: ltr !important;  
    font-family:"Latin-Modern";
    }

For the second problem, I need to know if there is a way to automatically specify scale separately for equation which are embedded in Arabic paragraph end those embedded in English paragraph.

Solution

  • It seems like the main issue is that you have to scale in the first place. I'm guessing you did that because MathJax is rendering too large in RTL contexts.

    It looks like MathJax is having issues detecting the correct ex-height of the surrounding font. That can be caused by various problems, from fonts not having a correct ex-height to bad CSS interactions; from a quick test it's not the fonts.

    As a workaround you can disable font matching in the MathJax configuration

    MathJax.Hub.Config({
     "HTML-CSS": {matchFontHeight: false},
     SVG: {matchFontHeight: false},
     CommonHTML: {matchFontHeight: false}
});

    You should then also disable the scaling you applied.