Resizing mathjax: rendering as Text or Images?

[Matt Hughes]

I've noticed that sometimes the same math renders as text elements on one browser, and images on another browser. That is, if I drill down the DOM of a mathjax result, I will sometimes encounter the string "x", and other times I will find an image of the letter "x" hosted on mathjax.org. 

This is causing problems for me when I want to resize the result of a mathjax rendering. When the result is pure text, I can scale things simply by increasing the font size. However, when I do the same when the result is rendered in images, all I can do is space the images out farther.

What decides if mathjax renders as images or text? Is there a way to manually specify whether the mathjax result should be rendered as text or not?

[Davide P. Cervone]

> I've noticed that sometimes the same math renders as text elements
> on one browser, and images on another browser. That is, if I drill
> down the DOM of a mathjax result, I will sometimes encounter the
> string "x", and other times I will find an image of the letter "x"
> hosted on mathjax.org.

There are very few reasons that MathJax will use the image fonts at
this point. The most important are listed at

http://www.mathjax.org/resources/faqs/#image-fonts

but most only apply if you are using local files (i.e., file:// URL's
rather than http:// URL's). The other reason would be if MathJax
times out waiting for one of its fonts to arrive. You can tell by
entering

javascript:alert(MathJax.Message.Log())

into the URL location type-in area (and pressing RETURN), and checking
if there is a message about switching to image fonts. That can happen
in particular if your network connection is relatively slow.

Because the latter was causing MathJax v1.1 to switch to image fonts
too often, in v2.0, the timeout was lengthened somewhat, and MathJax
will switch only if the FIRST font fails to arrive (if it succeeds in
obtaining one font, it assumes it can get the rest). So if you are
using v1.1, switching to v2.0 might improve the situation for you.

> This is causing problems for me when I want to resize the result of
> a mathjax rendering. When the result is pure text, I can scale
> things simply by increasing the font size. However, when I do the
> same when the result is rendered in images, all I can do is space
> the images out farther.

Changing the font-size attribute works better in some browsers that in
others, so I recommend re-rendering the math if you change the size of
the surrounding text. That will also resolve the problem you have if
image fonts are in use, as they will be chosen to fit the new text
size. You can use

MathJax.Hub.Queue(["Rerender",MathJax.Hub]);

to re-render the math on the page, or use

MathJax.Hub.Queue(["Rerender",MathJax.Hub,element]);

to re-render only the math in the given container element.

> What decides if mathjax renders as images or text?

Except for some local-file situations with Firefox and IE, MathJax
will try to use regular fonts and switch it image fonts only if they
don't arrive after a certain timeout.

> Is there a way to manually specify whether the mathjax result should
> be rendered as text or not?

Well, you can disable the image fonts by adding

"HTML-CSS": { imageFont: null }

to your configuration, but I don't recommend it for this situation.
Re-rendering after the size change should work better. See my post at

https://groups.google.com/d/msg/mathjax-users/ems8PNage-0/0qfIALkNTOcJ

for an example.

Davide

[Matt Hughes]

Thanks Davide. I think that might be the most helpful and comprehensive reply I've ever gotten on the internet.

[aRbEr]

Davide rocks :)

[Davide P. Cervone]

Thanks, guys!  You are too kind.  I'm glad that my responses have been helpful to you.

Davide