mathjax / MathJax-node

MathJax for Node
Apache License 2.0
615 stars 97 forks source link

[SVG] equation labels causes to smaller output #333

Closed pkra closed 7 years ago

pkra commented 7 years ago

Originally reported at https://github.com/pkra/mathjax-node-page/issues/47.

Adding a label makes the equation appear to be noticeably smaller (as if the font-size was smaller).

Example:

var mjAPI = require("./lib/main.js");

mjAPI.start();

var one = '\\begin{equation} e^{\\pi i} + 1 = 0 \\end{equation}';
var two = '\\begin{equation*} e^{\\pi i} + 1 = 0 \\end{equation*}'

mjAPI.typeset({
    math: one,
    format: "TeX",
    htmlNode: true,
    html: true,
    svg: true,
    equationNumbers: "AMS"
}, function (data) {
    console.log(data.svg);
});

mjAPI.typeset({
    math: two,
    format: "TeX",
    htmlNode: true,
    html: true,
    svg: true,
    equationNumbers: "AMS"
}, function (data) {
    console.log(data.svg);
});

Produces

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100ex" height="3.176ex" style="vertical-align: -1.005ex; max-width: 600;" viewBox="0 -934.9 43055.4 1367.4" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-labelledby="MathJax-SVG-1-Title">
<title id="MathJax-SVG-1-Title">\begin{equation} e^{\pi i} + 1 = 0 \end{equation}</title>
<defs aria-hidden="true">
<path stroke-width="1" id="E1-MJMAIN-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 stroke-width="1" id="E1-MJMAIN-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 stroke-width="1" id="E1-MJMAIN-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 stroke-width="1" id="E1-MJMATHI-65" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"></path>
<path stroke-width="1" id="E1-MJMATHI-3C0" d="M132 -11Q98 -11 98 22V33L111 61Q186 219 220 334L228 358H196Q158 358 142 355T103 336Q92 329 81 318T62 297T53 285Q51 284 38 284Q19 284 19 294Q19 300 38 329T93 391T164 429Q171 431 389 431Q549 431 553 430Q573 423 573 402Q573 371 541 360Q535 358 472 358H408L405 341Q393 269 393 222Q393 170 402 129T421 65T431 37Q431 20 417 5T381 -10Q370 -10 363 -7T347 17T331 77Q330 86 330 121Q330 170 339 226T357 318T367 358H269L268 354Q268 351 249 275T206 114T175 17Q164 -11 132 -11Z"></path>
<path stroke-width="1" id="E1-MJMATHI-69" d="M184 600Q184 624 203 642T247 661Q265 661 277 649T290 619Q290 596 270 577T226 557Q211 557 198 567T184 600ZM21 287Q21 295 30 318T54 369T98 420T158 442Q197 442 223 419T250 357Q250 340 236 301T196 196T154 83Q149 61 149 51Q149 26 166 26Q175 26 185 29T208 43T235 78T260 137Q263 149 265 151T282 153Q302 153 302 143Q302 135 293 112T268 61T223 11T161 -11Q129 -11 102 10T74 74Q74 91 79 106T122 220Q160 321 166 341T173 380Q173 404 156 404H154Q124 404 99 371T61 287Q60 286 59 284T58 281T56 279T53 278T49 278T41 278H27Q21 284 21 287Z"></path>
<path stroke-width="1" id="E1-MJMAIN-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 stroke-width="1" id="E1-MJMAIN-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path>
<path stroke-width="1" id="E1-MJMAIN-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>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)" aria-hidden="true">
<g transform="translate(41775,0)">
<g id="mjx-eqn-1" transform="translate(0,-65)">
 <use xlink:href="#E1-MJMAIN-28"></use>
 <use xlink:href="#E1-MJMAIN-31" x="389" y="0"></use>
 <use xlink:href="#E1-MJMAIN-29" x="890" y="0"></use>
</g>
</g>
<g transform="translate(19312,0)">
<g transform="translate(-11,0)">
<g transform="translate(0,-65)">
 <use xlink:href="#E1-MJMATHI-65" x="0" y="0"></use>
<g transform="translate(466,412)">
 <use transform="scale(0.707)" xlink:href="#E1-MJMATHI-3C0" x="0" y="0"></use>
 <use transform="scale(0.707)" xlink:href="#E1-MJMATHI-69" x="573" y="0"></use>
</g>
 <use xlink:href="#E1-MJMAIN-2B" x="1438" y="0"></use>
 <use xlink:href="#E1-MJMAIN-31" x="2439" y="0"></use>
 <use xlink:href="#E1-MJMAIN-3D" x="3217" y="0"></use>
 <use xlink:href="#E1-MJMAIN-30" x="4273" y="0"></use>
</g>
</g>
</g>
</g>
</svg>

and


<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="11.089ex" height="2.843ex" style="vertical-align: -0.505ex;" viewBox="0 -1006.6 4774.3 1223.9" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-labelledby="MathJax-SVG-1-Title">
<title id="MathJax-SVG-1-Title">\begin{equation*} e^{\pi i} + 1 = 0 \end{equation*}</title>
<defs aria-hidden="true">
<path stroke-width="1" id="E1-MJMATHI-65" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"></path>
<path stroke-width="1" id="E1-MJMATHI-3C0" d="M132 -11Q98 -11 98 22V33L111 61Q186 219 220 334L228 358H196Q158 358 142 355T103 336Q92 329 81 318T62 297T53 285Q51 284 38 284Q19 284 19 294Q19 300 38 329T93 391T164 429Q171 431 389 431Q549 431 553 430Q573 423 573 402Q573 371 541 360Q535 358 472 358H408L405 341Q393 269 393 222Q393 170 402 129T421 65T431 37Q431 20 417 5T381 -10Q370 -10 363 -7T347 17T331 77Q330 86 330 121Q330 170 339 226T357 318T367 358H269L268 354Q268 351 249 275T206 114T175 17Q164 -11 132 -11Z"></path>
<path stroke-width="1" id="E1-MJMATHI-69" d="M184 600Q184 624 203 642T247 661Q265 661 277 649T290 619Q290 596 270 577T226 557Q211 557 198 567T184 600ZM21 287Q21 295 30 318T54 369T98 420T158 442Q197 442 223 419T250 357Q250 340 236 301T196 196T154 83Q149 61 149 51Q149 26 166 26Q175 26 185 29T208 43T235 78T260 137Q263 149 265 151T282 153Q302 153 302 143Q302 135 293 112T268 61T223 11T161 -11Q129 -11 102 10T74 74Q74 91 79 106T122 220Q160 321 166 341T173 380Q173 404 156 404H154Q124 404 99 371T61 287Q60 286 59 284T58 281T56 279T53 278T49 278T41 278H27Q21 284 21 287Z"></path>
<path stroke-width="1" id="E1-MJMAIN-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 stroke-width="1" id="E1-MJMAIN-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 stroke-width="1" id="E1-MJMAIN-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path>
<path stroke-width="1" id="E1-MJMAIN-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>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)" aria-hidden="true">
 <use xlink:href="#E1-MJMATHI-65" x="0" y="0"></use>
<g transform="translate(466,412)">
 <use transform="scale(0.707)" xlink:href="#E1-MJMATHI-3C0" x="0" y="0"></use>
 <use transform="scale(0.707)" xlink:href="#E1-MJMATHI-69" x="573" y="0"></use>
</g>
 <use xlink:href="#E1-MJMAIN-2B" x="1438" y="0"></use>
 <use xlink:href="#E1-MJMAIN-31" x="2439" y="0"></use>
 <use xlink:href="#E1-MJMAIN-3D" x="3217" y="0"></use>
 <use xlink:href="#E1-MJMAIN-30" x="4273" y="0"></use>
</g>
</svg>
dpvc commented 7 years ago

In MathJax, because the em and ex sizes are approximations (determined empirically), full-width equations are hard to handle properly; if the ex-size is a little too big, then the width of the full-width equation could be slightly too wide for its container, causing scroll bars on the container when there should be any. So MathJax adds a max-width style in pixels (not ex) to prevent that.

In mathjax-node, the width and ex-size are set by the configuration rather than measuring the actual location in the page, so these values have to be set properly for the page you are using in order for that to work properly. The default ex-size is 6 pixels, but that might not match the ex size of the font used in your page (the default font in my browser appears to have an ex of about 8.72 pixels). So that means the max-width is likely to cause full-width equations to be restricted to an unusually small width, forcing the equation to be scaled down.

So there are two possible solutions: first, use the proper ex-size and width in the configuration. Alternatively, you could remove the min-width style after the fact. For example,

mjAPI.typeset({
    math: one,
    format: "TeX",
    svg: true,
    equationNumbers: "AMS"
}, function (data) {
    console.log(data.svg.replace(/ max-width: [^;"]*/,''));
});

in your code above.

pkra commented 7 years ago

As per F2F, this is a won't fix. SVG is simply limited this way.

The workaround is one option, fixing an ex height or using custom configurations (e.g., left-aligned display equations + labels on the left) is another way to handle this.