Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improper spacing between lines in KaTex aligned expressions #3527

Closed
thomask-gh opened this issue Jan 15, 2018 · 7 comments
Closed

Improper spacing between lines in KaTex aligned expressions #3527

thomask-gh opened this issue Jan 15, 2018 · 7 comments

Comments

@thomask-gh
Copy link
Contributor

thomask-gh commented Jan 15, 2018

Update: Updating the version of KaTeX used by gatsby-remark-katex solved the problem!

I'm using the gatsby-remark-katex plugin to render math expressions in Gatsby. When writing expressions aligned across multiple lines with \begin{aligned} ... \end{aligned}, the lines aren't spaced properly (too close to each other). Here is what I get:

screen shot 2018-01-15 at 10 18 00 am

I guess the problem doesn't come from my config, because the screenshot is from the official Gatsby KaTeX example to which I just added the following expression:

$
\begin{aligned}
    m &= \frac{\Delta y}{\Delta x} \\
      &= \frac{y_m - y_a}{x_m - x_a} \\
      &= \frac{f(a+h) - f(a)}{a+h- a} \\
      &= \frac{f(a+h) - f(a)}{h}
\end{aligned}
$

The thing I don't get is that if I create a barebones HTML file in which I include the two links the docs says to include and just try to render the same expression, I get a far better spacing:

screen shot 2018-01-15 at 12 55 04 pm

And I get good spacing too when using the preview on KaTe's website.

That's why I suspect the issue might have something to do with the way KaTex support is implemented in Gatsby. I'm not 100% sure it comes from the implementation in Gatsby, because the docs says that:

KaTeX follows LaTeX's rendering of aligned and matrix environments unlike
MathJax. When displaying fractions one above another in these vertical
layouts there may not be enough space between rows for people who are used to
MathJax's rendering. The distance between rows can be adjusted by using
\\[0.1em] instead of the standard line separator distance.

But if the problem is with KaTex itself, then I don't know why it works better when I try in a simple HTML page or on the demo on the official site...

Any one knows if this comes from KaTeX or Gatsby and how to fix it?

Thanks!

@KyleAMathews
Copy link
Contributor

@jeffrey-xiao any idea what's happening here?

@jeffrey-xiao
Copy link
Contributor

I've narrowed down the issue to this issue: KaTeX/KaTeX#531

It seems to be fixed in a later version of katex (E.G 0.8.3).

@thomask-gh
Copy link
Contributor Author

thomask-gh commented Jan 16, 2018

Yes, maybe updating the version of KaTeX used in gatsby-remark-katex might make things better.
I wanted to try out locally (by using the "using katex" demo of the official repo), but I can't figure out how to use the local version of the plugin – in which I updated KaTeX to a 0.8.3 (or at least tried to, I don't even know if this worked...) – instead of the NPM one. I tried to put the plugin's package in a plugins subfolder, as the doc suggests, but it doesn't work and it breaks the site...

@KyleAMathews
Copy link
Contributor

@thomaskuntzz could you file a PR updating the package?

@KyleAMathews
Copy link
Contributor

package.json of gatsby-remark-katex that is :-)

@thomask-gh
Copy link
Contributor Author

Sure, but I can't test locally...

@thomask-gh
Copy link
Contributor Author

Updating the version of KaTeX used by gatsby-remark-katex indeed solved the problem! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants