mathjax / MathJax-node

MathJax for Node
Apache License 2.0
609 stars 96 forks source link

In nodejs environment, I convert latex to SVG, and the fraction is scaled, but my rendering on the browser is normal #452

Open lyxabymxlc opened 4 years ago

lyxabymxlc commented 4 years ago

I try to use mathjax to convert latex to svg. This is the case in nodejs image It's found that 8/5 is scaled, It's hard for the customer to see clearly But I use mathjax to convert latex to SVG on the browser, which is normal, as follows image It makes me wonder. By comparing the SVG information, I found that in the nodejs environment, the SVG > Path tag has an extra attribute of "transform =" scale (0.707) " image This scaling operation will make the user think it is a bug In nodejs environment, what can I do to get the same rendering effect as on the browser?

dpvc commented 4 years ago

The difference in output appears to be the difference between in-line math and display math. For in-line, fractions are reduced in size, and other adjustments are made in order to reduce the height of the math so as not to disrupt the spacing between lines any more than necessary.

You don't give the code you used to do the conversion in node, but I suspect you have not indicated that the math is display math. If you are using MathJax.tex2svg() or MathJax.tex2svgPromise(), then you can pass a second parameter that tell MathJax that you want display-style rendering:

const sag = MathJax.tex2svg(math, {display: true});

where math is a variable containing the TeX string to be processed.

lyxabymxlc commented 4 years ago

The difference in output appears to be the difference between in-line math and display math. For in-line, fractions are reduced in size, and other adjustments are made in order to reduce the height of the math so as not to disrupt the spacing between lines any more than necessary.

You don't give the code you used to do the conversion in node, but I suspect you have not indicated that the math is display math. If you are using MathJax.tex2svg() or MathJax.tex2svgPromise(), then you can pass a second parameter that tell MathJax that you want display-style rendering:

const sag = MathJax.tex2svg(math, {display: true});

where math is a variable containing the TeX string to be processed.

You are right, This is my previous configuration

mjAPI.config({
    extensions: 'MathML/content-mathml.js,TeX/mediawiki-texvc.js,[ext]/text-macros.js',
    paths: {
        'ext': path.resolve(__dirname, '../','ext/')
    },
    MathJax: {
        SVG: {
            linebreaks: {
                automatic: true
            }
        }
    }
});
    let mjConf = { //转换参数配置
        math: '\frac{85}{10}=',
        format: "inline-TeX", // or "inline-TeX", "MathML"
        svg: true,      // or svg:true, or html:true
        speakText: false, //不生成title
        useFontCache: false
        width: 60,
        linebreaks: true //允许断行
    };
    let data = await mjAPI.typeset(mjConf);

According to your suggestion, I will change format: "inline-Tex" to format: "Tex", which is now rendered correctly. I have another question. I want to control the maximum width of 800px when font size: 25px is used for SVG of ultra long latex. So I set width: 60, linebreaks: true, it can break lines automatically, but sometimes it will break lines automatically within 700px. Is this correct?

dpvc commented 4 years ago

I set width: 60, linebreaks: true, it can break lines automatically, but sometimes it will break lines automatically within 700px. Is this correct?

The width is given in ex units, so the actual screen size will depend on the ex-height of the font that surrounds the math. The 25px gives the em-size, but the ex-height can be any portion of that, depending on the design of the font. In general, the ex-height is generally around 1/2 the em size, but it varies by font. So the width on screen in pixels that corresponds to width: 60 will depend on the font in use.

Since this is a question about mathjax-node rather then mathjax itself, I'm going to transfer this issue to the mathjax-node repository.

lyxabymxlc commented 4 years ago

I see. Thank you.

lyxabymxlc commented 4 years ago

@dpvc Hello, after I used the format: "Tex" configuration, the SVG is displayed in the center after breaking the line. Can I control its left alignment, which looks very unfriendly. image This is latex:$$1+2+3+4+5+6+7+8+9+8+7+6+5+4+3+2+1=$$ I hope the SVG image can be left aligned after line breaking. What should I do?

dpvc commented 4 years ago

Add

    displayAlign: 'left'

to the MathJax block of you configuration and that should do it.

Also, since this is a new question, unrelated to your original one, you should start a new issue for it rather than reopen a closed issue.