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

Change size of mathml with mathjax #39

Open
chrisooo3 opened this issue Jul 6, 2022 · 1 comment
Open

Change size of mathml with mathjax #39

chrisooo3 opened this issue Jul 6, 2022 · 1 comment

Comments

@chrisooo3
Copy link

I have copied most of the code from your repo.
I have following code: fiddle

And following code for rendering mathml formulas:

    function convert() {
      var input = document.getElementById("input").value.trim();
      output = document.getElementById('output');
      output.innerHTML = '';
      output.appendChild(MathJax.mathml2svg(input, {scale: 150}));
    }

As you can see the scale is set 150. After changing it to for instance 300, nothing changes after rerendering the formula. Why? It should be bigger

Also when I change the line with MathJax to following:

output.appendChild(MathJax.mathml2svg(input, {em: 150, ex: 6}));

Nothing changes. Do you know why?

@dpvc
Copy link
Member

dpvc commented Jul 11, 2022

This is essentially a duplicate of mathjax/MathJax#2799:

Normally, MathJax's SVG output is placed inside a <mjx-container> element, and that element has a scaling factor that is designed to match the font size in the math to the surrounding font. The SVG (or CHTML) renderer needs to know that scaling factor in order to compensate for it when dimensions are given in absolute units (e.g., \hskip 1cm) or when switching back to native fonts for characters that aren't in the MathJax fonts (e.g., for \unicode{x0416}, or when mtextInheritFont is true, or for things like \style{font-family: Arial}{x}). The scale parameter tells the renderer what factor was used to scale the math to match the outside fonts so that that can be compensated for in those situations. It is not a scaling factor for the final result.

Note that SVG images are, by nature, scalable (SVG is Scalable Vector Graphics), so you can scale the SVG element after the fact. For example, if you want it to be twice as big, add font-size: 200% to the style attribute of the surrounding <mjx-container> element.

If you are discarding the container, then you would have to scale the width, height and vertical-align values yourself by hand. You could, of course, make your own wrapper for MathJax.tex2svg() that accepts a scaling factor and scales the width, height, and vertical-align of the result fo you.

Similarly, the em and ex values are used to tell MathJax how big an em and ex are in screen pixels so that it can convert units like px, cm, inch, etc. to its internal measurements. These do not affect the size of the image.

The width/height/vertical-align values for SVG images are given in terms of ex units so that the SVG should scale automatically to match the surrounding font. You can, of course, change those values to scale the SVG to whatever size you want.

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