mathjax / mathjax/MathJax

Suggested zoom popper improvements

Open
#1,066 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Feature Request
Dominant language
JavaScript
Stars
10.9k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

In PMC, we are currently using MathJax 2.3, and I enhanced the zoom popper to fix a number of bugs that we were having. I believe I showed you some of the work that I did, but I can't seem to find that discussion now.

The main change that I made was to pull the element out of the main flow of the document, and put it into a div.MathJax_ZoomWrapper which appears in the DOM at the end of the body. The main problem this fixes is that the zoom popper was clipped by the container that it was in. Now, it's free to take up the full width of the viewport. Another problem was that sometimes, when opening the zoom popper, it changed the flow of text in the underlying document.

I know that you made some zoom popper improvements in 2.5, but if I remember correctly, you rejected the idea of pulling the element out of it's place in the DOM, but I can't remember what your rationale was.

We're in the process of upgrading to 2.5 now, and so we'll lose the work that I did. I put together "before" and "after snapshots of an article in our PubReader, to show you the differences, in case you want to reconsider, or can think of any other way to address the problems:

  • Current: 2.3-before - this has MathJax 2.3 with my zoom popper enhancements
  • Soon-to-be: 2.5-after - MathJax 2.5

With the PubReader, which uses CSS3 multi-column layout, the problems with the popper can be pretty bad. For example, if the equation is at the bottom of a column, the popper can be split such that the top half appears at the bottom of that column, and the bottom half appears at the top of the next column. Taking it out of the flow of the DOM fixes that.

Here's [the diff showing the changes that I made](Here's the diff: https://github.com/Klortho/MathJax/compare/Klortho:master...pmc-19668) in version 2.3. I wouldn't expect you to take these changes as-is, because I know that my implementation certainly doesn't address all the use-cases you guys have to worry about; but there's the diff for reference, in case you want to look at it.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the linked 2.3 diff and compare the 2.3-before and 2.5-after PubReader snapshots. Investigate the zoom popper's behavior in CSS3 multi-column layouts, including clipping, text-flow changes, and splitting across columns. Done means a reviewed approach that addresses these cases without losing required zoom behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.