Svg Size Rescaling

[k.ken]

Is it possible to have MathJax dynamically re-scale it's output to fit something like a display window. The reason I'm asking this is because some math expressions have more width that others for instance:

• \[\int_{a}^{b} sin^3(x)dx + 1/2(1+cos(2x)) + 13tan(x))\]
  
• \[\int_{a}^{b} sin^3(x)dx + 1/2(1+cos(2x)) + 23+ 13tan(x))+djddf\]

The first one can fit in my canvas but the second one doesn't. I have searched here in case someone asked a similar question and I found a link here and I tried to add large expression to see if it resizes but it doesn't. A screenshot of mt test is attached in this post. 

My main goal is for the expression to fit in the box but it overflows.

[Davide P. Cervone]

I can suggest two possible approaches.  One is described in

https://groups.google.com/d/topic/mathjax-users/ems8PNage-0/discussion

where I suggest a mechanism for scaling the math to fit the container, but it is not automatic.

Alternatively, you could use MathJax's automatic line-breaking to split the equation if it is too long.  See 

http://docs.mathjax.org/en/latest/output.html#automatic-line-breaking

for details.

Davide

<Screenshot from 2012-10-31 12:35:27.png>

[k.ken]

Thanks, I will try out line breaking.

[k.ken]

So I figured  out what I have to edit in order to get it working but I don't know how to access it. My output option is SVG and I need to get to a class named "MathJax_SVG" and change it's display from "inline-block" to nothing and then remove the width in the svg tag. Below is the <svg> tag I'm talking about. 

<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 57.658ex; height: 5.847ex; vertical-align: -2.217ex; margin: 1px 0px; " viewBox="0 -1595.283588884954 ...</svg>

I don't know how to access these attributes. Any ideas?

[Davide P. Cervone]

The example should work with any of MathJax's output renderers, including SVG.  It does for me.

If it is not working for you, what browser/OS are you using?  Also, is it the exact page in the discussion that isn't working, or your attempt to include it in your own page?

Davide

On Nov 4, 2012, at 9:32 PM, k.ken wrote:

Before I tried the first link you sent me, I noticed that resizing with an svg output format doesn't work. The math equation goes overflows. That's exactly what I trying to figure out how to stop from happening. Nevertheless, I tried the example and it didn't work. Maybe I'm doing something totally wrong. Any pointers on using the example with an svg output format? Between, I decided that using line breaks isn't really what I want.

On Wednesday, October 31, 2012 11:37:25 PM UTC-4, k.ken wrote:

[Davide P. Cervone]

That is not what you want to do, and you should not be making changes to MathJax's output yourself.  If doing this gets you the right size in this case, it is purely accidental.

Davide

[k.ken]

 <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          "HTML-CSS": {
            styles: {
              ".MathJax_Display": {
                width: null,
                position: null,
                display: "table"
              }
            }
          }
        });
        </script>

Isn't this making changes to the MathJax Configuration? I thought I could access it using a method like the one above. The example from the link you sent me works. I tried to modify it and use it on my page but it didn't work. 

[Davide P. Cervone]

Sorry for the long delay in getting back to you on this.  The end of the term really had me swamped.

On Nov 5, 2012, at 7:09 AM, k.ken wrote:

 <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          "HTML-CSS": {
            styles: {
              ".MathJax_Display": {
                width: null,
                position: null,
                display: "table"
              }
            }
          }
        });
        </script>

Isn't this making changes to the MathJax Configuration?

Yes, this makes change to the configuration (which you are allowed to do).  I was saying you should not hand edit the MathJax output (like removing the width from the SVG tag that MathJax creates. or changing the MathJax_SVG display style).  If you read the full post where you copied the code above, you will see that it was in response to the original poster's changing the HTML-CSS jax.js file directly, and I was telling him how he could get the corresponding effect without editing the core MathJax files themselves.  I also go on to say that I don't recommend making these changes at all, and end up providing a method that avoids making the change all together.

The example from the link you sent me works. I tried to modify it and use it on my page but it didn't work. 

Perhaps if you send us your modifications, we can see what is the matter?

Davide