Comments (8)
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 useLegacyMathML
option only defaults to using the stylesheet if MathML is not supported at all in a browser. Going forward the config field should be re-worked to also allow using the KaTeX's stylesheet if specified, and never the browser's implementation. I'll hopefully have a PR opened by this weekend to address the problem.
from mermaid.
@pbreheny Do you happen to know which version of chrome this was?
Granted the sqrt goes further down then it should.
from mermaid.
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
Electron v29.1.0 (Chromium v122.0.6261.39)
from mermaid.
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.
from mermaid.
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>
from mermaid.
No; sqrt is still misplaced:
from mermaid.
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>
from mermaid.
Yes; first one is incorrect, second one is correct:
from mermaid.
Related Issues (20)
- Allow user to disable setting of certain CSS styles
- YouTube `<iFrame>` doesn't render. HOT 2
- nested block diagram's dynamic width not worked as expected
- Misleading doc statement about state diagram?
- mermaid.ink server is down HOT 1
- Named composite example in State Diagram HOT 1
- Image not rendering in mermaid live HOT 1
- KaTeX does not render on GitHub HOT 3
- Tag a commit separate from the line defining the commit in gitGraph HOT 1
- Add support for nested namespaces HOT 2
- The diagram renders only once. HOT 1
- How to put URL in timeline ?
- Bad Gantt Chart Will Cause UI to Hang
- Please add data attributes `data-from-id` and `data-to-id` to `g class='edgeLabel'` svg / make it clickable in flowchart HOT 2
- Parsing error when assigning a hex color value to the last attribute of a linkStyle
- Proyecto grabación de pantalla
- Allow linkStyle background-color attribute to override edgeLabel class background-color HOT 1
- Mermaid Chart - Code Editor Constantly Reduces Upwards HOT 4
- 'Graph' keyword in mindmap diagram breaks if elk renderer set for flowchart
- click/hover to Expand or collapse subgraphs/par
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mermaid.