Make MathJax seamlessly switch out the old math with the new (during rerendering)?

91 views
Skip to first unread message

nikolaj...@gmail.com

unread,
Feb 5, 2016, 1:21:56 PM2/5/16
to MathJax Users
Hi

I'm using automatic line-breaking. In order to support a responsive layout I need to call MathJax.Hub.Queue(['Rerender', MathJax.Hub]); every time the container changes its size. If the user has scrolled down on the page when a rerender is executed, then the text jumps around, and sometimes you'll even end up somewhere else on the page after rendering has finished.

Is there any way to make MathJax seamlessly switch out the old math with the new (without quick jumps)? :)

Thank!

- Nikolaj

David Farmer

unread,
Feb 5, 2016, 1:40:04 PM2/5/16
to MathJax Users

If you follow a link to the middle of a page, the jumping
around happens while MathJax renders. This is known behavior
and the re-rendering which happens on your page sounds like
part of the same issue.

I like scrolling for long formulas: the formula is displayed
the way the author intended, and people viewing on a phone
seem to like it. So maybe you don't need to Rerender?

Regards,

David
> --
> 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.
>
>

nikolaj...@gmail.com

unread,
Feb 5, 2016, 1:50:44 PM2/5/16
to MathJax Users
Thanks for your input! :) Well, here's the problem: Let's say that the math is originally rendered in a page of width 800px (and line-breaks are made accordingly). If the page is resized to a smaller width, say 400px, then the expressions would potentially overflow the container. Therefore I think the rerendering is necessary.

It seems acceptable that the text jumps around, when math is processed for the first time (since MathJax doesn't have a clue about its dimensions). When rerendering it would however be fair to assume that the resulting math wouldn't change its dimensions drastically. Couldn't MathJax just leave the old math and then seamlessly swap it out when the new math is ready (and thereby only reflow when necessary)?:)

- Nikolaj

David Farmer

unread,
Feb 5, 2016, 2:08:16 PM2/5/16
to MathJax Users

Here is a page with a responsive layout, where the formulas
are the same size for all layouts. You have to scroll sideways
to see the wide formula in the proof of Theorem 2.1:

http://sl2x.aimath.org/sample/farmer1/section4.html#subsection4-3

I'd like to hear how you think it looks as you resize, and
also if you think the layout is usable when the width is small.

As to your specific suggestion: the people doing the coding for MathJax
are amazing, so presumably they could figure out some way to not
re-render those equations which end up the same. Or maybe they
could put in some placeholders with the size of the original
rendering, so that the re-render either makes everything smaller
or everything bigger (so the motion is in one direction instead
of jumping around, which maybe would look smoother). I have never
actually used Rerender, so for me such changes would be low
priority.

Murray

unread,
Feb 6, 2016, 10:03:18 PM2/6/16
to MathJax Users
David

I visited your page on iPad and thought I would share the experience.

I was first in landscape mode and your wide equation spilled off the screen. A horizontal swipe to the left moved the whole #content div to the left, so I could see the whole thing.

Then I changed to portrait mode. The right hand part of the equation disappeared and swiping the page (not the equation) didn't do anything.


At this stage I wasn't aware you could swipe the equation itself. That only became clear when I opened the page on my phone and (by accident) swiped the equation, then I could see what you meant.

On a desktop, a horizontal scroll bar appears (if the screen is narrow - around 800px) to alert the user about the scroll possibility, but on mobile devices, without a visual indication, a lot of people won't know to scroll. Usability testing shows users are unwilling (or unaware) of horizontal scrolling: https://www.nngroup.com/articles/horizontal-scrolling.

For Nikolaj's case, one possible solution is to use inline mode and to break the equation (at "nice" points like equal signs, plus, minus, etc) so the only thing that happens on device rotation is movement of the parts within the container - no need to rerender. It sounds messy and is not using MathJax's line-breaking, but does work.

Another trick to avoid being shown the wrong part of the page after device rotation could be to keep track of the view using javascript (e.g. the DIV id and how many <p>'s down), then scroll to that place after rerender. Most mobile browsers do that for us, of course...

Regards
Murray

David Farmer

unread,
Feb 8, 2016, 6:00:58 AM2/8/16
to MathJax Users

Dear Murray,

Thank you for your comments. The thing that surprised me most is that
you said you don't see a horizontal scroll bar on the long equation.
On my laptop in chrome, firefox, or safari I see the scrollbar
(when I make it narrow, like on a phone), so I assumed smart phones
would do the same.

I took the weekend to think about about it, and I am going to stick
with the long equations. I'll explain my reasoning.

The main point is that you potentially lose a lot of information
if you rearrange the equation, or at least it makes it a lot
harder for the reader to parse. This is particularly bad when
the equation is already multi-line.

So I thought more about the usability issue and the points made
in the article you referenced. I don't think the situation of a
long equation running off the page is comparable to site navigation
that uses a sideways swipe. I address the three recommendations
from that article: 1. Swiping is not primary navigation: it is just
to look at one equation, and is comparable to moving around a large
image to see the details. 2. Users do not have to guess how much
content is left: the swipe it just to see the rest of that specific
equation. 3. There is an obvious visual clue: you see the equation
running off the edge of the screen.

I realize that 3rd point would be stronger if there was also a
visible horizontal scroll bar.

My use case is math research papers and textbooks. The alternative
is PDF, which is terrible on a smart phone, and I am okay with
there being a small learning curve for the user to learn how to
navigate the long equations.

Regards,

David


On Sat, 6 Feb 2016, Murray wrote:

> David
> I visited your page on iPad and thought I would share the experience.
>
> I was first in landscape mode and your wide equation spilled off the screen. A
> horizontal swipe to the left moved the whole #content div to the left, so I could see
> the whole thing.
>
> Then I changed to portrait mode. The right hand part of the equation disappeared and
> swiping the page (not the equation) didn't do anything.
>
> [equation.PNG]

Peter Krautzberger

unread,
Feb 9, 2016, 4:15:07 AM2/9/16
to mathja...@googlegroups.com
Hi Nikolaj,

Is there any way to make MathJax seamlessly switch out the old math with the new (without quick jumps)? :)

There is no built-in way to do so. IIRC, there are some subtleties that prevent the re-rendering to be smoother here.

Still, MathJax.Hub.Queue(['Rerender', MathJax.Hub]); is a bit radical/inefficient since not all equations will require a re-render; in particular it's very unlikely for inline equations.

Here's a demo that only updates those equations that are too wide (and those that are line-broken so that we can un-break them when the viewport size increases). This reduces the jitter and improves performance. But it can probably optimized further, depending on your needs.

Peter.



--

Murray

unread,
Feb 10, 2016, 3:58:51 AM2/10/16
to MathJax Users
Peter

Your CodePen demo gave me "[Math Processing Error]" for each equation when using Chrome (latest) on Windows 10.

It was fine on other browsers and other devices. MathJax on other pages is otherwise is working fine on Chrome so not sure what's happening there.

Regards
Murray

Peter Krautzberger

unread,
Feb 10, 2016, 4:00:34 AM2/10/16
to mathja...@googlegroups.com
Hi Murray,

Maybe an unclean cache due to the 2.6.1 release two days ago?

Peter.

Murray

unread,
Feb 10, 2016, 4:06:45 AM2/10/16
to MathJax Users
David

Yes, I also would have expected the horizontal scrollbar to appear on mobile devices, but it doesn't. I also agree about not using PDF.

But I shared my experience because I would have missed the overflowing equation parts if I wasn't trying to understand your post.

Regards
Murray

Murray

unread,
Feb 10, 2016, 4:16:26 AM2/10/16
to MathJax Users
Peter

Yes, that was it. It hadn't given me any trouble for other sites, so I hadn't suspected it here.

Regards
Murray

Nikolaj Ingemann von Holck

unread,
Feb 18, 2016, 7:39:56 AM2/18/16
to mathja...@googlegroups.com
Hi Peter,

Thank you for providing this elegant work-around. It works amazingly well – just what I was looking for.

I really appreciate your help – thank you so much! :)

- Nikolaj

You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/41rvlBFDDMs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages