How can I lower linked equations?

52 views
Skip to first unread message

George Benthien 84

unread,
Dec 3, 2021, 1:35:27 PM12/3/21
to MathJax Users
\eqref produces equation numbers that link to the referenced equation. When I follow an equation link it places the referenced equation number at the top of the screen. This often obscures part of the equation, especially for multiline equations such as (2) and (6) in the attached example mathjax_test-2.html. Is it possible to place the linked equation lower on the page more towards the middle?
mathjax_test-2.html

Murray

unread,
Dec 5, 2021, 6:04:02 AM12/5/21
to MathJax Users
Hello George

Your observation is correct - the equation links take the user to the top of the equation tag (not the equation itself), mostly obscuring the equation you want them to be able to see, especially if it is 2 or 3 lines high.

I also prefer on-page anchor links to give me a bit of context before the thing I'm taken to by the link.

Here is one way to resolve it. You can see the result in this working version of your page:


The process I used was:
  1. Find the y-displacement from the top of the document of each numbered equation and save them in an array.
  2. Add an event listener to each equation link, block the default behaviour, then scroll to a point 50 px above the top of the relevant equation
You can change the 50 px to whatever you like - I found 50 px allowed me to see the previous line or two of text and seemed about right.

One downside to this technique is the user doesn't see the anchors (e.g. #mjx-eqn:ellippolar) in the address bar as they click on the equation links. It is possible to add those #'s to the address bar if desired, and also to fix issues with the back button this approach causes.

(I also made a few small tweaks to your CSS to make things work a bit better on different-sized screens.)

Hope it's useful

Regards
Murray

George Benthien 84

unread,
Dec 6, 2021, 9:02:10 PM12/6/21
to MathJax Users
Murray

Thank you for your solution. That looks much better. Hopefully something like this can be eventually added to MathJax. It would be nice to be able to use the back button to get back to the original position. I'm sure that this is not that difficult for someone proficient with Javascript, but that's not me.

George

Murray

unread,
Dec 7, 2021, 5:25:52 AM12/7/21
to MathJax Users
George

I had another go at it because it could be better, and the lack of #'s in the URL bar is a problem.

In this new version, the approach is:
  1. Add an ID to the <mjx-container> element for each equation that has a tag. The new ID is the same as the ID used by the tag, but prefixed with "cntnr-". So for example, mjx-eqn:Adot for the tag becomes cntnr-mjx-eqn:Adot for the container.
  2. Change all the the equation links so they point to the container with this new container ID.
  3. When the user gets there, scroll up 50 px. This is achieved by listening for the # in the URL bar to change, then doing a scrollBy of -50 px vertically.
Here is the result:


This allows the user to use the back button to go back where they were, and the address bar behaves as it should.

I suggest MathJax could implement equation links in this manner.

Hope it helps
Murray

George Benthien 84

unread,
Dec 7, 2021, 1:03:37 PM12/7/21
to MathJax Users
Murray

Thanks again for providing this improvement. You are wonderful. I tried your solution in several browsers , including IE11, and it worked perfectly. In my actual web site I have a fixed navigation top bar; so I had to increase the scroll down from 50 to 70. If this is implemented in MathJax, the amount to scroll should probably be an input parameter.

George

David Farmer

unread,
Dec 7, 2021, 1:07:48 PM12/7/21
to MathJax Users

You may be able to implement the scroll down in CSS instead
of Javascript:

-----

:target {
scroll-margin-top: 70px;
}

-----

On Tue, 7 Dec 2021, George Benthien 84 wrote:

> Murray
> Thanks again for providing this improvement. You are wonderful. I tried your solution in several browsers
> , including IE11, and it worked perfectly. In my actual web site I have a fixed navigation top bar; so I
> had to increase the scroll down from 50 to 70. If this is implemented in MathJax, the amount to scroll
> should probably be an input parameter.
>
> George
>
> On Tuesday, December 7, 2021 at 2:25:52 AM UTC-8 Murray wrote:
> George
> I had another go at it because it could be better, and the lack of #'s in the URL bar is a problem.
> In this new version, the approach is:
> 1. Add an ID to the <mjx-container> element for each equation that has a tag. The new ID is the
> same as the ID used by the tag, but prefixed with "cntnr-". So for example, mjx-eqn:Adot for the
> tag becomes cntnr-mjx-eqn:Adot for the container.
> 2. Change all the the equation links so they point to the container with this new container ID.
> 3. When the user gets there, scroll up 50 px. This is achieved by listening for the # in the URL
> 1. Find the y-displacement from the top of the document of each numbered equation and
> save them in an array.
> 2. Add an event listener to each equation link, block the default behaviour, then
> scroll to a point 50 px above the top of the relevant equation
> You can change the 50 px to whatever you like - I found 50 px allowed me to see the
> previous line or two of text and seemed about right.
>
> One downside to this technique is the user doesn't see the anchors (e.g.
> #mjx-eqn:ellippolar) in the address bar as they click on the equation links. It is
> possible to add those #'s to the address bar if desired, and also to fix issues with the
> back button this approach causes.
>
> (I also made a few small tweaks to your CSS to make things work a bit better on
> different-sized screens.)
>
> Hope it's useful
>
> Regards
> Murray
>
> On Saturday, 4 December 2021 at 04:35:27 UTC+10 georgebe...@gmail.com wrote:
> \eqref produces equation numbers that link to the referenced equation. When
> I follow an equation link it places the referenced equation number at the
> top of the screen. This often obscures part of the equation, especially for
> multiline equations such as (2) and (6) in the attached example
> mathjax_test-2.html. Is it possible to place the linked equation lower on
> the page more towards the middle?
>
> --
> 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.
> To view this discussion on the web visithttps://groups.google.com/d/msgid/mathjax-users/c5643756-0eea-439a-8042-65b53f8b7e45n%40googlegroups.com.
>
>
>
Reply all
Reply to author
Forward
0 new messages