Scaling MathML to its container

[Richard Saethang]

Hello,

I'm working on having MATHML render within a fixed container width, however, long equations go past the box while others are a little short. Ideally, I'd like the mathml to 'scale' to the container's width.

From this example, 

http://codepen.io/anon/pen/goAdF

You can see I have a container div that is 500px that contains the equation in mathml.  Sometimes the equation fits the container a little short and sometimes it extends past the container. Is there any way or config setting to tell mathjax to scale to fit whatever mathml equation will be inside the container to fit the width of the container so it uses as of the containers real estate and only scales that wide regardless of how long the equation will be?

From the documentation, I set scale at 100 and tried using linebreaks 

{ linebreaks: { automatic: true, width: "100% .container" } },

I wasn't sure by the documentation if you just write 'container' or the id or classname associated with the container (I tried all 3).

Is there a way to make this possible or is my syntax off? I've included my config settings below:

MathJax.Hub.Config({

   messageStyle: "none",

   scale: 100,

   "HTML-CSS": {

       showMathMenu: false,

          { linebreaks: { automatic: true, width: "100% .container" } },

       preferredFont: "STIX",

       availableFonts: ["STIX","TeX"]

   },

   SVG: { linebreaks: { automatic: true, width: "100% .container" } }

});

MathJax.Hub.Configured();

Any help/tips/config settings would be welcome and appreciated. 

Thanks in advance.

[Peter Krautzberger]

Hi,

Thanks for posting this here, too.

A quick search gives me this discussion. Is that what you're after? There's no easier way because there's no way of knowing how large the equation is until it is laid out.

If you want to go for linebreaking, then you're on the right track. Drop the . in front of container (the 100% isn't needed if you want 100%; just "container" suffices). This is not a class name, it just tells MathJax to detect the parent. Also, you had some erroneous {} in the configuration block which prevented MathJax from running. I've forked it at http://codepen.io/anon/pen/zfCbv

Keep in mind that you might still see spilling if it's beyond the abilities of the line-breaking algorithm. Since MathML is two dimensional, it's hard to linebreak, in particular tabular content. Bug reports are always welcome.

Hope this helps,

Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Davide P. Cervone]

There is also an example at

http://www.math.union.edu/~dpvc/talks/2013-01-12.jmm/dynamic-V.html

from a talk I gave at the Joint Math Meetings in 2013.  The slide that is two after this one linked here shows the code used.

Note that the line breaking width parameter is only about line breaking.  It will not cause the equation to be scaled to match a particular width.

Davide