Skip to content

KaTeX fonts not loading properly #2672

@AgentHagu

Description

@AgentHagu

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

Tell us about your environment

Windows 10

MarkBind version

5.6.0

Describe the bug and the steps to reproduce it

When visiting a page with KaTeX text, inspecting the console reveals that MarkBind is having trouble getting the fonts for the KaTeX.

Image

This issue has a somewhat notable effect on the text. From my own personal testing, here is how the following code looks with and without the font

\begin{equation}
  a^2+b^2=c^2
\end{equation}

\begin{equation}
  \begin{pmatrix}
    A & B \\ B & C
  \end{pmatrix}
  \textit{Test}
\end{equation}

\begin{equation}
E = mc^2, \quad a^2 + b^2 = c^2, \quad \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
\end{equation}

\begin{equation}
f(x) = ax^2 + bx + c
\end{equation}
With font files Without font files
Image Image
Notice the difference in the matrix and Sigma, as well as some minor differences in the other text and notation.

Possible Reason

After some investigation, it seems that the issue is most likely during the build process. When a user does serve or build, the fonts folder that holds the KaTeX fonts is placed inside the css folder, i.e. _site\markbind\css\fonts.

The file markbind.min.css is attempting to access the fonts but is using the wrong relative path to it. That is because within our own core-web package, the original path was packages\core-web\dist\css\markbind.min.css and the path to the fonts folder was packages\core-web\dist\fonts. Because of this, markbind.min.css references the fonts using the path ../font_name

Image

This means that after the site is built, rather than accessing the font folder properly, markbind.min.css is trying to access _site\markbind\fonts\font_name, which doesn't exist. This leads to the errors we see in the console. Manually moving the fonts folder out to _site\markbind and reloading the page seems to fix the issue.

Expected behavior

The KaTeX files should be loaded in properly without any issues, resulting in the correct looking text font used for KaTeX notation.

If what I've identified is the actual root cause, then we only need to make sure that the relative path referenced by markbind.min.css is correctly set for the fonts. This is either done by adjusting our own core-web package or by adjusting the fonts folder for the built site.

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions