Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 this issue Nov 21, 2019 · 6 comments

Comments

@lyxabymxlc
Copy link

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
Copy link
Member

dpvc commented Nov 21, 2019

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
Copy link
Author

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
Copy link
Member

dpvc commented Nov 22, 2019

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.

@dpvc dpvc transferred this issue from mathjax/MathJax Nov 22, 2019
@lyxabymxlc
Copy link
Author

I see. Thank you.

@lyxabymxlc lyxabymxlc reopened this Dec 5, 2019
@lyxabymxlc
Copy link
Author

lyxabymxlc commented Dec 5, 2019

@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
Copy link
Member

dpvc commented Dec 5, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants