Math is occasionally rendered incorrectly (e.g., fraction inside sqrt) #5435
Comments
pbreheny
added
Status: Triage
|
@pbreheny Do you happen to know which version of chrome this was? On v123.0.6312.123: And on Firefox v124.0.2: Granted the sqrt goes further down then it should. |
|
I agree that this is an issue on Mermaid's end. Here's the same formula displayed in Joplin (Electron based app with KaTeX integration) KaTeX v0.16.9
|
|
Oh, interesting...it is indeed browser dependent. The mistake shows up on Chromium (Linux) Version 124.0.6367.60 (Official Build) snap (64-bit). When I go over to a Windows machine and run on Google Chrome / Edge / Firefox, the equation is correctly displayed on all three browsers. |
|
Does this effect how it renders on Linux? <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({
theme: 'forest',
legacyMathML: true,
});
</script>
</head>
<body>
<div class="mermaid">
graph LR
B("$$\sqrt{\frac{\pi(1-\pi)}{n}}$$")
A-->B
</div>
</body>
</html> |
|
No; sqrt is still misplaced:
|
|
Could you try opening the following? Does one of them render the same as your 2nd screenshot? <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" 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-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd"
crossorigin="anonymous"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
const element = document.querySelector('div.math')
const element2 = document.querySelector('div.math2')
katex.render(String.raw`\sqrt{\frac{\pi(1-\pi)}{n}}`, element, {
throwOnError: false,
displayMode: true,
output: 'mathml'
}
);
katex.render(String.raw`\sqrt{\frac{\pi(1-\pi)}{n}}`, element2, {
throwOnError: false,
displayMode: true,
output: 'htmlAndMathml'
}
);
</script>
</head>
<body>
<div class="math"></div>
<div class="math2"></div>
<div class="mermaid">
graph LR
B("$$\sqrt{\frac{\pi(1-\pi)}{n}}$$")
A-->B
</div>
</body>
</html> |
|
Yes; first one is incorrect, second one is correct:
|
|
Great! The issue comes down OSes using different fonts and browsers having different MathML implementations. On Windows the first shows as being elongated while the 2nd is correct.
Unfortunately it was a bit of an oversight as I didn't think to test different fonts but the |
Description
I'm not entirely sure on the scope of the problem, but it seems that for more complex equations involving nested representations (e.g., a square root of a fraction), mermaid does not render the math correctly.
Steps to reproduce
Here's a minimal reproducible example:
The fraction is inside the square root, but this is not how mermaid renders the equation (see screenshot).
Screenshots
Code Sample
No response
Setup
Suggested Solutions
No response
Additional Context
No response
The text was updated successfully, but these errors were encountered: