Help using SVG Scale

[ren...@gmail.com]

Hello, I am new to MathJax.  My project is SVG as our default output, and we find the math rendered to be a little big too large.  We are trying to use the "scale" configuration, as referenced in this link.  It does not change the size of the rendered math at all.  I put together a jsfiddle example of my problem:

http://jsfiddle.net/mf7JN/10/

No matter what I do with the "scale", the size stays the same.

Can somebody explain to me what is going wrong?  I also tried using the font-size attribute like this link suggests, but it doesn't look like it actually scales the SVG when you do that, and the text loses some of its crispness.

Thanks,

Karen

[Peter Krautzberger]

This is fixed in the upcoming v2.1 release. Try calling  http://cdn.mathjax.org/mathjax/2.1-beta/MathJax.js instead  in the jsfiddle instead.

Peter.

[ren...@gmail.com]

That's good news!  It does indeed fix my jsfiddle implementation.  I will try downloading the beta...  Do we know when 2.1 will be released?

While we're on the subject, is there any way to use this to scale individual components (other than the font-size implementation)?

Thanks so much,

Karen

[Peter Krautzberger]

Dear Karen,

Sorry for not getting back sooner. As you probably saw, MathJax 2.1 has been released.

I'm not sure what you mean by scaling "individual components" -- do you mean something like subexpressions or some equations but not all at the same time?

Peter.

[serge.n...@gmail.com]

Hello,

Although the SVG scaling is declared to be fixed in 2.1, it seems that this fix does not work everywhere. For example, go here:

http://nesterko.com/lectures/stat221-2012/lecture10/#/6

In the contextual menu, math scaling works for HTML-CSS rendering, but does not work for SVG rendering. I'd much rather prefer SVG rendering because the presentation is faster with it. However, it does not work -- no matter what percentage I enter when using the contextual menu, it does not work.

Thanks.

Sergiy

[Peter Krautzberger]

Hi,

This isn't actually a MathJax problem. Your CSS sets the SVG font size to a fixed 15pt which MathJax successfully scales to. 

Changing the section

      svg {

font-family: "Georgia";

/* font-size: 15px;*/ 

font-style: normal;

font-variant: normal;

font-weight: normal;

text-rendering: "optimizeLegibility";

shape-rendering: default;

      } 

in the common.css should fix the issue in the slides.

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/groups/opt_out.
 
 

[Peter Krautzberger]

I can't actually reproduce this, so this may be browser/OS dependent -- which is not surprising. reveal.js does a lot of js/css magic. Current browser implementations aren't always reliable, and properly synchronizing it with MathJax makes it even trickier.

You might want to submit a report at https://github.com/hakimel/reveal.js; there are a couple of MathJax related ones already and Hakim seems open to supporting MathJax well. Let me know if you do and I'll keep an eye on the issue.

Peter.

On Sat, Mar 9, 2013 at 11:46 AM, <serge.n...@gmail.com> wrote:

Thank you Peter, this makes sense!

The CSS is now fixed and the SVG renderer works fine. However, there is another small bug. Go here:

http://nesterko.com/lectures/stat221-2012/lecture12/#/4

1. Render Math in SVG (font sizes should show up fine).

2. Then scale the whole page (command-"minus" on a Mac) to reduce overall scale.

3. Then flip the slide to the previous one by pressing "left arrow".

The math won't be centered, but rather start from the center of the slide. This can be fixed by scaling the page again, but this is not convenient.

This bug does not occur if the slides are navigated under 100% (full) page scale.

Thank you so much.

Sergiy

[Davide P. Cervone]

I am not able to reproduce the problem (it is centered for me in FF19, Chrome24, Opera12, but it is unexpectedly large in Safari6).

In any case, what you describe sounds characteristic of what happens when MathJax is run on an element that has CSS style display:none.  This may be part of how reveal.js does its transitions.  See the examples from my talk at

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

for some mechanisms for dealing with this issue.

Davide

[Peter Krautzberger]

See this issue on the reveal.js tracker for synchronizing MathJax https://github.com/hakimel/reveal.js/issues/226

Quote:

You can fix this by adding the following snippet below the Reveal.initialize call:

Reveal.addEventListener( 'slidechanged', function( event ) {
    MathJax.Hub.Rerender();
} );

[Peter Krautzberger]

Oops, we can do better than that:

    Reveal.addEventListener( 'slidechanged', function( event ) {

        MathJax.Hub.Rerender(event.currentSlide);

    });

is much more efficient.

[serge.n...@gmail.com]

Thanks for the pointers.

All these are to fix the fact that without re-rendering, MathJax does not display at all.

These fixes do not fix this issue of scaling the whole page and flipping the slide (described in my first message).

As an intermediate solution, I've decided to always keep page scale at 100% in lectures, and only change Scale Math in MathJax contextual menu. This effectively reduces the size of formulas and solves the problem for the lecture.

However, a mild inconvenience still remains.

I will post an issue on Reveal.js github and post a link to it here.

Thank you so much for the help.

Sergiy

ps. SVG rendering is *beautiful*!

[Peter Krautzberger]

Why not configure MathJax to scale the equations? http://docs.mathjax.org/en/latest/options/hub.html

[serge.n...@gmail.com]

This makes sense, but the scale I need varies based on the screen resolution that the slide is projected with.

On a computer display, 100% works well, and on some projectors with lower resolutions, 80% is better.

The question is now whether it's easier to go into MathJax contextual menu and change 100% to 80%, or press command-minus to scale the page down.

[Peter Krautzberger]

I don't quite understand what you're after. Is the MathJax rendering too large or is the entire reveal.js output too large? The mathax zoom will apply to the former, ctrl-plus/minus to the latter.  

[serge.n...@gmail.com]

Yes, that's correct.

So the only issue is that ctrl-plus/minus does not work well as then the MathJax output starts from the center of each slide when you press 'next slide' instread of being centered at the center.

Therefore, ctrl-plus/minus is not an option with Reveal.js + mathJax (at least on my browser).

This is not a huge issue as I can scale all math at the start of the lecture and achieve a similar effect to ctrl-minus.