Change size of mathml with mathjax
chrisooo3 opened this issue · 1 comments
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?
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 whenmtextInheritFont
is true, or for things like\style{font-family: Arial}{x}
). Thescale
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 thestyle
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.