mathjax / MathJax-demos-web

A repository with examples using mathjax-v3
https://mathjax.github.io/MathJax-demos-web
Apache License 2.0
252 stars 106 forks source link

Change size of mathml with mathjax #39

Open chrisooo3 opened 2 years ago

chrisooo3 commented 2 years ago

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 commented 2 years ago

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.