Katex: problem with parsing text with mixed $$ and $ delimiters

Created on 16 Sep 2020  路  5Comments  路  Source: KaTeX/KaTeX

Before reporting a bug

Describe the bug:
In LaTeX source texts it is common to see inline math like $x$$y$ which is equivalent to $xy$
mixed with display math.

However, such math does not render correctly with the autorender extension, when the delimiter option is set to

{delimiters: [
  {left: '$$', right: '$$', display: true},
  {left: '$', right: '$', display: false},
  {left: '\\(', right: '\\)', display: false},
  {left: '\\[', right: '\\]', display: true}
]}

To Reproduce:
Steps to reproduce the behavior:

display this file in a supported browser

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFg\
W6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4j\
AIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
    integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
            crossorigin="anonymous" onload="renderMathInElement(document.body, {delimiters: [
  {left: '$$', right: '$$', display: true},
  {left: '$', right: '$', display: false},
  {left: '\\(', right: '\\)', display: false},
  {left: '\\[', right: '\\]', display: true}
]});"></script>
  </head>
  <body>
    <h1>A note on discrete $$\mathcal{R}$$ symmetries in $\mathbb{Z}$$_{6}$-II orbifolds with Wilson lines</h1>

  </body>
</html>

Expected behavior:
both the display math and the inline math should be rendered. It is not, but the $$ in the middle of $\mathbb{Z}$$_{6}$ disappears.

Omitting the $$ (which is a NOOP) in the middle results in correct rendering.
Introducing a space $\mathbb{Z}$ $_{6}$ also renders the inline math, albeit with a gratuitous space.

Screenshots:
katex-autorender

Environment (please complete the following information):

  • KaTeX Version: v0.12.0
  • Device: Linux desktop
  • OS: Fedora 32
  • Browser: Chrome
  • Version: 85.0.4183.102 (Official Build) (64-bit)

Additional Context:

We use KaTeX for rendering in a large repository of scientific papers. We don't control the TeX source, and hence can't avoid this mix of delimiters.

bug

Most helpful comment

I have a fix but I'm not satisfied with it. Let me explain. The way the auto-render works (in splitAtDelimiters.js) is to sequentially try the various delimiters in some order ($ $$ \( \[) and split the text accordingly. To solve the problem above one needs to have $ processed before $$ and add a condition that two $s in a row should be ignored. This is my easy fix.
But I think this sequential process is fundamentally flawed.
Let's compare these two expressions

\( \fbox{$a$} \)
$ \fbox{\(a\)} $

which in LaTeX will produce the exact same result. No matter what the ordering is in splitAtDelimiters.js, one of them will fail to be properly processed by auto-render.
So I want to rewrite this to have delimiters processed in parallel rather than sequentially.

All 5 comments

Hi,

I am also facing same issue while rendering with katex.

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
 <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFg\
W6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4j\
AIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
    integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
            crossorigin="anonymous" onload="renderMathInElement(document.body, {delimiters: [
  {left: '$$', right: '$$', display: true},
  {left: '$', right: '$', display: false},
  {left: '\\(', right: '\\)', display: false},
  {left: '\\[', right: '\\]', display: true}
]});"></script>
  </head>
  <body>
    <h1>The hybridization of the central carbon in CH3C${\equiv}$N and the bond angle CCN are</h1>
    <h5>Let $f\colon R\rightarrow R$ be a function, satisfying $f\left(\left(x-y\right)^{2}\right)=\left(f\left(x\right)\right)^{2}-2x\,\,f\left(y\right)+y^{2}$$\forall x,y\in R$ Answer the following</h5>
  </body>
</html>

Output Screenshot
image

I encountered the same problem, and have a fix for it. If anybody cares enough, I'll submit a PR.

I just confirmed that $x$$y$ indeed works in LaTeX, so this would be nice to fix. Thanks for the offer for a PR, @pzinn!

OK I have a fix but I want to think some more before submitting it.

I have a fix but I'm not satisfied with it. Let me explain. The way the auto-render works (in splitAtDelimiters.js) is to sequentially try the various delimiters in some order ($ $$ \( \[) and split the text accordingly. To solve the problem above one needs to have $ processed before $$ and add a condition that two $s in a row should be ignored. This is my easy fix.
But I think this sequential process is fundamentally flawed.
Let's compare these two expressions

\( \fbox{$a$} \)
$ \fbox{\(a\)} $

which in LaTeX will produce the exact same result. No matter what the ordering is in splitAtDelimiters.js, one of them will fail to be properly processed by auto-render.
So I want to rewrite this to have delimiters processed in parallel rather than sequentially.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

trollanfer picture trollanfer  路  5Comments

q2apro picture q2apro  路  3Comments

fabiospampinato picture fabiospampinato  路  4Comments

jason-s picture jason-s  路  3Comments

pvnr0082t picture pvnr0082t  路  4Comments