cannot convert \begin{array} .....\end{array} to svg
zhangjinling opened this issue · 7 comments
tex:\begin{array}{|c|c|c|} \hline 1&2 \ &3 \ \ \hline {\mathrm{4}} \ 11&\times &\times \ \hline 22 &\surd&\times \ \hline 33 &\surd&\surd \ \hline 44 &\times &\surd \ \hline \end{array}
node code :
require('mathjax').init({
loader: {
require: require,
paths: {mathjax: 'mathjax/es5'},
load: ['input/tex', 'output/svg']
}
}).then((MathJax) => {
const svg = MathJax.tex2svg('\begin{array}{|c|c|c|} \hline 1&2 \ &3 \ \\ \hline {\mathrm{4}} \ 11&\times &\times \\ \hline 22 &\surd&\times \\ \hline 33 &\surd&\surd \\ \hline 44 &\times &\surd \\ \hline \end{array}', {display: true});
console.log(MathJax.startup.adaptor.outerHTML(svg));
}).catch((err) => console.log(err.message));
use MathJax-demos-node component also not convert success.
node -r esm tex2svg '\begin{array}{|c|c|c|} \hline 1&2 \ &3 \ \ \hline {\mathrm{4}} \ 11&\times &\times \ \hline 22 &\surd&\times \ \hline 33 &\surd&\surd \ \hline 44 &\times &\surd \ \hline \end{array}'
use mathjax in web convert success
MathJax is correct in reporting error for your two examples above. This is because the LaTeX code you giving to MathJax is not what you think it is.
In Javascript string literals, the backslash (\
) has a special meaning as an escape character that is used to obtain control characters and other ones that are not easily obtained from the keyboard. For example, \b
is a backspace, \n
is a newline, and \t
is a tab. So the string you are passing to MathJax.tex2svg()
does not have the expected backslashes in it, and instead has backspaces, tabs, and other characters instead. If you were to use
console.log('\begin{array}{|c|c|c|} \hline 1&2 \ &3 \ \\ \hline {\mathrm{4}} \ 11&\times &\times \\ \hline 22 &\surd&\times \\ \hline 33 &\surd&\surd \\ \hline 44 &\times &\surd \\ \hline \end{array}');
you would get the output
egin{array}{|c|c|c|} hline 1&2 &3 \ hline {mathrm{4}} 11& imes & imes \ hline 22 &surd& imes \ hline 33 &surd&surd \ hline 44 & imes &surd \ hline end{array}
so you see, the LaTeX given to MathJax is not what you think it is, and MathJax correctly complains that it is invalid.
In order to get an actual backslash in the javascript string, you need to use \\
in the string literal. That is,
require('mathjax').init({
loader: {
require: require,
paths: {mathjax: 'mathjax/es5'},
load: ['input/tex', 'output/svg']
}
}).then((MathJax) => {
const svg = MathJax.tex2svg('\\begin{array}{|c|c|c|} \\hline 1&2 \\ &3 \\ \\\\ \\hline {\\mathrm{4}} \\ 11&\\times &\\times \\\\ \\hline 22 &\\surd&\\times \\\\ \\hline 33 &\\surd&\\surd \\\\ \\hline 44 &\\times &\\surd \\\\ \\hline \\end{array}', {display: true});
console.log(MathJax.startup.adaptor.outerHTML(svg));
}).catch((err) => console.log(err.message));
is what you need, and produces the expected output.
In the MathJax-demos-node example, you have lost the double backslashes that end the rows of the array, and so you have specified one long row in the array, and MathJax correctly complains about the use of \hline
, which must appear at the beginning of a row (not in the middle, as it is in your string).
Using
node -r esm tex2svg '\begin{array}{|c|c|c|} \hline 1&2 \ &3 \ \\ \hline {\mathrm{4}} \ 11&\times &\times \\ \hline 22 &\surd&\times \\ \hline 33 &\surd&\surd \\ \hline 44 &\times &\surd \\ \hline \end{array}'
instead will get you the SVG that you are looking for.
in mathjax-node-demo,I use node -r esm tex2svg '\begin{array}{|c|c|c|} \hline 1&2 \ &3 \ \\ \hline {\mathrm{4}} \ 11&\times &\times \\ \hline 22 &\surd&\times \\ \hline 33 &\surd&\surd \\ \hline 44 &\times &\surd \\ \hline \end{array}'
convert the svg is black svg rect ,not a table.
system:centos7
svg result :
<mjx-container class="MathJax" jax="SVG" display="true"><svg style="vertical-align: -8.033ex" xmlns="http://www.w3.org/2000/svg" width="14.787ex" height="17.197ex" role="img" focusable="false" viewBox="0 -4050.5 6536 7601" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><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-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path id="MJX-1-TEX-N-A0" d=""></path><path id="MJX-1-TEX-N-33" d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z"></path><path id="MJX-1-TEX-N-34" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path><path id="MJX-1-TEX-N-D7" d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z"></path><path id="MJX-1-TEX-N-221A" d="M95 178Q89 178 81 186T72 200T103 230T169 280T207 309Q209 311 212 311H213Q219 311 227 294T281 177Q300 134 312 108L397 -77Q398 -77 501 136T707 565T814 786Q820 800 834 800Q841 800 846 794T853 782V776L620 293L385 -193Q381 -200 366 -200Q357 -200 354 -197Q352 -195 256 15L160 225L144 214Q129 202 113 190T95 178Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="mtable"><g data-mml-node="mtr" transform="translate(0, 3015)"><g data-mml-node="mtd" transform="translate(1095, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-31"></use></g></g><g data-mml-node="mtd" transform="translate(3341.5, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-32"></use></g><g data-mml-node="mtext" transform="translate(500, 0)"><use xlink:href="#MJX-1-TEX-N-A0"></use></g></g><g data-mml-node="mtd" transform="translate(5264.5, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-33"></use></g><g data-mml-node="mtext" transform="translate(500, 0)"><use xlink:href="#MJX-1-TEX-N-A0"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, 1545)"><g data-mml-node="mtd" transform="translate(470, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-34"></use></g></g></g><g data-mml-node="mtext" transform="translate(500, 0)"><use xlink:href="#MJX-1-TEX-N-A0"></use></g><g data-mml-node="mn" transform="translate(750, 0)"><use xlink:href="#MJX-1-TEX-N-31"></use><use xlink:href="#MJX-1-TEX-N-31" transform="translate(500, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(3327.5, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-D7"></use></g></g><g data-mml-node="mtd" transform="translate(5250.5, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-D7"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, 25)"><g data-mml-node="mtd" transform="translate(845, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-32"></use><use xlink:href="#MJX-1-TEX-N-32" transform="translate(500, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(3290, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-221A"></use></g></g></g><g data-mml-node="mtd" transform="translate(5250.5, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-D7"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, -1495)"><g data-mml-node="mtd" transform="translate(845, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-33"></use><use xlink:href="#MJX-1-TEX-N-33" transform="translate(500, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(3290, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-221A"></use></g></g></g><g data-mml-node="mtd" transform="translate(5213, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-221A"></use></g></g></g></g><g data-mml-node="mtr" transform="translate(0, -3015)"><g data-mml-node="mtd" transform="translate(845, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-34"></use><use xlink:href="#MJX-1-TEX-N-34" transform="translate(500, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(3327.5, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-D7"></use></g></g><g data-mml-node="mtd" transform="translate(5213, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-221A"></use></g></g></g></g><line data-line="v" class="mjx-solid" x1="2755" y1="-3550.5" x2="2755" y2="4050.5"></line><line data-line="v" class="mjx-solid" x1="4678" y1="-3550.5" x2="4678" y2="4050.5"></line><line data-line="h" class="mjx-solid" x1="0" y1="2530" x2="6536" y2="2530"></line><line data-line="h" class="mjx-solid" x1="0" y1="1060" x2="6536" y2="1060"></line><line data-line="h" class="mjx-solid" x1="0" y1="-460" x2="6536" y2="-460"></line><line data-line="h" class="mjx-solid" x1="0" y1="-1980" x2="6536" y2="-1980"></line><rect data-frame="true" class="mjx-solid" width="6466" height="7531" x="35" y="-3515.5"></rect></g></g></g></svg></mjx-container>
use
require('mathjax').init({
loader: {
require: require,
paths: {mathjax: 'mathjax/es5'},
load: ['input/tex', 'output/svg']
}
}).then((MathJax) => {
const svg = MathJax.tex2svg('\\begin{array}{|c|c|c|} \\hline 1&2 \\ &3 \\ \\\\ \\hline {\\mathrm{4}} \\ 11&\\times &\\times \\\\ \\hline 22 &\\surd&\\times \\\\ \\hline 33 &\\surd&\\surd \\\\ \\hline 44 &\\times &\\surd \\\\ \\hline \\end{array}', {display: true});
console.log(MathJax.startup.adaptor.outerHTML(svg));
}).catch((err) => console.log(err.message));
the svg also is a black rect.
<mjx-container class="MathJax" jax="SVG" display="true"><svg style="vertical-align: -8.033ex" xmlns="http://www.w3.org/2000/svg" width="14.787ex" height="17.197ex" role="img" focusable="false" viewBox="0 -4050.5 6536 7601" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><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-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path id="MJX-1-TEX-N-A0" d=""></path><path id="MJX-1-TEX-N-33" d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z"></path><path id="MJX-1-TEX-N-34" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path><path id="MJX-1-TEX-N-D7" d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z"></path><path id="MJX-1-TEX-N-221A" d="M95 178Q89 178 81 186T72 200T103 230T169 280T207 309Q209 311 212 311H213Q219 311 227 294T281 177Q300 134 312 108L397 -77Q398 -77 501 136T707 565T814 786Q820 800 834 800Q841 800 846 794T853 782V776L620 293L385 -193Q381 -200 366 -200Q357 -200 354 -197Q352 -195 256 15L160 225L144 214Q129 202 113 190T95 178Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="mtable"><g data-mml-node="mtr" transform="translate(0, 3015)"><g data-mml-node="mtd" transform="translate(1095, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-31"></use></g></g><g data-mml-node="mtd" transform="translate(3341.5, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-32"></use></g><g data-mml-node="mtext" transform="translate(500, 0)"><use xlink:href="#MJX-1-TEX-N-A0"></use></g></g><g data-mml-node="mtd" transform="translate(5264.5, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-33"></use></g><g data-mml-node="mtext" transform="translate(500, 0)"><use xlink:href="#MJX-1-TEX-N-A0"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, 1545)"><g data-mml-node="mtd" transform="translate(470, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-34"></use></g></g></g><g data-mml-node="mtext" transform="translate(500, 0)"><use xlink:href="#MJX-1-TEX-N-A0"></use></g><g data-mml-node="mn" transform="translate(750, 0)"><use xlink:href="#MJX-1-TEX-N-31"></use><use xlink:href="#MJX-1-TEX-N-31" transform="translate(500, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(3327.5, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-D7"></use></g></g><g data-mml-node="mtd" transform="translate(5250.5, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-D7"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, 25)"><g data-mml-node="mtd" transform="translate(845, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-32"></use><use xlink:href="#MJX-1-TEX-N-32" transform="translate(500, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(3290, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-221A"></use></g></g></g><g data-mml-node="mtd" transform="translate(5250.5, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-D7"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, -1495)"><g data-mml-node="mtd" transform="translate(845, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-33"></use><use xlink:href="#MJX-1-TEX-N-33" transform="translate(500, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(3290, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-221A"></use></g></g></g><g data-mml-node="mtd" transform="translate(5213, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-221A"></use></g></g></g></g><g data-mml-node="mtr" transform="translate(0, -3015)"><g data-mml-node="mtd" transform="translate(845, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-34"></use><use xlink:href="#MJX-1-TEX-N-34" transform="translate(500, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(3327.5, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-D7"></use></g></g><g data-mml-node="mtd" transform="translate(5213, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-221A"></use></g></g></g></g><line data-line="v" class="mjx-solid" x1="2755" y1="-3550.5" x2="2755" y2="4050.5"></line><line data-line="v" class="mjx-solid" x1="4678" y1="-3550.5" x2="4678" y2="4050.5"></line><line data-line="h" class="mjx-solid" x1="0" y1="2530" x2="6536" y2="2530"></line><line data-line="h" class="mjx-solid" x1="0" y1="1060" x2="6536" y2="1060"></line><line data-line="h" class="mjx-solid" x1="0" y1="-460" x2="6536" y2="-460"></line><line data-line="h" class="mjx-solid" x1="0" y1="-1980" x2="6536" y2="-1980"></line><rect data-frame="true" class="mjx-solid" width="6466" height="7531" x="35" y="-3515.5"></rect></g></g></g></svg></mjx-container>
I find if has the \hline
will have a black rect corver the svg,and remove the rect is content,but don`t have border.
I know the reason,svg works with some css.
<style id="MJX-SVG-styles">
mjx-container[jax="SVG"] {
direction: ltr;
}
mjx-container[jax="SVG"] > svg {
overflow: visible;
}
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] {
stroke-width: 70px;
fill: none;
}
g[data-mml-node="mtable"] > rect[data-frame] {
stroke-width: 70px;
fill: none;
}
g[data-mml-node="mtable"] > .mjx-dashed {
stroke-dasharray: 140;
}
g[data-mml-node="mtable"] > .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;
}
.MathJax path {
stroke-width: 3;
}
</style>
thanks!