Initial MathJax renderer implementation

[grimsteel]

This is an initial implementation of a client-side MathJax renderer (for Docs right now).

I've currently only implemented the renderer, but this was the bulk of the work. Everything else should be significantly easier.

Comparison: (CodeCogs is left, MathJax is right)

As far as I know, adding support for the mobile/workspace addon isn't possible as this renderer relies on a Canvas to convert the MathJax SVG to a PNG.

Todo:

• Renderer
• Derenderer
• Colored equations (Docs actually has no support for this at all right now)
• MathJax error handling
• Further equation tests

I also cleaned up some of the render code

• use enum and defined interface type instead of tuple/magic numbers
• move all render options into a single interface
• remove redundant params (start/end for range where the RangeElement is
  already passed in, rendererType + renderer[5])
• remove quality param
• improve readability of Docs replaceEquations return value (use object
  instead of numerical flag)

[Divide-By-0]

Can we make sure the MathJax is the same height as Codecogs? Maybe manually scaling it? Can we have mobile fallback to the other renderers then I guess so it still works? Also, I forget, are you deploying the new versions via GCP yourself? I'm not sure what's live yet and what's not.

…

On Tue, Jun 3, 2025 at 11:29 PM Siddhant Kameswar ***@***.***> wrote: This is an initial implementation of a client-side MathJax renderer (for Docs right now). I've currently only implemented the renderer, but this was the bulk of the work. Everything else should be significantly easier. image.png (view on web) <https://github.com/user-attachments/assets/eceb82ad-4a70-419a-adbf-d17efa98db01> Comparison: (CodeCogs is left, MathJax is right) image.png (view on web) <https://github.com/user-attachments/assets/d04801d0-dfd5-4aff-8cf6-575295ca2ebb> As far as I know, adding support for the mobile/workspace addon isn't possible as this renderer relies on a Canvas to convert the MathJax SVG to a PNG. Todo: - Renderer - Derenderer - Colored equations (Docs actually has no support for this at all right now) - MathJax error handling - Further equation tests I also cleaned up some of the render code - use enum and defined interface type instead of tuple/magic numbers - move all render options into a single interface - remove redundant params (start/end for range where the RangeElement is already passed in, rendererType + renderer[5]) - remove quality param - improve readability of Docs replaceEquations return value (use object instead of numerical flag) ------------------------------ You can view, comment on, or merge this pull request online at: #39 Commit Summary - 65e4b58 <65e4b58> MathJax preparation: clean up Docs render code - efd0e83 <efd0e83> client mathjax render code - d2a4aca <d2a4aca> cleanup main render code - 9b1c313 <9b1c313> finish mathjax renderer File Changes (12 files <https://github.com/Divide-By-0/autolatex/pull/39/files>) - *M* BuildSidebarJS.js <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-18dbcf6566be65e297a9a3865e1f1e21752e302b305bcbae6e4da51bd129e56a> (7) - *M* Common/Code.ts <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-f3815fdc455b9328289e9ad9ab0f06dc26fa1635e8b669cf10787af7ec213ce3> (47) - *M* Docs/ALEStylesheet.html <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-d117f9a6fa02f456a4751e23d4906398cd902a0ebd3c11e4fc15c8399f56174e> (5) - *M* Docs/Code.ts <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-5cec4af56b1ce200264bcb2478db5d1c42928b8cb0708435c0410b381e23f2eb> (368) - *M* Docs/Sidebar.html <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-6e324b5f3dda68dbc09fb99a035cd283429e54abc8c6ce2793b0a2fbf6d07b24> (5) - *M* Docs/Sidebar.ts <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-570689159431a2b990b8f3c481ae523a420800e9c0748649982c6afce30bfc5c> (198) - *M* Docs/SidebarJS.html <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-15fd99d0740cd6134ee5c323533bb378b2a5e7e66616112434700cd57e7f7d6a> (200) - *M* package-lock.json <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-053150b640a7ce75eff69d1a22cae7f0f94ad64ce9a855db544dda0929316519> (14) - *M* package.json <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519> (1) - *M* types/common-types/LICENSE <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-5b212104b91045452672142c42f39c6290cff5db540ec07cd44fb4cb4b4c321a> (2) - *M* types/common-types/index.d.ts <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-92d4e15acc9c3e163599581b1358ea6d74d8008aa0453b7c6c54dff58861e5c7> (48) - *M* types/docs-types/index.d.ts <https://github.com/Divide-By-0/autolatex/pull/39/files#diff-60074a4c00afa54a05fd14427bf33305d673358a97b3e978eb16d4871d85ea51> (25) Patch Links: - https://github.com/Divide-By-0/autolatex/pull/39.patch - https://github.com/Divide-By-0/autolatex/pull/39.diff — Reply to this email directly, view it on GitHub <#39>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABEU6VR4BUHOKH4PBRG7U7T3B2G4ZAVCNFSM6AAAAAB6RUSPOSVHI2DSMVQWIX3LMV43ASLTON2WKOZTGEYTMNRTGU3TCOI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[grimsteel]

Can we make sure the MathJax is the same height as Codecogs?

Yes - I've done some scaling already just based on the image heights, but I should be able to make it more accurate. (I'll also see if I can reduce the thickness of the MathJax equations)

For some parts of equations, MathJax is actually bigger for some reason: (TexRendr is left; I'm not sure what happened to the first part of the equation)

It seems like most renderers scale down the fractions, while MathJax does not.

Can we have mobile fallback to the other renderers then I guess
so it still works?

Right now, we only use MathJax when the checkbox enabling it is checked. I'll eventually remove the check and make it the default, but the code for the other renderers is all still there. Mobile should keep using them.

[Divide-By-0]

Put it under advanced settings?

[Divide-By-0]

From grimsteel:

Also, I was doing some more tests with the MathJax renderer, and it fails when there are multiple equations in the same TextElement.

Right now, the renderer does an initial pass of the entire document and finds all of the equations without actually rendering them. It stores each equation as a RangeElement with a custom start/end offset, and saves each one as a named range (as the actual RangeElement object can't be sent to the client). It then sends all the information to the client, which renders each equation and sends the rendered blob back with the named range ID. It then inserts these blobs using the same placeImage function like the other renderers.

As far as I can tell, placeImage/repairImage actually delete the rest of the TextElement the equation is contained in and append a new one that has the current equation removed. This makes the MathJax renderer fail when it tries to do stuff with the named range for any subsequent equations in the same TextElement, as it doesn't actually exist anymore.

Do you have any ideas for solving this? I suppose I could "group" equations by TextElement, and process each TextElement at once, but that would pretty much require new rendering code.

[Divide-By-0]

Reply from me:

What if you went backwards through the document, replacing equations at the end of each paragraph first? So that way when you replace the rest of the paragraph, it doesn't actually change the earlier equations... I don't really know if this will work or not

You could also maybe rescan the document after each image replacement or something? I think scanning is pretty quick or maybe even go to the previous text element in the next text each time or something to recalculate it instead of having to re-scan the entire document even, I'm not sure.