LaTeX expressions not centering correctly after updating to MathJax 3

[samuelpmish]

Hi, I've been trying out this theme, and really enjoying it -- the sidenotes are great!

Some of my equations use commands that aren't defined in MathJax 2.7.5 (the version used in this theme), so I changed the content in _includes/head.html to point at v3.0, and configure it appropriately. The equations are rendering correctly now with 3.0, except they seem to not be centered with respect to the body text, but to the center of the full-width window.

For example, before updating MathJax, things looked like this (preferred):

---

After updating MathJax, it looks like (undesirable):

which bleeds into the righthand-side, potentially conflicting with side/margin notes.

Could anyone help me better understand what might be involved in updating to MathJax 3.0, while retaining the centering shown in the first image?

Thank you.

[clayh53]

I took a look at my example site, and all the mathjax expressions are wrapped within a paragraph tag, which centers them. If I had to guess, there is something either the new mathjax plug-in is doing or some other cause that is putting the expression outside the paragraph tag. I will try adding the new library on my local version and see if I can suss out what is going on. It is definitely either an HTML or CSS issue.

Clay

On 2022-04-02, at 16:08 :25, samuelpmish @.***> wrote:

Hi, I've been trying out this theme, and really enjoying it -- the sidenotes are great!

Some of my equations use commands that aren't defined in MathJax 2.7.5 (the version used in this theme), so I changed the content in _includes/head.html to point at v3.0, and configure it appropriately. The equations are rendering correctly now with 3.0, except they seem to not be centered with respect to the body text, but to the center of the full-width window.

For example, before updating MathJax, things looked like this (preferred): https://user-images.githubusercontent.com/16393433/161399345-60943494-af04-4a92-b9c2-f638f5a1a31c.png After updating MathJax, it looks like (undesirable): https://user-images.githubusercontent.com/16393433/161399360-0555efe1-f2bd-42c5-9cae-74de0da96fa9.png which bleeds into the righthand-side, potentially conflicting with side/margin notes.

Could anyone help me better understand what might be involved in updating to MathJax 3.0, while retaining the centering shown in the first image?

Thank you.

— Reply to this email directly, view it on GitHub https://github.com/clayh53/tufte-jekyll/issues/86, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAXNG5U4AMKY4JOITWFFYULVDCSLTANCNFSM5SLMB43Q. You are receiving this because you are subscribed to this thread.

[samuelpmish]

Thank you for the help.

I'm not sure if this is helpful, but this is the new entry I used in _includes/head.html to grab the newer version of MathJax:

  <script>                                                                       
  MathJax = {                                                                    
    loader: {load: ['[tex]/mathtools']},                                         
    tex: {                                                                       
      inlineMath: [ ['$', '$'], ['\\(', '\\)'] ],                                
      packages: {'[+]': ['mathtools']}                                           
    },                                                                           
    svg: {                                                                       
      fontCache: 'global'                                                        
    }                                                                            
  };                                                                             
  </script>                                                                      
  <script                                                                        
    type="text/javascript" id="MathJax-script" async                             
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">               
  </script> 

[clayh53]

Here’s the fix: go to tufte.scss and on the line (around line 296), add a class .MathJax to this line:

p, footer, div.table-wrapper, .MJXc-display, .MathJax { width: 55%; }

They changed the class name for the wrapper. That fixes it. I will push the change to the repo.

Thanks for catching this.

Clay

On 2022-04-02, at 16:43 :16, samuelpmish @.***> wrote:

Thank you for the help.

I'm not sure if this is helpful, but this is the new entry I used in _includes/head.html to grab the newer version of MathJax:

<script
type="text/javascript" id="MathJax-script" async
@.***/es5/tex-chtml.js">
— Reply to this email directly, view it on GitHub https://github.com/clayh53/tufte-jekyll/issues/86#issuecomment-1086719203, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAXNG5SCT4UHIEAZET62TJDVDCWOJANCNFSM5SLMB43Q. You are receiving this because you commented.

[samuelpmish]

I applied your fix, and everything looks great!

Thanks for the help (especially on short notice)-- this sort of thing is pretty unfamiliar to me, so I would never have figured it out on my own.