search

tsung-ju / eleventy-plugin-mathjax

Eleventy plugin for server-side MathJax rendering
Apache License 2.0
7 stars 3 forks source link

Inline formulas are rendered twice #3

Open senarclens opened 2 years ago

senarclens commented 2 years ago

In-line formulas are rendered twice. For example, the following code renders the Pi symbol two times, once as and once as .

The last value must be $\pi$.

Is rendered as

The last value must be <mjx-container class="MathJax
" jax="SVG" style="position: relative"><svg style="vertical-align: -0.025ex" xmlns="http://www.w3.org/2
000/svg" width="1.29ex" height="1ex" role="img" focusable="false" viewBox="0 -431 570 442" xmlns:xlink=
"http://www.w3.org/1999/xlink" aria-hidden="true"><g stroke="currentColor" fill="currentColor" stroke-w
idth="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="1D70B" xlin
k:href="#MJX-TEX-I-1D70B"></use></g></g></g></svg><mjx-assistive-mml unselectable="on" display="inline"
><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>π</mi></math></mjx-assistive-mml></mjx-container>

This is rendered twice in the browser, but I would expect to see the character π only a single time.

senarclens commented 2 years ago

Just realized that the problem occurs on all formular, not just inline formulars - ie $$ ... $$ is also affected. @tsung-ju can you please let me know if you can reproduce the problem by now? Otherwise I can provide additional information if needed. Thanks.

tsung-ju commented 2 years ago

Hi @senarclens, I couldn't reproduce this on my windows machine using either chrome or firefox. Maybe the bug is browser/os specific?

senarclens commented 2 years ago

Re-hi @tsung-ju, I've investigated this a bit further tonight. The issue reproduces in two of my environments but not in a third. All Linux based. When it reproduces, it reproduces with all common browsers. I've checked the generated <max-container>. It is identical for this simplistic example $n$. Eventually, I figured, that the required CSS was added to one example, but not the other. The difference is in the <head>, where, when the issue reproduces, the following is missing:

<style id="MJX-SVG-styles">
mjx-container[jax="SVG"] {
  direction: ltr;
}

mjx-container[jax="SVG"] > svg {
  overflow: visible;
  min-height: 1px;
  min-width: 1px;
}

mjx-container[jax="SVG"] > svg a {
  fill: blue;
  stroke: blue;
}

mjx-assistive-mml {
  position: absolute !important;
  top: 0px;
  left: 0px;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 1px 0px 0px 0px !important;
  border: 0px !important;
  display: block !important;
  width: auto !important;
  overflow: hidden !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

mjx-assistive-mml[display="block"] {
  width: 100% !important;
}

mjx-container[jax="SVG"][display="true"] {
  display: block;
  text-align: center;
  margin: 1em 0;
}

mjx-container[jax="SVG"][display="true"][width="full"] {
  display: flex;
}

mjx-container[jax="SVG"][justify="left"] {
  text-align: left;
}

mjx-container[jax="SVG"][justify="right"] {
  text-align: right;
}

g[data-mml-node="merror"] > g {
  fill: red;
  stroke: red;
}

g[data-mml-node="merror"] > rect[data-background] {
  fill: yellow;
  stroke: none;
}

g[data-mml-node="mtable"] > line[data-line], svg[data-table] > g > line[data-line] {
  stroke-width: 70px;
  fill: none;
}

g[data-mml-node="mtable"] > rect[data-frame], svg[data-table] > g > rect[data-frame] {
  stroke-width: 70px;
  fill: none;
}

g[data-mml-node="mtable"] > .mjx-dashed, svg[data-table] > g > .mjx-dashed {
  stroke-dasharray: 140;
}

g[data-mml-node="mtable"] > .mjx-dotted, svg[data-table] > g > .mjx-dotted {
  stroke-linecap: round;
  stroke-dasharray: 0,140;
}

g[data-mml-node="mtable"] > g > svg {
  overflow: visible;
}

[jax="SVG"] mjx-tool {
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
}

[jax="SVG"] mjx-tool > mjx-tip {
  position: absolute;
  top: 0;
  left: 0;
}

mjx-tool > mjx-tip {
  display: inline-block;
  padding: .2em;
  border: 1px solid #888;
  font-size: 70%;
  background-color: #F8F8F8;
  color: black;
  box-shadow: 2px 2px 5px #AAAAAA;
}

g[data-mml-node="maction"][data-toggle] {
  cursor: pointer;
}

mjx-status {
  display: block;
  position: fixed;
  left: 1em;
  bottom: 1em;
  min-width: 25%;
  padding: .2em .4em;
  border: 1px solid #888;
  font-size: 90%;
  background-color: #F8F8F8;
  color: black;
}

foreignObject[data-mjx-xml] {
  font-family: initial;
  line-height: normal;
  overflow: visible;
}

mjx-container[jax="SVG"] path[data-c], mjx-container[jax="SVG"] use[data-c] {
  stroke-width: 3;
}
</style>

The sole consistent difference between my environments is that the issue reproduces with

    "node_modules/eleventy-plugin-mathjax": {
      "version": "2.0.4",

but does not reproduce with

    "node_modules/eleventy-plugin-mathjax": {
      "version": "2.0.2",

In both cases mathjax-full has the same version.

"node_modules/mathjax-full": {
      "version": "3.2.0",

On the system where the issue was not reproducible, a simple npm update made the issue reproducible. Is there a chance that a regression slipped in between 2.0.2 and 2.0.4 that leads to the required CSS not to be injected into the <head>? Although I couldn't find anything in the commits between 2.0.2 and 2.0.4. Any ideas?

SpaceDreams commented 2 years ago

I have this same problem. Have there been any updates? Currently I am using the 2.0.2 version to prevent this issue.

tsung-ju commented 2 years ago

@SpaceDreams No updates so far, unfortunately. As I recall I wasn't able to reproduce this issue on my machine. The only difference between v2.0.2 and v2.0.4 is that the peerDependency on @11ty/eleventy was replaced by eleventy's own version checking mechanism. I guess this may have changed how npm resolves dependencies...

tsung-ju commented 2 years ago

As an alternative to this plugin, you could try using this markdown-it plugin with eleventy's custom markdown-it instance feature: https://github.com/tani/markdown-it-mathjax3 It provides similar functionalities and seems not to have the same issue. Plus it handles backslash escapes better.

vpratz commented 1 week ago

In case anyone is still interested in this, I have found a fix that will automatically include the necessary CSS in the HTML. It uses SVG.styleSheet and CHTML.styleSheet to produce the <style> element containing the CSS, which is then added to the head of the document.