react-native-mathjax-html-to-svg
react-native-mathjax-html-to-svg copied to clipboard
Published
20 hours ago •
webyonet
webyonet
vertical position of overline seems to be wrong
const html = `<span class="math-tex">\(\overline{(0 + 1)}・(1 + 1)\)</span>`;
return (
<View style={styles.View}>
<MathJaxSvg
fontSize={WEBVIEW_FONT_SIZE}
color="#000000"
fontCache={true}
>{html}</MathJaxSvg>
</View>
);
does show:
( 0 + 1 ) ・(1 + 1)
does not show overline above formula.
% cat package.json | grep svg
"react-native-mathjax-html-to-svg": "1.0.8",
"react-native-svg": "13.7.0",
"react-native-svg-transformer": "1.0.0",
% npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 13.2
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Memory: 21.00 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.14.0 - /usr/local/opt/node@18/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.3.1 - /usr/local/opt/node@18/bin/npm
Watchman: 2023.02.13.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9514443
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 17.0.6 - /usr/bin/javac
Python: 3.9.16 - /usr/local/opt/[email protected]/libexec/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.63.5 => 0.63.5
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
const html = `<span class="math-tex">\(\overline{(0 + 1)}・(1 + 1)\)</span>`;
return (
<View style={styles.View}>
<MathJaxSvg
fontSize={WEBVIEW_FONT_SIZE}
color="#000000"
fontCache={false}
>{html}</MathJaxSvg>
</View>
);
shows overline,but any wrong vertical position of line.
this is a bug of react-native-svg, the generated svg is as follows:
<svg style="vertical-align: -0.566ex;" xmlns="http://www.w3.org/2000/svg" width="126.712ex" height="23.84ex" role="img" focusable="false" viewBox="0 -1067 7000.9 1317" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MJX-1-TEX-N-28" d="M94 250Q94 319 104 381T127 488T164 576T202 643T244 695T277 729T302 750H315H319Q333 750 333 741Q333 738 316 720T275 667T226 581T184 443T167 250T184 58T225 -81T274 -167T316 -220T333 -241Q333 -250 318 -250H315H302L274 -226Q180 -141 137 -14T94 250Z"></path>
<path id="MJX-1-TEX-N-30"
d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z"></path>
<path id="MJX-1-TEX-N-2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path>
<path id="MJX-1-TEX-N-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path>
<path id="MJX-1-TEX-N-29" d="M60 749L64 750Q69 750 74 750H86L114 726Q208 641 251 514T294 250Q294 182 284 119T261 12T224 -76T186 -143T145 -194T113 -227T90 -246Q87 -249 86 -250H74Q66 -250 63 -250T58 -247T55 -238Q56 -237 66 -225Q221 -64 221 250T66 725Q56 737 55 738Q55 746 60 749Z"></path>
<path id="MJX-1-TEX-S4-2013" d="M0 248V285H499V248H0Z"></path>
</defs>
<g stroke="#ffffff" fill="#ffffff" stroke-width="0" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mover">
<g data-mml-node="mrow">
<g data-mml-node="mo">
<use data-c="28" xlink:href="#MJX-1-TEX-N-28"></use>
</g>
<g data-mml-node="mn" transform="translate(389,0)">
<use data-c="30" xlink:href="#MJX-1-TEX-N-30"></use>
</g>
<g data-mml-node="mo" transform="translate(1111.2,0)">
<use data-c="2B" xlink:href="#MJX-1-TEX-N-2B"></use>
</g>
<g data-mml-node="mn" transform="translate(2111.4,0)">
<use data-c="31" xlink:href="#MJX-1-TEX-N-31"></use>
</g>
<g data-mml-node="mo" transform="translate(2611.4,0)">
<use data-c="29" xlink:href="#MJX-1-TEX-N-29"></use>
</g>
</g>
<g data-mml-node="mo" transform="translate(0,682)">
<svg width="3000.4" height="237" x="0" y="148" viewBox="750.1 148 3000.4 237">
<use data-c="2013" xlink:href="#MJX-1-TEX-S4-2013" transform="scale(9.001,1)"></use>
</svg>
</g>
</g>
<g data-mml-node="mi" transform="translate(3000.4,0)">
<text data-variant="normal" transform="scale(1,-1)" font-size="884px">・</text>
</g>
<g data-mml-node="mo" transform="translate(4000.4,0)">
<use data-c="28" xlink:href="#MJX-1-TEX-N-28"></use>
</g>
<g data-mml-node="mn" transform="translate(4389.4,0)">
<use data-c="31" xlink:href="#MJX-1-TEX-N-31"></use>
</g>
<g data-mml-node="mo" transform="translate(5111.7,0)">
<use data-c="2B" xlink:href="#MJX-1-TEX-N-2B"></use>
</g>
<g data-mml-node="mn" transform="translate(6111.9,0)">
<use data-c="31" xlink:href="#MJX-1-TEX-N-31"></use>
</g>
<g data-mml-node="mo" transform="translate(6611.9,0)">
<use data-c="29" xlink:href="#MJX-1-TEX-N-29"></use>
</g>
</g>
</g>
</svg>
