Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MathJax dosen't float well with reveal.js #226

Closed
changhw01 opened this issue Nov 5, 2012 · 19 comments
Closed

MathJax dosen't float well with reveal.js #226

changhw01 opened this issue Nov 5, 2012 · 19 comments

Comments

@changhw01
Copy link

changhw01 commented Nov 5, 2012

Please see "www.stanford.edu/~huangwei/MySlides" and navigate to the next page.

It happens when I use the HTML-CSS output of MathJax. If we use the SVG output then it is fine. I have tried it using FireFox and Chrom.

@lucasb-eyer
Copy link

lucasb-eyer commented Nov 7, 2012

Same problem in Safari.

Interestingly, it only fails when transitioning to the slide. If you load the page at the slide number (press F5), it displays well.

@changhw01
Copy link
Author

changhw01 commented Nov 7, 2012

@lucasb-eyer Yes, indeed.

@hakimel
Copy link
Owner

hakimel commented Nov 11, 2012

Seems like MathJax is struggling to position itself correctly, probably a conflict with all of transforms that happen in reveal.js. You can fix this by adding the following snippet below the Reveal.initialize call:

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

@hakimel hakimel closed this as completed Nov 11, 2012
@lucasb-eyer
Copy link

lucasb-eyer commented Nov 11, 2012

Thanks for looking into it!

Could you add a sentence about it in the readme, section "Slide change event"?
Something like "Some libraries, like MathJax (See #226), get confused by the transforms. Often times, this can be fixed by calling their update or render function from this callback." would suffice.

hakimel added a commit that referenced this issue Nov 12, 2012
@hakimel
Copy link
Owner

hakimel commented Nov 12, 2012

Good idea, I've added this to the readme.

@damianavila
Copy link

damianavila commented Nov 27, 2012

Hakimel, I follow the note... when I go forward in two consecutive slides containing mathjax there is no problem, but when I comeback, it crushes... any idea?

@damianavila
Copy link

damianavila commented Nov 27, 2012

FYI, the crush happens only with some themes such as default, but no with linear, cube or zoom... Regards

@hakimel
Copy link
Owner

hakimel commented Nov 27, 2012

Hey, not sure why that would happen but I imagine it might just be a local issue. Can you try restarting the browser, or even a different browser to see if it's the same there?

@xhochy
Copy link

xhochy commented Dec 5, 2012

JFTR: Updating only the formulas on the current slides improves performane quite a lot if you have a large amount of formulas:

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

@damianavila
Copy link

damianavila commented Dec 5, 2012

El 05/12/12 09:47, Uwe L. Korn escribió:

JFTR: Updating only the formulas on the current slides improves
performane quite a lot if you have a large amount of formulas:

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


Reply to this email directly or view it on GitHub
#226 (comment).

Thanks for the tip...

@damianavila
Copy link

damianavila commented Dec 5, 2012

Hakimel, in FIrefox there is no problem... but in Chrome it crush...

@drvinceknight
Copy link

drvinceknight commented Dec 7, 2012

I'm only just discovering reveal.js but the mathjax thing is not great... I've got the code suggested by xhochy but now my slides move ever so slightly as the mathjax re-renders... I'm not offering any help (I don't really understand a lot of this) but just letting you know that it's not ideal...

@drvinceknight
Copy link

drvinceknight commented Dec 7, 2012

Just reread the start of this threat and seen that I can output to SVG. This seems to work slightly better (still a slight budge when the page loads). Is there any reason to choose SVG over HTML-CSS or vice-versa? (I realise that this is not the right place to ask, apologies).

@cryos
Copy link

cryos commented Sep 15, 2013

Still not a great experience out of the box, but switching to SVG reduces rendering issues (although the equations don't look great with all themes).

enovajuan pushed a commit to enovajuan/reveal.js that referenced this issue Dec 2, 2014
@jasen0319
Copy link

jasen0319 commented Mar 3, 2015

Read and learn

@XertroV
Copy link
Sponsor

XertroV commented Oct 28, 2021

I found rerendering mathjax on the current and next/prev slide to be a bit buggy (like it confuses auto-animate and sometimes there's ~200ms where the mathjax elements disappear and reappear).

What seemed to work best is rerendering 2 slides away (nextnext and prevprev slides). This also plays nicely with the default viewDistance of 3.

Snippets:

function rerenderIfFlagged(el: Element) {
    if (el.attributes.getNamedItem('x-rerender-math')) {
        //@ts-ignore
        MathJax.Hub.Rerender(el)
    }
}

export function revealOnChangeListener(event: RevealOnChangeEvent) {
    const slast = state.last
    const scurr = {indexh: event.indexh, indexv: event.indexv}
    state.last = some(scurr)

    const hdiff = isSome(slast) ? scurr.indexh - slast.value.indexh : 0
    const direction = hdiff >= 0 ? "forward" : "backwards"

    const currSlide = event.currentSlide
    const prevSlide = currSlide.previousElementSibling
    const prevPrevSlide = prevSlide?.previousElementSibling
    const nextSlide = currSlide.nextElementSibling
    const nextNextSlide = nextSlide?.nextElementSibling
    //@ts-ignore
    if (typeof MathJax != "undefined") {
        [...(prevPrevSlide ? [prevPrevSlide] : []), ...(nextNextSlide ? [nextNextSlide] : [])].forEach(rerenderIfFlagged)
        // if we jump multiple slides, redo all the mathjax
        if (Math.abs(hdiff) > 1) {
            rerenderIfFlagged(currSlide)
            nextSlide && rerenderIfFlagged(nextSlide)
            prevSlide && rerenderIfFlagged(prevSlide)
        }
    }
}

@hakimel
Copy link
Owner

hakimel commented Nov 12, 2021

@XertroV If there are issues I'd to address it in the math plugin. Do you have an example where math rendering is causing issues? I tried a few combinations of math and auto-animate but it worked as intended.

@XertroV
Copy link
Sponsor

XertroV commented Nov 12, 2021

@XertroV If there are issues I'd to address it in the math plugin. Do you have an example where math rendering is causing issues? I tried a few combinations of math and auto-animate but it worked as intended.

I'm currently using mathjax3 via master (looks like this was just released) and it's amazing -- much faster, don't need any custom logic around redrawing (I use xyjax which needed some massaging with mathjax2), and I've been able to disable all the rerendering stuff. (there are very occasional glitches, but they're tolerable and rerendering doesn't always fix them anyway.)

WRT examples, I can't provide any, sorry (code isn't public atm). But IMO mathjax3 with the new math plugin solves any substantial issues I had.

There are very occasional font-size related glitches I get when using some math across multiple consecutive slides (this happened with mathjax2, also). The font size jumps slightly when auto-animating. I can't reproduce them though -- I don't know how to trigger them in a reliable way. If you're trying to reproduce, try using a lot of $\mathbb{A}$ (or B, C, etc) inline elements (e.g. in paragraphs, headings). Autoanimating between 3-8 slides.

I made my previous comment with the goal of sharing the code (in case anyone went looking for a soln). Rereading it, I didn't make it clear that my circumstances weren't typical. I mention xyjax above, but the deck also has about 250 slides, and plenty of mathjax sprinkled throughout (mb on 25% of slides, and multiple elements/fragments per slide where they appear).

PS. Thanks for a fantastic framework! :)

@hakimel
Copy link
Owner

hakimel commented Nov 12, 2021

Thanks a lot for the info.

Great to hear the new MathJax 3 renderer solved many of the issues for you! That makes me wish that I'd have gone with that over MathJax 2 as the default in today's 4.2.0 release. I'll likely switch to MathJax 3 in the next release instead. If you or anyone else knows of any major differences or reasons we should't default to v3 please let me know.

For the record, if anyone else encounters this and wants to switch to MathJax 3 you'll need to swap out RevealMath for RevealMath.MathJax3 in your initialization:

Reveal.initialize({
  mathjax3: {
    // config options
  },

  plugins: [ RevealMath.MathJax3 ]
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants