Excess spacing to the right when using long MathJax

[shinwookim]

Hi, I've been trying out this theme, and really enjoying it—the intuitive design is amazing!

Some of my equations are rather long, and they seem to overflow to the right of the page like this:

So, I've gone and manually line-breaken them

$$\begin{align}
y'=e^{-t^2}\cdot\frac{d}{dt}(\int^t_0e^{u^2}du)+(\int_0^te^{u^2}dy)\cdot(-2t)e^{-t^2}+c_1e^{-t^2}\cdot(-2t)\\
\text{Substitute into DE:}\\
\verb|LHS|=y'+2ty=e^{-t^2}\cdot e^{t^2}-2te^{-t^2}\cdot\int_0^te^{u^2}du-c_1\cdot2te^{-t^2}+2t(e^{-t^2}\int_0^te^{u^2}du+c_1e^{-t^2})\\
=1-2te^{-t^2}\int_0^t{e^{u^2}du}-c_1\cdot2te^{-t^2}+2te^{-t^2}\cdot\int_u^te^{u^2}du+2t\cdot c_1e^{-t^2}\\
=1=\verb|RHS|\checkmark\\
\therefore y=e^{-t^2}\int_0^te^{u^2}du+c_1e^{-t^2}\ \text{is a valid solution to the given DE}
\end{align}$$

Now, the Latex is more legible, but when I generate the site through Jekyll, there is an excess spacing to the right. See live demo here. The issue disappears if I remove all the Latex from the post.

Could anyone help me better understand how I should be styling the latex so that this is not the issue?

Thanks

[clayh53]

This is most likely an issue with MathJax formatting long lines in a way that the Tufte-Jekyll CSS cannot handle. I will take a look and the MathJax documentation and see if there is any obvious fix.

Clay

On 2022-06-06, at 23:56 :01, Shinwoo Kim @.***> wrote:

Hi, I've been trying out this theme, and really enjoying it—the intuitive design is amazing!

Some of my equations are rather long, and they seem to overflow to the right of the page like this: https://user-images.githubusercontent.com/29858077/172292548-8bc58e6a-d4a4-480d-8ac8-9e71a09332cf.png So, I've gone and manually line-breaken them

$$\begin{align} y'=e^{-t^2}\cdot\frac{d}{dt}(\int^t_0e^{u^2}du)+(\int_0^te^{u^2}dy)\cdot(-2t)e^{-t^2}+c_1e^{-t^2}\cdot(-2t)\ \text{Substitute into DE:}\ \verb|LHS|=y'+2ty=e^{-t^2}\cdot e^{t^2}-2te^{-t^2}\cdot\int_0^te^{u^2}du-c_1\cdot2te^{-t^2}+2t(e^{-t^2}\int_0^te^{u^2}du+c_1e^{-t^2})\ =1-2te^{-t^2}\int_0^t{e^{u^2}du}-c_1\cdot2te^{-t^2}+2te^{-t^2}\cdot\int_u^te^{u^2}du+2t\cdot c_1e^{-t^2}\ =1=\verb|RHS|\checkmark\ \therefore y=e^{-t^2}\int_0^te^{u^2}du+c_1e^{-t^2}\ \text{is a valid solution to the given DE} \end{align}$$ Now, the Latex is more legible, but when I generate the site through Jekyll, there is an excess spacing to the right. https://user-images.githubusercontent.com/29858077/172292223-f234b81c-cb04-416b-a0a3-4117e5c457e3.gif See live demo here https://shinwookim.github.io/testbed/articles/22/math. The issue disappears if I remove all the Latex from the post.

Could anyone help me better understand how I should be styling the latex so that this is not the issue?

Thanks

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

[clayh53]

A quick look at the MathJax documentation, and it appears that adding automatic line breaks is on their ’to-do’ list:

http://docs.mathjax.org/en/latest/output/linebreaks.html http://docs.mathjax.org/en/latest/output/linebreaks.html

There is really not a great solution now. If you are only displaying the blog online and not printing it, you can modify the tufte.scss file in the css folder on line 303 to add overflow behavior to the .MathJax class:

This will put overflowing equations into an overflow container where a slider below the equation will appear and you can slide the long equation along to the left to view all of it.

Properly printing this on paper is a trickier thing, because it will need to have some sort of automatic line breaking that is not now implemented in the print.scss file.

But if a webview is all you need, modifying the tufte.css file is the easiest fix.

Clay

On 2022-06-06, at 23:56 :01, Shinwoo Kim @.***> wrote:

Hi, I've been trying out this theme, and really enjoying it—the intuitive design is amazing!

Some of my equations are rather long, and they seem to overflow to the right of the page like this: https://user-images.githubusercontent.com/29858077/172292548-8bc58e6a-d4a4-480d-8ac8-9e71a09332cf.png So, I've gone and manually line-breaken them

$$\begin{align} y'=e^{-t^2}\cdot\frac{d}{dt}(\int^t_0e^{u^2}du)+(\int_0^te^{u^2}dy)\cdot(-2t)e^{-t^2}+c_1e^{-t^2}\cdot(-2t)\ \text{Substitute into DE:}\ \verb|LHS|=y'+2ty=e^{-t^2}\cdot e^{t^2}-2te^{-t^2}\cdot\int_0^te^{u^2}du-c_1\cdot2te^{-t^2}+2t(e^{-t^2}\int_0^te^{u^2}du+c_1e^{-t^2})\ =1-2te^{-t^2}\int_0^t{e^{u^2}du}-c_1\cdot2te^{-t^2}+2te^{-t^2}\cdot\int_u^te^{u^2}du+2t\cdot c_1e^{-t^2}\ =1=\verb|RHS|\checkmark\ \therefore y=e^{-t^2}\int_0^te^{u^2}du+c_1e^{-t^2}\ \text{is a valid solution to the given DE} \end{align}$$ Now, the Latex is more legible, but when I generate the site through Jekyll, there is an excess spacing to the right. https://user-images.githubusercontent.com/29858077/172292223-f234b81c-cb04-416b-a0a3-4117e5c457e3.gif See live demo here https://shinwookim.github.io/testbed/articles/22/math. The issue disappears if I remove all the Latex from the post.

Could anyone help me better understand how I should be styling the latex so that this is not the issue?

Thanks

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

[shinwookim]

After playing around with MathJax the accessibility class mjx-assistive-mml seems to be the issue.

Disabling it or using scss to modify it seems to fix the issue